Question

我正在尝试使用KineticJS构建一个Web应用程序，我基本上有一个在负载上运行的功能，它将一个图像添加到画布（KineticJS中的舞台）。每次函数运行时，它都会在现有函数下面再次添加图像，我需要它来替换当前在舞台上的图像。我知道这与我每次加载函数时创建一个新的图像对象有关，但我很困惑为什么它的定位不同（下面）。我在这里模拟了同一个事件：http://jsfiddle.net/UCvbe/ - 如果多次单击该按钮，图像将在下面复制。最终功能将在用户选择门环时运行，因此最终功能必须接受参数，例如'silver'，以便它知道绘制银色门环等。

任何帮助将不胜感激！

Answer 1

您的代码如下所示：

$('#testBtn').click(function() {

var stageKnocker = new Kinetic.Stage({
    container: "canvas-overlay",
    width: 402,
    height: 470
});
var layerKnocker = new Kinetic.Layer();

var imageObj = new Image();
imageObj.onload = function(){
    var image = new Kinetic.Image({
    x: 193,
    y: 110,
    image: imageObj,
    width: 25,
    height: 50,
    draggable: true
     });
     layerKnocker.add(image);
     stageKnocker.add(layerKnocker);
 };
 imageObj.src = "http://shop.windowrepairshop.co.uk/WebRoot/Store3/Shops/es115683_shop/49E6/ECF2/0C60/3750/10B1/50ED/8970/710D/V6GP_0020_gold_0020_plate_0020_vic_0020_urn_0020_LArge.jpg";

})

第一个问题是，每次用户点击按钮时，您都要创建一个新的舞台。不要这样做 - 你只想要一个阶段。

每次用户点击按钮时，您也会创建一个新图层。不要那样做。你只需要＆amp;想要一层。

最后，每当用户点击按钮并将其添加到图层时，您就会创建一个新的Kinetic.Image。没关系！继续这样做。但你也想删除旧的Kinetic.Image。如果不这样做，您将继续添加图像，而不是替换它们。

之前将Kinetic.Image添加到图层，您想要从图层中删除任何现有图像：layerKnocker.removeChildren()将删除图层中的所有内容。

完成后，您将拥有一个阶段，一个图层，以及任何时间点的单个图像。

更换KineticJS中的图像

1 个答案: