问题描述
所以我想基于比例1保存画布,我希望包含所有现有/可见对象。
So I want to save the canvas based on scale 1 and I want to include all existing/visible objects.
所以现在,我的画布是600x400,如果我要保存它,它只会保存600x400内部的内容,它会尊重缩放级别(更高的变焦会看到更少的东西,更低的变焦会看到更多的东西,但更小)。
So right now, my canvas is 600x400 and if I were to save it, it would only save what's inside that 600x400, and it respects zoom level (a higher zoom will see less things, a lower zoom will see more things but smaller).
我通过运行此代码解决了这个问题:
I've gotten around this by running this code:
let zoom = this.canvas.getZoom();
this.canvas.setZoom(1);
let url = this.canvas.toDataURL({width: 1000, height: 700, multiplier: 1});
this.canvas.setZoom(zoom);
window.open(
url,
'_blank' // <- This is what makes it open in a new window.
);
这样做是将图像保存为1000x700,因此超过600px但低于1000的内容仍然可以获得保存。
What this does is save the image as 1000x700, so stuff that were past 600px but under 1000 still gets saved.
然而,这是硬编码的。所以我想知道是否有现有的功能或干净/简单的方法来检测所有对象的位置并返回完整的大小(宽度和高度)。
However, this is hard coded. So I was wondering if there was an existing function or a clean/simple way to detect where all the objects are in and returns the full size (width and height).
小提琴:
更新1:
var gr = new this.fabric.Group([], {
left: 0,
top: 0
});
this.canvas.forEachObject( (o) => {
gr.add(o);
});
this.canvas.add(gr);
this.canvas.renderAll();
console.log(gr.height, gr.width); // 0 0
解决方案
使用群组是最好的主意。最好的例子:
Using group was the best idea. Best example: http://jsfiddle.net/softvar/mRA8Z/
function selectAllCanvasObjects(){
var objs = canvas.getObjects().map(function(o) {
return o.set('active', true);
});
var group = new fabric.Group(objs, {
originX: 'center',
originY: 'center'
});
canvas._activeObject = null;
canvas.setActiveGroup(group.setCoords()).renderAll();
console.log(canvas.getActiveGroup().height);
}
推荐答案
一种可能性就是创造一种使用fabricjs 的容器,并将所有创建的对象添加到此容器中。
One possibility would be to create a kind of Container using a fabricjs group and adding all created objects to this container.
我在这里更新了你的小提琴:
I updated your fiddle here: http://jsfiddle.net/1pxceaLj/4/
因此,你可以使用 group.width
和 group.height
,可能会添加一些偏移量或最小值,并且您有动力值传递到 toDataUrl
即使有较小的画布。
Thus, you could just use group.width
and group.height
, perhaps adding a little offset or minimum values, and there you are having dynamical value to pass into toDataUrl
even when having a smaller canvas.
代码:
var canvas = new fabric.Canvas('c');
var shadow = {
color: 'rgba(0,0,0,0.6)',
blur: 20,
offsetX: 10,
offsetY: 10,
opacity: 0.6,
fillShadow: true,
strokeShadow: true
}
var rect = new fabric.Rect({
left: 100,
top: 100,
fill: "#FF0000",
stroke: "#000",
width: 100,
height: 100,
strokeWidth: 10,
opacity: .8
});
var rect2 = new fabric.Rect({
left: 800,
top: 100,
fill: "#FF0000",
stroke: "#000",
width: 100,
height: 100,
strokeWidth: 10,
opacity: .8
});
rect.setShadow(shadow);
//canvas.add(rect);
//canvas.add(rect2);
var gr = new fabric.Group([ rect, rect2 ], {
left: 0,
top: 0
});
canvas.add(gr);
function save()
{
alert(gr.width);
alert(gr.height);
let zoom = canvas.getZoom();
var minheight = 700;
canvas.setZoom(1);
let url = this.canvas.toDataURL({width: gr.width, height: gr.height > minheight ? gr.height : minheight, multiplier: 1});
canvas.setZoom(zoom);
window.open(
url,
'_blank'
);
}
这篇关于Fabricjs - 如何检测对象存在的画布的总宽度/高度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!