2

我正在构建一个应该显示不同类型图表的应用程序。一个应该显示由用户所做的分数定位的两个或多个图像。好吧，这与问题无关。所以我写了一个 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 个画布对象。而且当我使用 console.log() 时，舞台上有图形、网格、图片和弹出层，但没有显示的是图像。图像的来源是可用的。这个检查了好几遍。

有没有人暗示问题可能出在哪里。？

提前致谢。

马蒂亚斯

4

1 回答 1

7

你确认 imageObj.onload 正在执行吗？由于浏览器缓存，在定义 imageObj onload 函数后设置 imageObj 的来源是标准做法。

接下来，您还需要确保在使用 layer.draw() 加载图像时重绘图层；回想一下，KineticJS 层不会在出于性能原因发生变化时自动重绘

于 2012-09-26T01:00:47.013 回答