px/em fabricjs 中的 StrokeWidth 值

Question

我正在向 canvas 添加 rectangle/circle 并使用范围类型输入更改 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

只需添加两行：- 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>

Answer 2

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

这将为您提供以 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;

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

px/em fabricjs 中的 StrokeWidth 值

StrokeWidth value in px/em fabricjs

html

javascript

fabricjs

vue.js