KineticJs改變圖像對象

我想在用戶在下拉菜單中選擇一個項目時用新圖像替換kineticJS舞臺/圖層上的現有圖像對象。下面的代碼可以工作，但是當圖片被#template_select改變時，原始圖像看起來並不像它正在被刪除，新的圖像剛剛被添加。KineticJs改變圖像對象

再次...謝謝你這麼多，

託德

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

來源

2013-02-21 maddogandnoriko

使image.onload做只改變圖像，沒有別的。因此請移除該函數中所有不必要的代碼。

在你的代碼中，無論何時加載圖像，都要添加形狀，圖層等等。

這是造成您有問題。

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

來源

2013-02-21 16:28:13 allenhwkim

但我期待動態更改圖像。我唯一額外的代碼是：imageObj.src = getTemplatePath（$（this）.val（））;這應該觸發onload ..好嗎？ – maddogandnoriko 2013-02-21 16:47:20

如果我將圖像預加載到隱藏的div中，如何將它加載到kineticJS階段？使用網址無法正常工作 – maddogandnoriko 2013-02-21 17:41:43

我已經加載更改模板並且不創建新圖像，但它現在將新圖像縮放到舊圖像尺寸。 http://planttagmaker.herobo.com/canvasTest.htm.php – maddogandnoriko 2013-02-21 17:46:45

KineticJs改變圖像對象

回答

相關問題