Fabric JS 2.4.1如何使用clipPath裁剪缩放比例为1:1或更大的图像 [英] Fabric JS 2.4.1 How to use clipPath to crop image that has been scaled smaller or larger then 1:1 Ratio
本文介绍了Fabric JS 2.4.1如何使用clipPath裁剪缩放比例为1:1或更大的图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在调整目标图像的大小后，我一直想弄清楚在计算遮罩矩形的位置和大小时我做错了什么.
下面是Fabric JS的文档:
clipPath:fabric.Object无需描边即可定义其形状的裁剪区域的fabricObject.呈现为黑色时，将在呈现对象时使用clipPath对象，并将上下文放置在对象cacheCanvas的中心.如果要使clipPath的0,0与对象中心对齐，请使用clipPath.originX/Y来居中"类型:fabric.Object来源:fabric.js，第12991行
当图像未调整大小(比例为1:1 X和Y)时，我拥有的代码可以完美地工作.在名为 rescaleMask 的代码函数中，我尝试将蒙版定位到零中心X&处.是的，当我在一张方格纸上手动运行数学运算时，似乎数学运算是正确的.显然，我不知道有哪一部分会根据进行作物的象限而以不同方式导致定位偏离.这里有很多代码，但是重要的是掩码是动态创建的，而不是硬编码的.问题必须出在 rescaleMask 函数中，因此希望可以忽略其余代码.
我创建了一个带有编号正方形的测试图像图形，可以通过单击遮罩按钮进行裁剪，并使用鼠标左键在其中一个框周围绘制一个矩形，然后单击裁剪按钮.在创建蒙版和裁剪之前调整图像大小时会发生问题.
这是测试图像:
这是一个jsfiddle 使用鼠标动态js 2.4.1作为修订版4发送的织物创建rect
<画布id ="c" width ="500" height ="500" style ="border:1px solid #ccc"></canvas>< button id ="mask">面罩</button>< button id ="crop">裁剪</button> JS
var lastSelectedPicture = null;var isInsertingCropRectangle = false;var canvas = new fabric.Canvas('c'，{选择:正确，reserveObjectStacking:正确，高度:700，宽度:800});var crop_rect，isDown，origX，origY，掩码，目标；var done = false;var src ="https://stealth-apsvaw.streamhoster.com/fabric_js_2_4_1_crop_test/graph_paper_540.png";fabric.Image.fromURL(src，function(img){img.selectable = true;img.id ='目标';img.top = 30;img.left = 30;canvas.add(img);});canvas.on('object:added'，function(e){target = null;mask = null;canvas.forEachObject(function(obj){//alert(obj.get('id'));var id = obj.get('id');如果(id ==='target'){目标= obj;canvas.setActiveObject(obj);}如果(id ==='mask'){//alert(done);//alert('mask');遮罩= obj;}});});canvas.on('object:modified'，function(e){e.target.setCoords();canvas.renderAll();});///////////////////////////////////////////////////////////////面具/////////////////////////////////////////////////////////////document.getElementById("mask").addEventListener("click"，function(){isInsertingCropRectangle = true;canvas.discardActiveObject();lastSelectedPicture.selectable = false;lastSelectedPicture.setCoords();lastSelectedPicture.dirty = true;canvas.renderAll();canvas.discardActiveObject();isInsertingCropRectangle = true;});///////////////////////////////////////////////////////////////庄稼/////////////////////////////////////////////////////////////document.getElementById("crop").addEventListener("click"，function(){if(target！== null&& mask！== null){target.setCoords();//重新缩放蒙版遮罩= rescaleMask(目标，遮罩);mask.setCoords();//做庄稼target.clipPath =遮罩；target.dirty = true;canvas.setActiveObject(target);canvas.bringToFront(target);target.selectable = true;canvas.remove(mask);canvas.renderAll();console.log(target);}});///////////////////////////////////////////////////////////////重新缩放裁剪蒙版//P R O B L E M I N N T H I S F U N C T I O N/////////////////////////////////////////////////////////////函数rescaleMask(目标，遮罩){mask.scaleX = 1;mask.scaleY = 1;var targetCenterX = target.width * target.scaleX/2;var targetCenterY = target.height * target.scaleY/2;var maskOverlapX = mask.left-target.left;var maskOverlapY = mask.top-target.top;var centerBasedX = maskOverlapX-targetCenterX;var centerBasedY = maskOverlapY-targetCenterY;if(maskOverlapX> = targetCenterX){centerBasedX = maskOverlapX-targetCenterX;}别的{centerBasedX =-(targetCenterX)+ maskOverlapX;}if(maskOverlapY> = targetCenterY){centerBasedY = maskOverlapY-targetCenterY;}别的{centerBasedY =-(targetCenterY)+ maskOverlapY;}console.log('targetleft ='+ target.left);console.log('targettop ='+ target.top);console.log('targetCenterX ='+ targetCenterX);console.log('targetCenterY ='+ targetCenterY);console.log('maskleft ='+ mask.left);console.log('masktop ='+ mask.top);console.log('maskOverlapX ='+ maskOverlapX);console.log('maskOverlapY ='+ maskOverlapY);console.log('centerBasedX ='+ centerBasedX);console.log('centerBasedY ='+ centerBasedY);mask.left = centerBasedX;mask.top = centerBasedY;mask.originX ='左';mask.originY ='顶部';mask.setCoords();mask.dirty = true;canvas.renderAll();//var newMask = mask;返回(掩码);}canvas.on('mouse:down'，function(o){if(isInsertingCropRectangle == true){console.log('mouse down done ='+ done);如果(完成){canvas.renderAll();返回;}isDown = true;var指针= canvas.getPointer(o.e);origX = pointer.x;origY = pointer.y;crop_rect =新的fabric.Rect({左:origX，上图:origY，宽度:pointer.x-origX，高度:pointer.y-origY，不透明度:.3，transparentCorners:假，可选:真，id:'遮罩'});canvas.add(crop_rect);canvas.renderAll();}别的{}});canvas.on('mouse:move'，function(o){if(isInsertingCropRectangle == true){console.log('鼠标移动完成='+完成);如果(完成){canvas.renderAll();返回;}如果(！isDown)返回;var指针= canvas.getPointer(o.e);if(origX> pointer.x){crop_rect.set({左:Math.abs(pointer.x)});}if(origY> pointer.y){crop_rect.set({顶部:Math.abs(pointer.y)});}crop_rect.set({宽度:Math.abs(origX-pointer.x)});crop_rect.set({高度:Math.abs(origY-pointer.y)});crop_rect.setCoords();canvas.renderAll();}别的{}});canvas.on('mouse:up'，function(o){if(isInsertingCropRectangle == true){console.log('完成鼠标='+ done);如果(完成){canvas.renderAll();返回;}isDown = false;crop_rect.set({可选:真});完成=真;}别的{}});canvas.on('selection:created'，function(event){console.log("canvas.on('selection:created'");selectionChanged(event);});canvas.on('selection:updated'，function(event){console.log("canvas.on('selection:updated'");selectionChanged(event);});函数selectionChanged(event){console.log("selectionChanged");console.log("selectionChanged type =" + event.target.type);switch(event.target.type){案例文本框":休息;案例图片":lastSelectedPicture = event.target;休息;案例"rect":休息;案例组":休息;默认:休息;}} 解决方案
您需要考虑 target.scaleX 和 target.scaleY 作为遮罩.
var lastSelectedPicture = null;var isInsertingCropRectangle = false;canvas = new fabric.Canvas('c'，{选择:正确，reserveObjectStacking:正确，高度:700，宽度:800});var crop_rect，isDown，origX，origY，掩码，目标；var done = false;var src ="https://stealth-apsvaw.streamhoster.com/fabric_js_2_4_1_crop_test/graph_paper_540.png";fabric.Image.fromURL(src，function(img){img.selectable = true;img.id ='目标';img.top = 30;img.left = 30;canvas.add(img);});canvas.on('object:added'，function(e){target = null;mask = null;canvas.forEachObject(function(obj){//alert(obj.get('id'));var id = obj.get('id');如果(id ==='目标'){目标= obj;canvas.setActiveObject(obj);}如果(id ==='mask'){//alert(done);//alert('mask');遮罩= obj;}});});canvas.on('object:modified'，function(e){e.target.setCoords();canvas.renderAll();});///////////////////////////////////////////////////////////////面具/////////////////////////////////////////////////////////////document.getElementById("mask").addEventListener("click"，function(){isInsertingCropRectangle = true;canvas.discardActiveObject();lastSelectedPicture.selectable = false;lastSelectedPicture.setCoords();lastSelectedPicture.dirty = true;canvas.renderAll();canvas.discardActiveObject();isInsertingCropRectangle = true;});///////////////////////////////////////////////////////////////庄稼/////////////////////////////////////////////////////////////document.getElementById("crop").addEventListener("click"，function(){if(target！== null&& mask！== null){target.setCoords();//重新缩放蒙版遮罩= rescaleMask(目标，遮罩);mask.setCoords();//做庄稼target.clipPath =遮罩；target.dirty = true;canvas.setActiveObject(target);canvas.bringToFront(target);target.selectable = true;canvas.remove(mask);canvas.renderAll();console.log(target);}});///////////////////////////////////////////////////////////////重新缩放裁剪蒙版//P R O B L E M I N N T H I S F U N C T I O N/////////////////////////////////////////////////////////////函数rescaleMask(目标，遮罩){mask.scaleX = 1;mask.scaleY = 1;mask.scaleX/= target.scaleX;mask.scaleY/= target.scaleY;var targetCenterX = target.width * target.scaleX/2;var targetCenterY = target.height * target.scaleY/2;var maskOverlapX = mask.left-target.left;var maskOverlapY = mask.top-target.top;var centerBasedX = maskOverlapX-targetCenterX;var centerBasedY = maskOverlapY-targetCenterY;if(maskOverlapX> = targetCenterX){centerBasedX =(maskOverlapX-targetCenterX)/target.scaleX;}别的{centerBasedX =(-(targetCenterX)+ maskOverlapX)/target.scaleX;}if(maskOverlapY> = targetCenterY){centerBasedY =(maskOverlapY-targetCenterY)/target.scaleY;}别的{centerBasedY =(-(targetCenterY)+ maskOverlapY)/target.scaleY;}console.log('targetleft ='+ target.left);console.log('targettop ='+ target.top);console.log('targetCenterX ='+ targetCenterX);console.log('targetCenterY ='+ targetCenterY);console.log('maskleft ='+ mask.left);console.log('masktop ='+ mask.top);console.log('maskOverlapX ='+ maskOverlapX);console.log('maskOverlapY ='+ maskOverlapY);console.log('centerBasedX ='+ centerBasedX);console.log('centerBasedY ='+ centerBasedY);mask.left = centerBasedX;mask.top = centerBasedY;mask.originX ='左';mask.originY ='顶部';mask.setCoords();mask.dirty = true;canvas.renderAll();//var newMask = mask;返回(掩码);}canvas.on('mouse:down'，function(o){if(isInsertingCropRectangle == true){console.log('mouse down done ='+ done);如果(完成){canvas.renderAll();返回;}isDown = true;var指针= canvas.getPointer(o.e);origX = pointer.x;origY = pointer.y;crop_rect =新的fabric.Rect({左:origX，上图:origY，宽度:pointer.x-origX，高度:pointer.y-origY，不透明度:.3，transparentCorners:假，可选:真，id:'遮罩'});canvas.add(crop_rect);canvas.renderAll();}别的{}});canvas.on('mouse:move'，function(o){if(isInsertingCropRectangle == true){console.log('鼠标移动完成='+完成);如果(完成){canvas.renderAll();返回;}如果(！isDown)返回;var指针= canvas.getPointer(o.e);if(origX> pointer.x){crop_rect.set({左:Math.abs(pointer.x)});}if(origY> pointer.y){crop_rect.set({顶部:Math.abs(pointer.y)});}crop_rect.set({宽度:Math.abs(origX-pointer.x)});crop_rect.set({高度:Math.abs(origY-pointer.y)});crop_rect.setCoords();canvas.renderAll();}别的{}});canvas.on('mouse:up'，function(o){if(isInsertingCropRectangle == true){console.log('完成鼠标='+ done);如果(完成){canvas.renderAll();返回;}isDown = false;crop_rect.set({可选:真});完成=真;}别的{}});canvas.on('selection:created'，function(event){console.log("canvas.on('selection:created'");selectionChanged(event);});canvas.on('selection:updated'，function(event){console.log("canvas.on('selection:updated'");selectionChanged(event);});函数selectionChanged(event){console.log("selectionChanged");console.log("selectionChanged type =" + event.target.type);switch(event.target.type){案例文本框":休息;案例图片":lastSelectedPicture = event.target;休息;案例"rect":休息;案例组":休息;默认:休息;}} < script src ="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.1/fabric.min.js></script>< canvas id ="c" width ="500" height ="500" style ="border:1px solid #ccc"></canvas>< button id ="mask">面罩</button>< button id ="crop">裁剪</button> I have been trying to figure out what I am doing wrong when calculation the position and size of the mask rectangle once the target image has been resized.
Below is the documentation from fabric JS:
clipPath :fabric.Object a fabricObject that, without stroke define a clipping area with their shape. filled in black the clipPath object gets used when the object has rendered, and the context is placed in the center of the object cacheCanvas. If you want 0,0 of a clipPath to align with an object center, use clipPath.originX/Y to 'center' Type: fabric.Object Source: fabric.js, line 12991
The code I have works perfectly when the image is not resized (scale 1:1 X & Y). In the code's function named rescaleMask I attempt to position the mask to a zero center X & Y and when I run my math manually on a piece of graph paper it appears the math is correct. Obviously there is a piece that I am unaware of that is causing the positioning to be off in different ways depending on the quadrant in which the crop is being performed. There is quite a bit of code here but it is important that the mask is created dynamically and not hard coded. The problem must be in the rescaleMask function so hopefully the rest of the code can be ignored.
I created a test image graph with numbered squares which I will crop by clicking the mask button, drawing a rectangle around one of the boxes with the mouse left button and then clicking the crop button. The problem occurs when you resize the image before creating the mask and cropping.
Here is the test image:
Here is a jsfiddle fabric Creating rect with a mouse dynamic js 2.4.1 sent as fix #4
<canvas id="c" width="500" height="500" style="border:1px solid #ccc"></canvas>
<button id="mask">Mask</button>
<button id="crop">Crop</button>
JS
var lastSelectedPicture = null;
var isInsertingCropRectangle = false;
var canvas = new fabric.Canvas('c', {
selection: true,
preserveObjectStacking: true,
height: 700,
width: 800
});
var crop_rect, isDown, origX, origY, mask, target;
var done = false;
var src = "https://stealth-apsvaw.streamhoster.com/fabric_js_2_4_1_crop_test/graph_paper_540.png";
fabric.Image.fromURL(src, function(img) {
img.selectable = true;
img.id = 'target';
img.top = 30;
img.left = 30;
canvas.add(img);
});
canvas.on('object:added', function(e) {
target = null;
mask = null;
canvas.forEachObject(function(obj) {
//alert(obj.get('id'));
var id = obj.get('id');
if (id === 'target') {
target = obj;
canvas.setActiveObject(obj);
}
if (id === 'mask') {
//alert(done);
//alert('mask');
mask = obj;
}
});
});
canvas.on('object:modified', function(e) {
e.target.setCoords();
canvas.renderAll();
});
//////////////////////////////////////////////////////////
// MASK
//////////////////////////////////////////////////////////
document.getElementById("mask").addEventListener("click", function() {
isInsertingCropRectangle = true;
canvas.discardActiveObject();
lastSelectedPicture.selectable = false;
lastSelectedPicture.setCoords();
lastSelectedPicture.dirty = true;
canvas.renderAll();
canvas.discardActiveObject();
isInsertingCropRectangle = true;
});
//////////////////////////////////////////////////////////
// CROP
//////////////////////////////////////////////////////////
document.getElementById("crop").addEventListener("click", function() {
if (target !== null && mask !== null) {
target.setCoords();
// Re-scale mask
mask = rescaleMask(target, mask);
mask.setCoords();
// Do the crop
target.clipPath = mask;
target.dirty=true;
canvas.setActiveObject(target);
canvas.bringToFront(target);
target.selectable = true;
canvas.remove(mask);
canvas.renderAll();
console.log(target);
}
});
//////////////////////////////////////////////////////////
// RE-SCALE MASK FOR CROPPING
// P R O B L E M I N T H I S F U N C T I O N
//////////////////////////////////////////////////////////
function rescaleMask(target, mask){
mask.scaleX = 1;
mask.scaleY = 1;
var targetCenterX = target.width * target.scaleX / 2;
var targetCenterY = target.height * target.scaleY / 2;
var maskOverlapX = mask.left - target.left;
var maskOverlapY = mask.top - target.top;
var centerBasedX = maskOverlapX - targetCenterX;
var centerBasedY = maskOverlapY - targetCenterY;
if( maskOverlapX >= targetCenterX){
centerBasedX = maskOverlapX - targetCenterX;
}
else{
centerBasedX = -(targetCenterX) + maskOverlapX;
}
if( maskOverlapY >= targetCenterY){
centerBasedY = maskOverlapY - targetCenterY;
}
else{
centerBasedY = -(targetCenterY) + maskOverlapY;
}
console.log('targetleft = '+target.left);
console.log('targettop = '+target.top);
console.log('targetCenterX = '+targetCenterX);
console.log('targetCenterY = '+targetCenterY);
console.log('maskleft = '+mask.left);
console.log('masktop = '+mask.top);
console.log('maskOverlapX = '+maskOverlapX);
console.log('maskOverlapY = '+maskOverlapY);
console.log('centerBasedX = '+centerBasedX);
console.log('centerBasedY = '+centerBasedY);
mask.left = centerBasedX;
mask.top = centerBasedY;
mask.originX = 'left';
mask.originY = 'top';
mask.setCoords();
mask.dirty=true;
canvas.renderAll();
//var newMask = mask;
return(mask);
}
canvas.on('mouse:down', function(o) {
if( isInsertingCropRectangle == true ){
console.log('mouse down done = '+done);
if (done) {
canvas.renderAll();
return;
}
isDown = true;
var pointer = canvas.getPointer(o.e);
origX = pointer.x;
origY = pointer.y;
crop_rect = new fabric.Rect({
left: origX,
top: origY,
width: pointer.x - origX,
height: pointer.y - origY,
opacity: .3,
transparentCorners: false,
selectable: true,
id: 'mask'
});
canvas.add(crop_rect);
canvas.renderAll();
}
else{
}
});
canvas.on('mouse:move', function(o) {
if( isInsertingCropRectangle == true ){
console.log('mouse move done = '+done);
if (done) {
canvas.renderAll();
return;
}
if (!isDown) return;
var pointer = canvas.getPointer(o.e);
if (origX > pointer.x) {
crop_rect.set({
left: Math.abs(pointer.x)
});
}
if (origY > pointer.y) {
crop_rect.set({
top: Math.abs(pointer.y)
});
}
crop_rect.set({
width: Math.abs(origX - pointer.x)
});
crop_rect.set({
height: Math.abs(origY - pointer.y)
});
crop_rect.setCoords();
canvas.renderAll();
}
else{
}
});
canvas.on('mouse:up', function(o) {
if( isInsertingCropRectangle == true ){
console.log('mouse up done = '+done);
if (done) {
canvas.renderAll();
return;
}
isDown = false;
crop_rect.set({
selectable: true
});
done = true;
}
else{
}
});
canvas.on('selection:created', function(event) {
console.log("canvas.on('selection:created'");
selectionChanged(event);
});
canvas.on('selection:updated', function(event) {
console.log("canvas.on('selection:updated'");
selectionChanged(event);
});
function selectionChanged(event){
console.log("selectionChanged");
console.log("selectionChanged type = "+event.target.type);
switch(event.target.type) {
case 'textbox':
break;
case 'image':
lastSelectedPicture = event.target;
break;
case 'rect':
break;
case 'group':
break;
default:
break;
}
}
解决方案
You need to take in consideration the target.scaleX and target.scaleY for mask.
var lastSelectedPicture = null;
var isInsertingCropRectangle = false;
canvas = new fabric.Canvas('c', {
selection: true,
preserveObjectStacking: true,
height: 700,
width: 800
});
var crop_rect, isDown, origX, origY, mask, target;
var done = false;
var src = "https://stealth-apsvaw.streamhoster.com/fabric_js_2_4_1_crop_test/graph_paper_540.png";
fabric.Image.fromURL(src, function(img) {
img.selectable = true;
img.id = 'target';
img.top = 30;
img.left = 30;
canvas.add(img);
});
canvas.on('object:added', function(e) {
target = null;
mask = null;
canvas.forEachObject(function(obj) {
//alert(obj.get('id'));
var id = obj.get('id');
if (id === 'target') {
target = obj;
canvas.setActiveObject(obj);
}
if (id === 'mask') {
//alert(done);
//alert('mask');
mask = obj;
}
});
});
canvas.on('object:modified', function(e) {
e.target.setCoords();
canvas.renderAll();
});
//////////////////////////////////////////////////////////
// MASK
//////////////////////////////////////////////////////////
document.getElementById("mask").addEventListener("click", function() {
isInsertingCropRectangle = true;
canvas.discardActiveObject();
lastSelectedPicture.selectable = false;
lastSelectedPicture.setCoords();
lastSelectedPicture.dirty = true;
canvas.renderAll();
canvas.discardActiveObject();
isInsertingCropRectangle = true;
});
//////////////////////////////////////////////////////////
// CROP
//////////////////////////////////////////////////////////
document.getElementById("crop").addEventListener("click", function() {
if (target !== null && mask !== null) {
target.setCoords();
// Re-scale mask
mask = rescaleMask(target, mask);
mask.setCoords();
// Do the crop
target.clipPath = mask;
target.dirty=true;
canvas.setActiveObject(target);
canvas.bringToFront(target);
target.selectable = true;
canvas.remove(mask);
canvas.renderAll();
console.log(target);
}
});
//////////////////////////////////////////////////////////
// RE-SCALE MASK FOR CROPPING
// P R O B L E M I N T H I S F U N C T I O N
//////////////////////////////////////////////////////////
function rescaleMask(target, mask){
mask.scaleX = 1;
mask.scaleY = 1;
mask.scaleX/=target.scaleX;
mask.scaleY/=target.scaleY;
var targetCenterX = target.width * target.scaleX / 2;
var targetCenterY = target.height * target.scaleY / 2;
var maskOverlapX = mask.left - target.left;
var maskOverlapY = mask.top - target.top;
var centerBasedX = maskOverlapX - targetCenterX;
var centerBasedY = maskOverlapY - targetCenterY;
if( maskOverlapX >= targetCenterX){
centerBasedX = (maskOverlapX - targetCenterX)/target.scaleX;
}
else{
centerBasedX = (-(targetCenterX) + maskOverlapX)/target.scaleX;
}
if( maskOverlapY >= targetCenterY){
centerBasedY = (maskOverlapY - targetCenterY)/target.scaleY;
}
else{
centerBasedY = (-(targetCenterY) + maskOverlapY)/target.scaleY;
}
console.log('targetleft = '+target.left);
console.log('targettop = '+target.top);
console.log('targetCenterX = '+targetCenterX);
console.log('targetCenterY = '+targetCenterY);
console.log('maskleft = '+mask.left);
console.log('masktop = '+mask.top);
console.log('maskOverlapX = '+maskOverlapX);
console.log('maskOverlapY = '+maskOverlapY);
console.log('centerBasedX = '+centerBasedX);
console.log('centerBasedY = '+centerBasedY);
mask.left = centerBasedX;
mask.top = centerBasedY;
mask.originX = 'left';
mask.originY = 'top';
mask.setCoords();
mask.dirty=true;
canvas.renderAll();
//var newMask = mask;
return(mask);
}
canvas.on('mouse:down', function(o) {
if( isInsertingCropRectangle == true ){
console.log('mouse down done = '+done);
if (done) {
canvas.renderAll();
return;
}
isDown = true;
var pointer = canvas.getPointer(o.e);
origX = pointer.x;
origY = pointer.y;
crop_rect = new fabric.Rect({
left: origX,
top: origY,
width: pointer.x - origX,
height: pointer.y - origY,
opacity: .3,
transparentCorners: false,
selectable: true,
id: 'mask'
});
canvas.add(crop_rect);
canvas.renderAll();
}
else{
}
});
canvas.on('mouse:move', function(o) {
if( isInsertingCropRectangle == true ){
console.log('mouse move done = '+done);
if (done) {
canvas.renderAll();
return;
}
if (!isDown) return;
var pointer = canvas.getPointer(o.e);
if (origX > pointer.x) {
crop_rect.set({
left: Math.abs(pointer.x)
});
}
if (origY > pointer.y) {
crop_rect.set({
top: Math.abs(pointer.y)
});
}
crop_rect.set({
width: Math.abs(origX - pointer.x)
});
crop_rect.set({
height: Math.abs(origY - pointer.y)
});
crop_rect.setCoords();
canvas.renderAll();
}
else{
}
});
canvas.on('mouse:up', function(o) {
if( isInsertingCropRectangle == true ){
console.log('mouse up done = '+done);
if (done) {
canvas.renderAll();
return;
}
isDown = false;
crop_rect.set({
selectable: true
});
done = true;
}
else{
}
});
canvas.on('selection:created', function(event) {
console.log("canvas.on('selection:created'");
selectionChanged(event);
});
canvas.on('selection:updated', function(event) {
console.log("canvas.on('selection:updated'");
selectionChanged(event);
});
function selectionChanged(event){
console.log("selectionChanged");
console.log("selectionChanged type = "+event.target.type);
switch(event.target.type) {
case 'textbox':
break;
case 'image':
lastSelectedPicture = event.target;
break;
case 'rect':
break;
case 'group':
break;
default:
break;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.1/fabric.min.js"></script>
<canvas id="c" width="500" height="500" style="border:1px solid #ccc"></canvas>
<button id="mask">Mask</button>
<button id="crop">Crop</button>
这篇关于Fabric JS 2.4.1如何使用clipPath裁剪缩放比例为1:1或更大的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
