KineticJS图像不工作在本地，有时工作在线

KineticJS images not working locally, sometimes work online

本文关键字：工作 在线 图像 KineticJS      更新时间：2023-09-26

我现在正在测试KineticJS。我试着在画布上添加一个图像。我改变了一点代码，但它是相对相同的。

令人困惑的是，它在本地根本不起作用…没有显示任何图像，也没有任何错误。在线是一个不同的故事，图像被加载，但有时看起来像图像没有加载。

这是我的:http://codepen.io/semajtwin/pen/nIafc

我想可能也是浏览器的问题，我尝试了三种不同的浏览器(Chrome, Firefox和Internet explorer)，但结果仍然是一样的。

我实在想不出是哪里出了问题。

提前感谢您的帮助。

@RobinvdA是正确的，您需要给图像加载时间

您的绘制draw_img();和draw_img2();在图像完全加载之前被调用。

修复方法是将draw_img代码放入onload中，如下所示:

下面是一些重构代码和演示:http://jsfiddle.net/m1erickson/fLPZt/

// declare sun_img outside `onload` so it's accessible later
var sun_img;
// create a Kinetic.Image of the sun
var sunReady = false;
var sunImage = new Image();
sunImage.onload = function () {
    sun_img = new Kinetic.Image({
        x: 0,
        y: 0,
        width: 200,
        height: 200,
        image: sunImage,
        draggable: true
    });
    layer.add(sun_img);
    layer.draw();
};
sunImage.src = "http://2.bp.blogspot.com/-GDMbp9j3iSo/Tgh24-ighVI/AAAAAAAAAgE/a4glfYd5-68/s200/radiantsunheliumballoon.jpg";
相关文章：