KineticJs 更改图像对象

Question

当用户在下拉菜单中选择一个项目时，我正在尝试用新图像替换 kineticJS 舞台/图层上的现有图像对象。下面的代码有效，但是当图像被 #template_select 更改时，原始图像看起来并没有被删除，新图像只是被添加。

再次...非常感谢您，

托德

KineticJS：

    var stage = new Kinetic.Stage({
        container: 'tag_canvas',
        width: 306,
        height: 306
    });

    var layer = new Kinetic.Layer();
    var imageObj = new Image();

    var kinetic_common_name = new Kinetic.Text({
        x: 30,
        y: 40,
        text: commonname,
        fontSize: commonFontSize,
        fontFamily: commonFont,
        fill: 'green',
        draggable: true
    });
    var kinetic_botanical_name = new Kinetic.Text({
        x: 80,
        y: 115,
        text: latinname,
        fontSize: latinFontSize,
        fontFamily: latinFont,
        fill: 'green',
        draggable: true
    });

    imageObj.onload = function() {

        var template_image = new Kinetic.Image({
            x: 0,
            y: 0,
            image: imageObj,
        });

        // add the shape to the layer
        layer.add(template_image);
        layer.add(kinetic_common_name);
        layer.add(kinetic_botanical_name);

        // add the layer to the stage
        stage.add(layer);


    contextt.translate(306, 0);
    contextt.scale(-1, 1);

    contextt.drawImage(newRev, 0, 0);

    }; //END imageObj.onload
    imageObj.src = getTemplatePath(tag_template);


    var canvass = document.getElementById('reverse_tag_canvas');
    var contextt = canvass.getContext('2d');
    var newRev = layer.getCanvas().getElement();

  layer.afterDraw(function(){
        contextt.drawImage(newRev, 0, 0); //redraw reverse image
  });




    //change template
  $("#template_select").change(function(){
        imageObj.src = getTemplatePath($(this).val());
    layer.draw();

  });

HTML

Choose a template: 
<select id="template_select" name="template_select">
  <option value="sm_oval">Small Oval</option>
  <option value="lg_oval">Large Oval</option>
  <option value="xlg_oval">Extra Large Oval</option>
  <option value="hibiscus">Hibiscus</option>
</select>

我通常不喜欢把我的网址放在上面，但是 js fiddle 似乎不适用于 kinetic js。所以你可以在这里尝试模板选择菜单：http://planttagmaker.herobo.com/index copy.php

Answer 1

让 image.onload 只改变图像而不做其他事情。因此，从该函数中删除所有不必要的代码。

在您的代码中，每当加载图像时，您都会添加形状、图层等等。

这导致了您遇到的问题。

imageObj.onload = function() {
    layer.draw();
};