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>