时间戳

首页 > 解决方案 > px/em fabricjs 中的 StrokeWidth 值

javascript - px/em fabricjs 中的 StrokeWidth 值

问题描述

我正在向画布添加一个矩形/圆形，并使用范围类型输入更改 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>

在此处输入图像描述

在此处输入图像描述

标签： javascripthtmlvue.jsfabricjs

解决方案

如果我正确理解了您的问题，我相信您想要的是计算对象和笔划的屏幕 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 以获得可见的笔划宽度。

推荐阅读