我正在使用Fabric js生成模板，我希望用户设置我正在使用以下代码的画布的高度和宽度
canvas.setHeight(height);
canvas.setWidth(width);
但是，这样做时，全宽画布会自行拉伸，并且对象会从调整大小后的画布中消失，因为之前说的是500像素宽，用户将其调整为100像素，然后项目消失了。
我想要实现一项功能，以便如果用户想要更改画布的大小，那么我将显示一个矩形，而不是调整画布的大小，而是可以相应地移动矩形以获取可见区域，并且一旦用户单击“保存”，我便会调整大小根据该矩形绘制画布，以便稍后可以处理SVG进行进一步的转换，但是通过这样做，我不确定如何将矩形中的可见区域获取到调整后的画布上，简而言之，我想要使用Darkroom js之类的功能，但对于织物js画布对象。
当前功能已添加到该JS小提琴中http://jsfiddle.net/tbqrn/102/
最后，在进行了一些研究之后，我能够做到这一点，而不是调整画布的大小，而是添加一个带有“ cropper”类型的矩形对象，如下所述
var rect = new fabric.Rect({
left: 100,
top: 100,
fill: 'transparent',
width: 400,
height: 400,
strokeDashArray: [5, 5],
stroke: 'black',
type: 'cropper',
lockScalingX: true,
lockScalingY: true,
lockRotation: true
});
canvas.add(rect);
此矩形将用作裁剪器，当用户提交表单时，我将获得裁剪器的尺寸，以及更改画布大小
var i;
var croppedLeft = 0;
var croppedTop = 0;
var canvasJson = canvas.getObjects();
// Cropping canvas according to cropper rectangle
if (canvas.getObjects().length > 0) {
var i;
for (i = 0; i < canvas.getObjects().length; i++) {
if (canvas.getObjects()[i].type == 'cropper') {
croppedLeft = canvas.getObjects()[i].left;
croppedTop = canvas.getObjects()[i].top;
canvas.setHeight(canvas.getObjects()[i].height);
canvas.setWidth(canvas.getObjects()[i].width);
canvas.getObjects()[i].remove();
}
}
}
之后，我将相应地移动所有其他画布对象，如下所示。
for (i = 0; i < canvasJson.length; i++) {
canvas.getObjects()[i].left = canvas.getObjects()[i].left - croppedLeft
canvas.getObjects()[i].top = canvas.getObjects()[i].top - croppedTop
canvas.renderAll();
}
这样做之后，我能够实现所需的功能，希望这对某人有所帮助。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句