使用 FabricJs 的裁剪功能 [英] Crop Functionality using FabricJs
问题描述
如何使用fabric.js在画布上加载的图像上实现裁剪工具?我在画布上加载了一个图像.现在我想实现裁剪工具，允许用户裁剪图像并在完成后将其重新加载到画布上.
How to implement crop tool on the image that is loaded on the canvas using fabric.js ? I have a image loaded on the canvas .Now i want to implement crop tool where the user is allowed to crop the image and reload it on to the canvas when he is done.
推荐答案
总结
- set
el.selectable = false - 使用鼠标事件在其上绘制一个矩形
- 获取矩形左/上和宽/高
- 然后使用下面的函数
对不起，让我解释一下.ctx.rect 将从对象的中心点裁剪图像.还应考虑 scaleX 因素.
Sorry, let me explain. The ctx.rect will crop the image from the center point of the object. Also the scaleX factor should be taken into account.
x = select_el.left - object.left;
y = select_el.top - object.top;
x *= 1 / scale;
y *= 1 / scale;
width = select_el.width * 1 / scale;
heigh = select_el.height * 1 / scale;
object.clipTo = function (ctx) {
ctx.rect (x, y, width, height);
}
完整示例:http://jsfiddle.net/hellomaya/kNEaX/1/
并查看此 http://jsfiddle.net/hellomaya/hzqrM/ 以生成选择框.以及 Fabric 事件的参考:https://github.com/kangax/fabric.js/wiki/Working-with-events
And check out this http://jsfiddle.net/hellomaya/hzqrM/ for generating the select box. And a reference for the Fabric events: https://github.com/kangax/fabric.js/wiki/Working-with-events
这篇关于使用 FabricJs 的裁剪功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
