Fabricjs drawImage替代

Question

我正在为drawImage() lib寻找fabric.js替代方案，所以我做了function：

function drawImage(img,sx,sy,swidth,sheight,x,y,width,height) {
  return new fabric.Image(img, {
    left: x,
    top: y,
    width: width,
    height: height,
    id: "rhino",
    clipTo: function (ctx) {
      ctx.rect(sx,sy,swidth,sheight); 
    }
  });
}
var imgElement = new Image();
imgElement.onload = function() {
  var imgInstance = drawImage(imgElement, 33, 71, 104, 124, 21, 20, 87, 104);
  canvas.add(imgInstance);
}; 
imgElement.src = "https://mdn.mozillademos.org/files/5397/rhino.jpg";

结果必须是：

但我对自定义功能一无所知。问题在哪里？

Codepen： http://codepen.io/anon/pen/RaxRqZ

Answer 1

在这里你可以找到解决方案，

var canvas = ctx = '';
canvas = new fabric.Canvas('canvas');
canvas.selection = false;
ctx = canvas.getContext('2d');

function drawImage(imgPath, x, y, width, height) 
{ 
  fabric.Image.fromURL(imgPath, function(img) {
    img.set({
      left: x,
      top: y, 
      width: width,
      height: height,
      id: "rhino",
      clipTo: function (ctx) {
        ctx.rect(5,5,50,50); 
      }
    });
    canvas.add(img).renderAll().setActiveObject(img);
  });
}
var imgElement = new Image();
imgElement.src = "https://mdn.mozillademos.org/files/5397/rhino.jpg";
imgElement.onload = function() {
  drawImage(imgElement.src, 50, 50, 100, 100);
}

https://codepen.io/mullainathan/pen/wGpzvY

Answer 2

我真的不知道你想要实现什么，但是出于性能和复杂性的原因，使用clipTo不是我的建议。 在临时画布上绘制您需要的图像部分，然后将此临时画布用作fabricJS图像的源。

var canvas = new fabric.Canvas('c');

function drawImage(img,sx,sy,swidth,sheight,x,y,width,height) {
      var tmpc = document.createElement('canvas');
      tmpc.width = swidth;
      tmpc.height = sheight;
      ctx = tmpc.getContext("2d");
      ctx.drawImage(img,-sx,-sy);
      return new fabric.Image(tmpc, {
        left: x,
        top: y,
        width: width,
        height: height,
        id: "rhino"
      });
    }
    var imgElement = new Image();
    imgElement.onload = function() {
      var imgInstance = drawImage(imgElement, 33, 71, 104, 124, 21, 20, 87, 104);
      canvas.add(imgInstance);
    }; 
    imgElement.src = "https://mdn.mozillademos.org/files/5397/rhino.jpg";

<script src="http://www.deltalink.it/andreab/fabric/fabric.js"></script>
<canvas id="c" width="500", height="500"></canvas>