旋转、倾斜、缩放蒙版和调整蒙版与对象的大小

Question

fabric.js 2.3.6

我正在尝试将应用于对象的任何转换复制到其上方的蒙版中。

我已经能够随对象一起移动蒙版，但是应用于蒙版的任何转换都不起作用，例如mask.set({ angle: object.angle }).setCoords();

https://jsfiddle.net/30hj5xk2

感谢。

Answer 1

请检查这里：https：//jsfiddle.net/o91rv38q/41/

// canvas
let canvas = new fabric.Canvas("canvas", {
backgroundColor: "lightgray",
width: 1280,
height: 720,
preserveObjectStacking: true,
selection: false,
stateful: true
});
canvas.isDrawingMode = true;
canvas.freeDrawingBrush.color = "black";
canvas.freeDrawingBrush.width = 2;
canvas.on("path:created", function(options) {
clip(options.path);
});
function clip(path) {
canvas.isDrawingMode = false;
canvas.remove(path);
let mask = new fabric.Path(path.path, {
top: object.top,
left: object.left,
objectCaching: false,
strokeWidth:0,
pathOffset: {
x: 0,
y: 0
}
});
object.set({
clipTo: function(ctx) {
mask.set({ 
left: -object.width/2-mask.width/2, 
top: -object.height/2-mask.height/2,
objectCaching: false
});
mask.render(ctx);
}
});
this.canvas.requestRenderAll();
}
// image
let image = new Image();
let object;
image.onload = function() {
object = new fabric.Image(image, {
width: 500,
height: 500,
top: 0,
left: 0
});
canvas.add(object);
};
image.src = "http://i.imgur.com/8rmMZI3.jpg";

更新问题不在于画布的缩放。问题是在将面具戴在object上之前，您需要考虑object.left和object.top。在您把mask放在object上之前，我保存了下来，用来减少mask.left和mask.top检查这里：http：//jsfiddle.net/mariusturcu93/30hj5xk2/10/

.JS

// canvas
let canvas = new fabric.Canvas("canvas", {
backgroundColor: "lightgray",
width: 1280,
height: 720,
preserveObjectStacking: true,
selection: false,
stateful: true
});
canvas.isDrawingMode = true;
canvas.freeDrawingBrush.color = "black";
canvas.freeDrawingBrush.width = 2;
window.addEventListener("resize", () => {
resize();
});
canvas.on("path:created", function(options) {
clip(options.path);
});
function resize() {
let canvasWrapper = document.querySelector(".canvas__wrapper");
let canvasWrapperWidth = canvasWrapper.offsetWidth;
let canvasWrapperHeight = canvasWrapper.offsetHeight;
let canvasWrapperRatio = canvasWrapperWidth / canvasWrapperHeight;
let canvasZoom = canvas.getZoom();
let canvasRatio = canvas.getWidth() / canvas.getHeight();
let scale;
if (canvasWrapperRatio < canvasRatio) {
scale = canvasWrapperWidth / canvas.getWidth();
canvasWrapperHeight = canvasWrapperWidth / canvasRatio;
} else {
scale = canvasWrapperHeight / canvas.getHeight();
canvasWrapperWidth = canvasWrapperHeight * canvasRatio;
}
scale *= canvasZoom;
canvas.setDimensions({
width: canvasWrapperWidth,
height: canvasWrapperHeight
});
canvas.setViewportTransform([scale, 0, 0, scale, 0, 0]);
console.log(canvas.viewportTransform);
}
resize();
function clip(path) {
canvas.isDrawingMode = false;
canvas.remove(path);
let scale = canvas.getZoom();
console.log(scale)
let mask = new fabric.Path(path.path, {
top: object.top,
left: object.left,
objectCaching: false,
strokeWidth:0,
pathOffset: {
x: 0,
y: 0
}
});
var originalObjLeft = object.left,
originalObjTop  = object.top;
object.set({
clipTo: function(ctx) {
mask.set({ 
left: -object.width/2-mask.width/2-originalObjLeft, 
top: -object.height/2-mask.height/2-originalObjTop,
objectCaching: false
});
mask.render(ctx);
}
});
canvas.requestRenderAll();
}
// image
let image = new Image();
let object;
image.onload = function() {
object = new fabric.Image(image, {
width: 500,
height: 500,
top: 20,
left: 20
});
canvas.add(object);
};
image.src = "http://i.imgur.com/8rmMZI3.jpg";