px/em fabricjs 中的 StrokeWidth 值

Question

我正在向画布添加一个矩形/圆形，并使用范围类型输入更改 strokeWidth。 如果我们有 strokeWidth:5 和 strokeWidth(1-10) 的范围，那么在 px/em/% 中的 strokeWidth 值是多少。 实际上，我想知道每当我们尝试增加 strokeWidth 时，实际宽度以 px 增加多少。

查看代码示例：

var canvas = new fabric.Canvas('canvas1');

$('.add_shape').click(function() {
  var cur_value = $(this).attr('data-rel');
  if (cur_value != '') {
    switch (cur_value) {
      case 'rectangle':
        var rect = new fabric.Rect({
          left: 50,
          top: 50,
          fill: '#aaa',
          width: 50,
          height: 50,
          opacity: 1,
          stroke: '#000',
          strokeWidth: 1,
          noScaleCache: false,
          strokeUniform: true,
        });
        canvas.add(rect);
        canvas.setActiveObject(rect);
        break;
      case 'circle':
        var circle = new fabric.Circle({
          left: 50,
          top: 50,
          fill: '#aaa',
          radius: 50,
          opacity: 1,
          stroke: '#000',
          strokeWidth: 1,
          noScaleCache: false,
          strokeUniform: true
        });
        canvas.add(circle);
        canvas.setActiveObject(circle);
        break;
    }
  }
});

/* Control the border  */
$('#control_border').change(function() {
  var cur_value = parseInt($(this).val());
  var activeObj = canvas.getActiveObject();
  if (activeObj == undefined) {
    alert('Please select the Object');
    return false;
  }
  activeObj.set({
    strokeWidth: cur_value
  });
  canvas.renderAll();
});
button {
  max-resolution: 10px;
  height: 30px;
}

div {
  margin: 10px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.7.0/fabric.min.js"></script>

<div>
  <button class="add_shape" data-rel="circle">Add Circle</button>
  <button class="add_shape" data-rel="rectangle">Add Rectangle</button>
  <label class="control-label">Border</label>
  <input id="control_border" type="range" min="0" max="10" step="1" value="0" />
</div>

<canvas id="canvas1" width="600" height="300" style="border:1px solid #000000;"></canvas>

Answer 1

如果我正确理解了您的问题，我相信您想要的是计算对象和笔划的屏幕 CSS 像素大小。这会根据画布的缩放级别而变化，因此需要在计算中加以考虑。

这将为您提供以 CSS 像素（包括笔划）为单位的总对象尺寸：

var zoom =  canvas.getZoom();
var totalWidth = obj.getScaledWidth() * zoom;
var totalHeight = obj.getScaledHeight() * zoom;

这将为您提供以 CSS 像素为单位的笔触大小：

var zoom =  canvas.getZoom();
var strokeX = obj.strokeWidth * obj.scaleX * zoom;
var strokeY = obj.strokeWidth * obj.scaleY * zoom;

如果您使用strokeUniform 属性，则笔触大小不会受到对象比例的影响，因此您可以这样做。

var zoom =  canvas.getZoom();
var strokeSize = obj.strokeWidth * zoom;

此外，如果您的对象使用 paintFirst 的值 stroke，则笔触宽度的一半将被填充覆盖，因此您需要将结果乘以 0.5 以获得可见的笔触宽度。

Answer 2

只需添加两行：- 1.<div id="strokeValue"></div>在html中 2.document.getElementById('strokeValue').innerHTML=cur_value; /* Control the border */ 在 Javascript 中

这里是完整的代码：-

<style>

button {
  max-resolution: 10px;
  height: 30px;
}

div {
  margin: 10px
}
</style>

<div>
  <button class="add_shape" data-rel="circle">Add Circle</button>
  <button class="add_shape" data-rel="rectangle">Add Rectangle</button>
  <label class="control-label">Border</label>
  <input id="control_border" type="range" min="0" max="10" step="1" value="0" />
</div>

<div id="strokeValue"></div>

<canvas id="canvas1" width="600" height="300" style="border:1px solid #000000;"></canvas>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.7.0/fabric.min.js"></script>

<script>
    var canvas = new fabric.Canvas('canvas1');
    
    $('.add_shape').click(function() {
      var cur_value = $(this).attr('data-rel');
      if (cur_value != '') {
        switch (cur_value) {
          case 'rectangle':
            var rect = new fabric.Rect({
              left: 50,
              top: 50,
              fill: '#aaa',
              width: 50,
              height: 50,
              opacity: 1,
              stroke: '#000',
              strokeWidth: 1,
              noScaleCache: false,
              strokeUniform: true,
            });
            canvas.add(rect);
            canvas.setActiveObject(rect);
            break;
          case 'circle':
            var circle = new fabric.Circle({
              left: 50,
              top: 50,
              fill: '#aaa',
              radius: 50,
              opacity: 1,
              stroke: '#000',
              strokeWidth: 1,
              noScaleCache: false,
              strokeUniform: true
            });
            canvas.add(circle);
            canvas.setActiveObject(circle);
            break;
        }
      }
    });
    
    /* Control the border  */
    $('#control_border').change(function() {
      var cur_value = parseInt($(this).val());
      var activeObj = canvas.getActiveObject();
      document.getElementById('strokeValue').innerHTML=cur_value;
      if (activeObj == undefined) {
        alert('Please select the Object');
        return false;
      }
      activeObj.set({
        strokeWidth: cur_value
      });
      canvas.renderAll();
    });
    </script>