问一下“image kinetic.js”

Question

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

我想点击左边的按钮。

向右显示图像。

<input id="goals" type="checkbox" ng-model="checked.goals"><label for="goals">Goals</label>

<table ng-cloak>
    <thead>
        <td ng-show="checked.goals">Goals</td>
    </thead>
    <tr ng-repeat="stat in stats">
        <td ng-show="checked.goals">@{{ stat.goals }}</td>
    </tr>
</table>

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);

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