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

Question

I have add image function :

$("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);

=========== End function add Image to 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'); }

=========== End Event of Image ============

This code can add image to canvas ,can dragable but cant resizable How to make this image can resizable? Please explain to me please

Thank you so much.

Answer 1

Kinetic elements do not have a built-in way to let the user resize.

Here's code to let the user drag the right edge of the image to resize the image:

• Listen for mousedown, mouseup and mousemove
• If mousedown occurs on the right edge of the image, save that mouse x,y,
• On each mousemove, scale the image by the aspect ratio created by the distance the mouse has moved.

Example code to get you started:

 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>