HTML5画布如何使图像可以通过Kinetic.js调整大小

HTML5 Canvas how to make image can resizable by Kinetic.js?

本文关键字：js 调整 Kinetic 可以通过 布如何 图像 HTML5      更新时间：2024-05-09

我添加了图像功能：

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

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

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

非常感谢。

动能元素没有内置的方式来让用户调整大小

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

  • 听mousedown、mouseup和mousemove
  • 如果鼠标按下发生在图像的右边缘
  • 在每次鼠标移动时，按鼠标移动距离创建的纵横比缩放图像

入门示例代码：

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>

相关文章：