drawImage() in fabric js

drawImage() in fabric js

本文关键字：fabric js in drawImage      更新时间：2023-09-26

如何用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（）可以实现裁剪功能。但是我想修改图像的形状。检查此链接。如何在html5画布中弯曲/弯曲图像。这里，通过改变目的地x和y的位置来重新绘制图像。fabric js中是否有任何选项可以让上下文使用html5的默认函数？或者drawImage（）有等效的函数吗？

您不绘制图像。将图像赋予织物，然后由织物绘制。示例：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);
相关文章：