Kinetic.js - 图像未显示答案

【问题标题】：Kinetic.js - Images not showing upKinetic.js - 图像未显示
【发布时间】：2012-09-25 08:08:29
【问题描述】：

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

有人提示问题出在哪里吗？

提前致谢。

马蒂亚斯

【问题讨论】：

标签： javascript image kineticjs

【解决方案1】：

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

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

【讨论】：

是的，我也登录了 onload 函数，并且在此之后也设置了 src。将尝试重绘图层。
啊，好吧。你说对了。我不清楚下载图像后 onload 会触发。因此，如果我将 src 设置在其中，它将无效：D 在这些错误中，您将永远不会再做一次。非常感谢。