0

ユーザーがドロップダウンメニューで項目を選択したときに、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>

私は通常、URLを表示するのは好きではありませんが、jsフィドルは動的jsでは機能しないようです。したがって、ここでテンプレート選択メニューを試すことができます：http: //planttagmaker.herobo.com/index copy.php

4

1 に答える 1

2

image.onload で画像のみを変更し、それ以外は何も変更しないようにします。したがって、その関数からすべての不要なコードを移動します。

コードでは、画像が読み込まれるたびに、形状、レイヤーなどを追加しています。

それがあなたが抱えている問題を引き起こしています。

imageObj.onload = function() {
    layer.draw();
};
于 2013-02-21T16:28:13.977 に答える