Fabric.js中strokeWidth属性单位及调整对应的实际像素增量问题

问题解答 #

1. strokeWidth的单位 #

fabric.js中所有尺寸类属性默认单位都是像素（px），你设置strokeWidth: 5对应的就是5像素的描边宽度，和em、%等相对单位无关，这是因为canvas绘图上下文本身基于像素坐标系工作，上层封装的fabric.js默认也遵循这个单位规则。

2. 描边宽度增量 #

你当前使用的range控件设置了step="1"，且代码中通过parseInt获取输入值，所以每调整一次strokeWidth，实际描边宽度的像素增量就是1px。

补充说明：你的代码中给图形设置了strokeUniform: true，该配置会保证就算你后续缩放图形，描边宽度也不会跟随图形缩放比例变化，始终保持你设置的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>

示例图 #

内容的提问来源于stack exchange，提问作者Ameet deadpool