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

===========结束功能将图像添加到画布============

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

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

此代码可以将图像添加到画布，可以拖动但不能调整大小。如何使该图像可以调整大小？ 请给我解释一下

非常感谢。

Answer 1

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

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

• 监听mousedown，mouseup和mousemove
• 如果将鼠标向下移到图像的右侧，请保存该鼠标的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>