1

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

任何帮助将不胜感激！

4

1 回答 1

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()将删除图层中的所有内容。

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

于 2012-07-19T08:43:01.210 回答