javascript - HTML5 Canvas 如何使图像可以通过 Kinetic.js 调整大小？

Question

我有添加图像功能:

$("ul#img a").click(function(){
    addProduct( $('img', this) );            
});

   function addProduct( imgObj ){

   var layer = new Kinetic.Layer();

    var imageObj = new Image();       //createimage
    imageObj.onload = function() { 
      var image = new Kinetic.Image({
        x: stage.getWidth() / 2 - 53,
        y: stage.getHeight() / 2 - 59,
        image: imageObj,
              draggable: true,
        name: "image"
      });
        // add the shape to the layer
      layer.add(image);

      // add the layer to the stage
      stage.add(layer);

==========结束函数添加图像到 Canvas ============

    image.on("mouseover", function(){
    var imagelayer = this.getLayer();
    document.body.style.cursor = "move"; 
    this.setStrokeWidth(2);
    this.setStroke("white"); //It's border of image when hover

    layer.draw();   
    writeMessage(messageLayer, "Delete it");}); //DeleteItem

    image.on("mouseout", function(){ 

    var imagelayer = this.getLayer();
    document.body.style.cursor = "default"; 
    this.setStrokeWidth(0);
    this.setStroke("transparent");
    layer.draw();  
    writeMessage(messageLayer, "");});

    image.on("dblclick dbltap", function(){
    layer.remove(image);
    layer.clear();
    layer.draw();});};

    imageObj.src = imgObj.attr('src'); }

==========图像结束事件============

此代码可以将图像添加到 Canvas 上，可以拖动但不能调整大小如何让这张图片可以调整大小呢？请给我解释一下

非常感谢。

Answer 1

动态元素没有内置方法来让用户调整大小。

以下代码可让用户拖动图像的右边缘来调整图像大小:

• 监听 mousedown、mouseup 和 mousemove
• 如果 mousedown 发生在图像的右边缘，则保存鼠标 x,y，
• 每次鼠标移动时，按鼠标移动距离产生的宽高比缩放图像。

入门示例代码:

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

var kImage;
var startRight=-1;
var startWidth=0;
var startHeight=0;

var img=new Image();
img.crossOrigin="anonymous";
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/facesSmall.png";
function start(){
  kImage = new Kinetic.Image({
    image:img,
    x:10,
    y:10,
    width:img.width,
    height:img.height,
  });
  layer.add(kImage);
  layer.draw();
}


$(stage.getContent()).on('mousedown', function (event) {
  var pos=stage.getPointerPosition();
  var mouseX=parseInt(pos.x);
  var mouseY=parseInt(pos.y);
  var ipos=kImage.position();
  var isize=kImage.getSize();
  var right=ipos.x+isize.width;
  if(mouseX>right-10 && mouseX<right+10){
    startRight=mouseX;
    startWidth=isize.width;
    startHeight=isize.height;
  }
});


$(stage.getContent()).on('mouseup', function (event) {
  startRight=-1;
});


$(stage.getContent()).on('mousemove', function (event) {
  if(startRight>=0){
    var pos=stage.getPointerPosition();
    var mouseX=parseInt(pos.x);
    var mouseY=parseInt(pos.y);
    var dx=mouseX-startRight;
    var scaleFactor=(mouseX-(startRight-startWidth))/startWidth;
    kImage.width(startWidth*scaleFactor);
    kImage.height(startHeight*scaleFactor);
    layer.draw();
  }
});

body{padding:20px;}
#container{
  border:solid 1px #ccc;
  margin-top: 10px;
  width:350px;
  height:350px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/kineticjs/5.2.0/kinetic.js"></script>
<h4>Drag the right border of the image to resize<br>it while maintaining aspect ratio.</h4>
<div id="container"></div>