Javascript 带笔划的矩形，缩放时笔划线变换错误

我从这个网站和贡献者那里得到了很多帮助，谢谢。现在我有一个关于Fabric.js中带有笔划的矩形的问题，因为我使用它作为图像和文本的占位符，当我缩放它时，边框线宽也被缩放，我认为这是一个问题，因为我想保持边框宽度不变

var canvas = new fabric.Canvas("c1");

var el = new fabric.Rect({
    originX: "left",
    originY: "top",
    left: 5,
    top: 5,
    stroke: "#ccc",
    strokWidth: 1,
    fill: 'transparent',
    opacity: 1,
    width: 200,
    height: 200,
    cornerSize: 6
});

canvas.add (el);
canvas.renderAll ();

请参见此处的示例，尝试水平缩放它。这里也有一个图像，可以看到左边框和右边框的宽度，假设与上边框和下边框相同，但不是：

---

首先，您没有在小提琴中键入属性名称：strokWidth-e丢失。但这不是问题的原因，因为strokeWidth的默认值为1

缩放笔划问题是预期的行为，而您要求执行的不是。无论如何，在你检查我的代码之前，请阅读，也许还有更多

然后试着使用这段代码来满足您的需要，只有将矩形的比例保持为1:1（scaleX=scaleY）时，这段代码才能完美工作

这是：

---

可以这样做，以便您可以独立地进行缩放

在缩放事件中，检查宽度、高度和缩放因子，将高度和宽度设置为新的有效值，并重置scaleX和scaleY

这很可能会破坏其他随对象缩放的对象，因此您必须以类似的方式处理这些属性

var canvas=newfabric.canvas（“c1”）；
var el=new fabric.Rect({
原文：“左”，
原创：“顶级”，
左:5,，
前五名，
笔划：“rgb（0,0,0）”，
冲程宽度：1，
填充：'透明'，
不透明度：1，
宽度：200，
身高：200，
尺码：6
});
厄尔尼翁({
“缩放”：函数（e）{
var obj=这个，
w=obj.width*obj.scaleX，
h=obj.height*obj.scaleY，
s=对象行程宽度；
对象集({
“高度”：h，
“宽度”：w，
“scaleX”：1，
“scaleY”：1
});
}
});
canvas.add（el）；
canvas.renderAll（）；

Fabricjs现在在fabric.Rect上具有strokeUniform属性，可用于防止笔划宽度错误变换

将strokeUniform设置为false时，它将随对象缩放。如果设置为true，它将与笔划宽度的像素大小匹配

var el = new fabric.Rect({
    originX: "left",
    originY: "top",
    left: 5,
    top: 5,
    stroke: "#ccc",
    strokWidth: 1,
    fill: 'transparent',
    opacity: 1,
    width: 200,
    height: 200,
    cornerSize: 6,
    strokeUniform: true
});

---

@汤姆-如果有帮助的话，最好把它标为答案。谢谢谢谢，很抱歉这些天很忙。还有两个问题（尝试将笔划设置为10）：1。移动左上角手柄，看到右下角也在移动。2.移动任何控制柄，使宽度和/或高度为0-如果随后非常缓慢地移动控制柄，则对象会突然移动，而不是调整大小。我只想提一提。不幸的是，我没有足够的知识来改进您的解决方案。技术不错，但不能正确处理多边形。

var el = new fabric.Rect({
    originX: "left",
    originY: "top",
    left: 5,
    top: 5,
    stroke: "#ccc",
    strokWidth: 1,
    fill: 'transparent',
    opacity: 1,
    width: 200,
    height: 200,
    cornerSize: 6,
    strokeUniform: true
});