如何用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() 的等效函数?
最佳答案
您不绘制图像。你把图像交给布料,让布料画出来。示例: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);
关于javascript - fabric js 中的 drawImage(),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28873195/