在 KineticJS 中替换图像答案

【问题标题】：Replacing an image in KineticJS在 KineticJS 中替换图像
【发布时间】：2012-07-06 23:23:33
【问题描述】：

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

任何帮助将不胜感激！

【问题讨论】：

标签： javascript html canvas kineticjs

【解决方案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";

})

第一个问题是每次用户单击按钮时您都会创建一个新阶段。不要那样做——你只想要一个阶段。

每次用户单击按钮时，您都会创建一个新层。不要那样做。你只需要并且想要一个单层。

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

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

完成后，您将拥有一个阶段、一个层，并且在任何时间点都有一个图像。

【讨论】：

谢谢！！如果其他人被困在这个问题上，我已经更新了小提琴，这样他们就可以看到解决方案。