询问“图像动力学.js”答案

【问题标题】：ask about "image kinetic.js"询问“图像动力学.js”
【发布时间】：2015-05-15 21:48:08
【问题描述】：

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

我想点击左边的按钮。

将图像显示在右侧。

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">

【问题讨论】：

标签： javascript kineticjs

【解决方案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

【讨论】：