詢問“ imagedynamic.js”

Question

我沒有找到我想要的文章
我想知道我問題的答案。

我想單擊左側的按鈕。

向右顯示圖像。

 var stage = new Kinetic.Stage({ container: 'container', width: 530, height: 530 }); var layer = new Kinetic.Layer(); var bg = new Kinetic.Image({ x: 0, y: 0, width: 530, height: 530, fill: '#D7D7D7', }); /****************** image **********************/ var imageObj = new Image(); imageObj.onload = function() { var sticker = new Kinetic.Image({ x: 280, y: 300, image: imageObj, draggable: true }); layer.add(sticker); }; imageObj.src = 'http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png'; /****************** image **********************/ layer.add(bg); stage.add(layer); 

 <script src="http://stats4dev.com/stata/kinetic-v5.0.2.min.js"></script> <div id="container"></div> <input type="button" value="sticker1"> <input type="button" value="sticker2"> <input type="button" value="sticker3"> <input type="button" value="sticker4"> <input type="button" value="sticker5"> <input type="button" value="sticker6"> 

Answer 1

我為您創建了一個原型。
請看一下。只需點擊標簽即可查看。

var stage = new Kinetic.Stage({
        container: 'container',
        width: 578,
        height: 500
      });
      var layer = new Kinetic.Layer();
     stage.add(layer);

      var imageObj = new Image();
      var imageObj2 = new Image();
      var imageObj3 = new Image();
      var imageObj4= new Image();

  imageObj.onload = function() {
        var yoda = new Kinetic.Image({
          x: 0,
          y: 50,
          image: imageObj,
          width: 106,
          height: 118
        });

        // add the shape to the layer
        layer.add(yoda);
        layer.draw();
      yoda.on('click',function(){
       ClickIt(this)
      });
      };
      imageObj.src = 'https://lh6.ggpht.com/oFO5FHZ1e5pKVCunWsRagyKyjD9itntg-1mgp8qYOMcXrswsfQgTT1qdfUBBa0rT7wI=w300';
  imageObj2.onload = function() {
        var yoda2 = new Kinetic.Image({
          x: 110,
          y: 50,
          image: imageObj2,
          width: 106,
          height: 118
        });

        // add the shape to the layer
        layer.add(yoda2);
      yoda2.on('click',function(){
       ClickIt(this)
      });
        layer.draw();
      };
      imageObj2.src = 'https://quotesandsmileys.files.wordpress.com/2014/05/emoticon-in-love.jpg';



imageObj3.onload = function() {
        var pre = new Kinetic.Image({
          x: 0,
          y: 250,
          image: imageObj3,
          width: 250,
          height: 250
        });

        // add the shape to the layer
        layer.add(pre);
        layer.draw();

      };
      imageObj3.src = '';

function ClickIt(kimg){
    imageObj3.src=kimg.getImage().src
}

JSFiddle演示