询问“image kinetic.js”

Question

我没有找到我想要的文章
我想知道我的问题的答案。

我想点击按钮的左侧。

将图像显示在右边。

var stage = new Kinetic.Stage({ 
 
\t container: 'container', 
 
\t width: 530, 
 
\t 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() { 
 
\t var sticker = new Kinetic.Image({ 
 
\t \t x: 280, 
 
\t \t y: 300, 
 
\t \t image: imageObj, 
 
\t \t draggable: true 
 
\t }); 
 
\t 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 Demo