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);

但它给了我一个错误＆＃34; fabricCanvas.drawImage不是一个函数＆＃34;。如何将paintImage（）与fabric js一起使用？

修改

在fabric js中使用clipTo（）可以实现裁剪功能。但我想修改图像形状。检查此链接。 How to bend/curve a image in html5 canvas。这是通过改变目标x和y位置来重新绘制图像来完成的。在结构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);

在fabric js中的drawImage（）

1 个答案: