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小提琴似乎不适用于动能js。因此，您可以在此处尝试模板选择菜单：http://planttagmaker.herobo.com/index copy.php

Answer 1

make image.onload只会更改图像而不会改变任何其他图像。因此，从该函数中移出所有不必要的代码。

在您的代码中，无论何时加载图像，您都要添加形状，图层等等。

这导致了你的问题。

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

KineticJs改变了Image Object

1 个答案: