我正在构建一个应显示不同类型图形的应用程序。一个应该显示两张或更多张按用户得分位置定位的图像。好的,这与问题无关。所以我写了一个jQuery插件,它通过json接收值来绘制图形。

该插件首先调用一个绘制图形线条的函数(起作用),另一个函数绘制图形后面的网格(也起作用)。

现在的问题是:主体部分遍历值数组,并将Kinetic.image对象添加到返回至层并返回到该层的层中:

$.each(this.data, function(key, value) {
            $.each(value, function(secKey, secValue){
                secValue.X = Math.floor((secValue.X - minX) * scaleX) + xOffset;
                secValue.Y = Math.floor(yOffset + ((minY - secValue.Y) * scaleY));
                coords.push(secValue);
            });
        });

        $.each(coords, function(key, value){
            var imageObj = new Image();
            imageObj.src = value.image;
            imageObj.onload = function() {
                var image = new Kinetic.Image({
                    x: value.X,
                    y: value.Y,
                    image: imageObj,
                    width: 180,
                    height: 180
                });

            // add the shape to the layer
            pictures.add(image);

            };
        });

        return Array(pictures, popup);

最后,呈现的页面具有4个 Canvas 对象。而且,当我在console.log()舞台上时,其中包含用于图形,网格,图片和弹出窗口的图层,但是未显示的是图像。图像来源可用。检查了几次。

有没有人暗示问题可能在哪里?

提前致谢。

马蒂亚斯

最佳答案

您已确认imageObj.onload正在执行吗?由于浏览器缓存的原因,在定义imageObj onload函数之后,设置imageObj的源是标准做法。

接下来,您还需要确保每当用layer.draw();加载图像时都重新绘制该层。回想一下,由于性能原因一旦发生变化,KineticJS图层不会自动重绘

10-01 16:37
查看更多