javascript - fabric js 中的 drawImage()

Question

如何用fabric js改写如下代码？

var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

在使用 fabric js 时，它不返回上下文。有没有办法返回上下文？我尝试了以下代码。

var fabricCanvas = new fabric.Canvas(ccr.options.candleCanvasId);
fabricCanvas.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

但它给了我一个错误“fabricCanvas.drawImage 不是一个函数”。如何将 drawImage() 与 fabric js 一起使用？

编辑

在 fabric js 中使用 clipTo() 可以实现裁剪功能。但是我想修改图像形状。检查此链接。 How to bend/curve a image in html5 canvas .这里是通过改变目标 x 和 y 位置重新绘制图像来完成的。 fabric js 中是否有任何选项可以获取上下文以使用 html5 的默认函数？或者是否有 drawImage() 的等效函数？

Answer 1

您不绘制图像。你把图像交给布料，让布料画出来。示例:http://fabricjs.com/fabric-intro-part-1#images

var imgInstance = new fabric.Image(imgElement, {
  left: dx,
  top: dy,
  width: dwidth,
  height: dheight,
  clipTo: function (ctx) {
    ctx.rect(dwidth / 2 - sx, dheight / 2 - sy, swidth, sheight);
  }
});
fabricCanvas.add(imgInstance);