具有笔划的矩形，缩放时笔划线被误转换 [英] Rect with stroke, the stroke line is mis-transformed when scaled

问题描述

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

  var canvas = new fabric.Canvas（c1）; 
 
 var el = new fabric.Rect（{
 originX：left，
 originY：top，
 left：5，
 top ：5，
笔画：＃ccc，
 strokWidth：1，
填充：'透明'，
不透明度：1，
宽度：200，
身高：200，
 cornerSize：6 
}）; 
 
 canvas.add（el）; 
 canvas.renderAll（）; 
  

参见此处的示例和这里可能还有一些这里。

然后尝试使用此代码来满足您的需求，这只有在你保持矩形的比例为1：1（scaleX = scaleY）。

这是 jsfiddle ：

  var canvas = new fabric.Canvas（c1 ）; 
 
 var el = new fabric.Rect（{
 originX：left，
 originY：top，
 left：5，
 top ：5，
笔画：rgb（0,0,0），
 strokeWidth：1，
填充：'透明'，
不透明度：1，
宽度：200，
身高：200，
 cornerSize：6 
}）; 
 
 el.myCustomOptionKeepStrokeWidth = 1; 
 canvas.on（{
'对象：缩放'：函数（e）{
 var obj = e.target; 
 if（obj.myCustomOptionKeepStrokeWidth）{
 var newStrokeWidth = obj.myCustomOptionKeepStrokeWidth /（（obj.scaleX + obj.scaleY）/ 2）; 
 obj.set（'strokeWidth'，newStrokeWidth）; 
} 
} 
 }）; 
 
 canvas.add（el）; 
 canvas.renderAll（）; 
  

I have got a lot of helps from this site and contributors here, thanks. Now I have a question about the Rectangle in Fabric.js with stroke, as I used it as kind of placeholder for images and text, when I scaled it, the border line width is scaled too, I think it's kind a problem as I want to keep the border width not changed.

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 ();

See example here http://jsfiddle.net/9yb46/, try scale it horizontally. And a image is here too, and see the left border and right border width, supposed as same as top and bottom border, but not:

解决方案

First of all you have miss-typed the name of the property in your fiddle : strokWidth - e is missing. But this is not the cause of the problem since the default value for the strokeWidth is 1.

The scaled stroke issue is the expected behavior and what you ask to do is not. Anyway, before you check my code, read here and here and maybe some more here.

Then try this code to help with your needs, this will work perfectly only if you keep the scale ratio of your rectangle as 1:1 (scaleX = scaleY).

This is jsfiddle:

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

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

el.myCustomOptionKeepStrokeWidth = 1;
canvas.on({
    'object:scaling': function(e) {
        var obj = e.target;
        if(obj.myCustomOptionKeepStrokeWidth){
            var newStrokeWidth = obj.myCustomOptionKeepStrokeWidth / ((obj.scaleX + obj.scaleY) / 2);
            obj.set('strokeWidth',newStrokeWidth);
        }
    }
});

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

这篇关于具有笔划的矩形，缩放时笔划线被误转换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！