使用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.

推荐答案

总结

1. 设置 el.selectable = false


2. 用鼠标事件在其上绘制一个矩形


3. 得到矩形left / top和width / height
4. 
   
5. 然后使用以下函数

对不起，让我解释一下。 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屋！