嗨,我正在fabricjs库上工作,并遇到了一个错误。
我正在绘制一组文本和矩形,然后重新调整其大小。但是我看到@borders组的大小随着调整大小而增加。但我希望strokeWidth在整个过程中都相同。
这是小提琴!
代码:
var gCanvas = new fabric.Canvas('canvDraw');
gCanvas.setWidth(500);
gCanvas.setHeight(500);
var myEllipse = new fabric.Ellipse({
top: 250,
left: 100,
rx: 75,
ry: 50,
fill: '#999999',
stroke: '#000000',
strokeWidth: 2
});
var myText = new fabric.Text("Some text", {
top: 250,
left: 250,
});
// set up a listener for the event where the object has been modified
gCanvas.observe('object:modified', function (e) {
var objects = gCanvas.getObjects();
for (i in objects) {
console.log(objects[i]);
objects[i].strokeWidth = 2;
}
});
var group = new fabric.Group([ myEllipse, myText ], {borderColor: 'black', cornerColor: 'green'});
gCanvas.add(group);`
Se更新了小提琴http://jsfiddle.net/6CDFr/264/,以动态更改笔触宽度。
gCanvas.observe('object:modified', function (e) {
var myObject = e.target;
if (!myObject._objects) {
return;
}
for (i in myObject._objects) {
objects[i].strokeWidth = 2 / Math.sqrt(myObject.scaleX * myObject.scaleY);
}
});
请小心,我删除了几个。canvas.add();
您不应该同时向画布和群组添加对象。
还保留TEXT尺寸:
gCanvas.observe('object:added', function (e) {
if (e.target.type === 'text' || e.target.type === 'i-text') {
e.target.originalFontsize = e.target.fontSize;
}
});
gCanvas.observe('object:modified', function (e) {
var myObject = e.target;
if (!myObject._objects) {
return;
}
for (i in myObject._objects) {
var obj = myObject._objects[i];
var scaleFactor = Math.sqrt(myObject.scaleX * myObject.scaleY);
obj.strokeWidth = 2 / scaleFactor;
if (obj.type === 'text' || obj.type === 'i-text') {
obj.fontSize = obj.originalFontsize / scaleFactor;
}
}
});
看到更新的小提琴http://jsfiddle.net/6CDFr/269/
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句