你好 我使用 fabricjs 来玩 html Canvas 。 我创建了 Canvas 并在上面添加了一组对象。
在一组对象上,我需要在缩放对象时保持某些对象的固定宽度和高度。
我使用 'object:scaling' 事件 在事件对象改变大小时获取它,我读取组中的每个对象并分配 element[i].set({ 'radius':5}) 在我希望保持不变的组对象上。
但结果是,所有组都反对调整大小。
我向您展示了 object:scaling 事件的片段:
canvas.on('object:scaling',function(e){
var activeObject1 = e.target;
var elements = e.target._objects;
var count_elements = elements.length;
for(var i = 0; i < count_elements; i++) {
var type = elements[i].typeCircle;
if(type == "parts"){
//elements[i].set({"radius":8,"fill":"#abcde2","stroke":"#367827"});
//elements[i].set('radius',8);
/*elements[i].setWidth(16);
elements[i].setHeight(16);
elements[i].currentWidth = 16;
elements[i].currentHeight = 16;
elements[i].scaleX = 1;
elements[i].scaleY = 1;
console.log(elements[i]);
canvas.renderAll();*/
}
}
});
我应该在 for 循环中写入什么以保持某些对象的固定大小? 我在上面使用的所有内容,除了 "fill":"#abcde2","stroke":"#367827"
外,它们都不起作用如果有人在 fabricjs 上遇到过类似的事情,请告诉我。
最佳答案
您必须使用 setScaleX() 和 setScaleY() 方法。 这是一个例子...
var Rect = new fabric.Rect({
width: 200,
height: 200,
top: 100,
left: 100,
fill: 'rgba(255,0,0,0.5)',
stroke: '#000',
strokeWidth: 1,
});
var Circle = new fabric.Circle({
left: 100,
top: 100,
fill: '#FF00FF',
stroke: 'red',
radius: 100,
opacity: 1,
});
var Group = new fabric.Group([Rect, Circle])
canvas.add(Group)
canvas.on({
'object:scaling': onChange
})
function onChange(obj) {
var circle = obj.target.item(1),
group = obj.target,
scaleX = circle.width / group.getWidth(),
scaleY = circle.height / group.getHeight();
circle.setScaleX(scaleX);
circle.setScaleY(scaleY);
}
关于javascript - fabricjs 如何在其他缩放时保持组元素的固定大小?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28497274/