在KineticJS中替换图像 [英] Replacing an image in KineticJS

问题描述

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

I'm trying to build a web app using KineticJS, I basically have a function which runs on load which adds an image to a canvas (stage in KineticJS). Each time the function runs though, it is adding the image again underneath the existing one, where as I need it to replace the one that is currently on the stage. I know it's something to do with me creating a new image object each time the function is loaded, but I'm confused as to why it's positioning is different (underneath). I have simulated the same event here: http://jsfiddle.net/UCvbe/ - If you click the button several times, the image duplicates below. The final function will be ran when a user selects a knocker, therefore the final function must accept a parameter eg 'silver' so that it knows to draw the silver knocker etc.

推荐答案

您的代码如下所示：

$('#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";

})

第一个问题是您正在创建一个新阶段每次用户单击按钮。不要这样做 - 你只想要一个阶段。

The first problem is that you are creating a new Stage each time a user clicks the button. Don't do that--you only want one stage.

每次用户点击按钮时，你还在创建一个新图层。不要这样做。你只需要&想要一个单一的图层。

You're also creating a new layer each time a user clicks the button. Don't do that. You only need & want a single layer.

最后，每次用户点击按钮并将其添加到图层时，您都将创建一个新的Kinetic.Image。没关系！继续这样做。但你也想删除旧的Kinetic.Image。

Finally, you are creating a new Kinetic.Image each time a user clicks the button and adding it to the layer. That's fine! Keep doing that. But you also want to remove the old Kinetic.Image. If you don't, you will just keep adding images, not replacing them.

因此之前将Kinetic.Image添加到图层中，您要从图层中删除任何现有图片： layerKnocker.removeChildren（）将删除图层中的所有内容。

So before adding the Kinetic.Image to the layer, you want to remove any existing images from the layer: layerKnocker.removeChildren() will remove everything in the layer.

完成后，您将拥有单个阶段，单个图层，并在任何时间点创建单个图片。

When you're done, you will have a single stage, a single layer, and at any point in time a single image.

这篇关于在KineticJS中替换图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！