无法维护fabricjs组元素的strokeWidth
Unable to maintain strokeWidth for fabricjs group element
嗨,我正在开发fabricjs库,遇到了一个bug。
我正在画一组文本和矩形,然后重新调整大小。但我看到group@borders的大小随着重新调整而增加。但我希望strokeWidth自始至终都是相同的。
Fiddle来了!。
代码:`
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更新了fiddlehttp://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();
。您不应该同时将对象添加到画布和组中。
Mantain还提供文本尺寸:
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;
}
}
});
查看更新的fiddlehttp://jsfiddle.net/6CDFr/269/
相关文章:
- CKEditor Widget-阻止编辑可编辑元素本身
- 如何设置html元素填充的动画
- 如何将HTML id分配给元素,以及如何将JavaScript应用于元素
- 使用 jQuery 的 .on 函数如何获取事件的原始元素
- 使用clickToggle并在单击另一个元素时关闭元素
- 单击时将焦点更改为元素
- 表追加而不附加最后一个元素
- 如何在jQuery中获取元素的形式
- 我可以获得相对于被点击元素的确切点击位置吗
- 在函数中添加数组元素的数值
- 在单击任何位置时隐藏元素,而不检查每次DOM单击
- 将视口底部滚动到元素底部
- 是否有任何snippet或jQuery插件可以列出easylist.txt模式匹配的DOM中的所有元素
- 在不使用JQuery的情况下隐藏DOM中的选定元素
- 如何使用jquery处理php循环通过元素
- Ckeditor-plugin:插入虚假元素add不情愿<p>标签前后
- JQuery添加元素需要在我的js之前再次添加JQuery脚本
- 在Jquery detachment()和appendTo()之后定位元素
- 在动态创建的元素上获取对特定选择器的引用
- 无法维护fabricjs组元素的strokeWidth