Kinetic.js - 图像没有显示出来

时间:2012-09-25 08:08:29

标签: javascript image kineticjs

我正在构建一个应该显示不同类型图表的应用程序。应该显示由用户所做的分数定位的两个或更多个图像。好的,这与问题无关。所以我写了一个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()阶段时,其中有图形,网格,图片和弹出窗口的图层,但最新的图像是什么。图像的来源可用。多次检查。

有没有人提出问题所在的提示。?

提前致谢。

的Matthias

1 个答案:

答案 0 :(得分:7)

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

接下来,您还需要确保在使用layer.draw()加载图像时重新绘制图层;回想一下,当出于性能原因而改变时,KineticJS层不会自动重绘