px/em fabricjs 中的 StrokeWidth 值

Posted 2023-03-25

【中文标题】px/em fabricjs 中的 StrokeWidth 值

【英文标题】：StrokeWidth value in px/em fabricjs

【发布时间】：2021-09-04 10:25:45

【问题描述】：

我正在向画布添加一个矩形/圆形，并使用范围类型输入更改 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"   style="border:1px solid #000000;"></canvas>

【问题讨论】：

@AlonEitan ，我已经更新了问题。

我已经阅读了你的问题 3 次，但我仍然不清楚你在问什么。也许尝试将您提供的代码改写和更新为有效的 sn-p？

@melchiar ，如果我要增加 strokewidth(1-10) 值。边框宽度正在增加。我想知道以 px/em/% 为单位的边框宽度

笔画的像素宽度会根据缩放、屏幕分辨率和导出大小而变化，而不仅仅是笔画宽度。类似地，em 是一个与字体大小相关的单位，您的笔画没有被用于。或许您可以解释一下为什么需要这些单位？

k，因此您需要 CSS 像素来计算对象的屏幕尺寸。我会发布一个答案。

【参考方案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 以获得可见的笔触宽度。

【讨论】：

一个问题@melchiar，obj.scaleX 和 ScaleY 是什么？我对此进行了研究，但没有得到任何完美的答案。以及为什么我们在这里使用

当您使用控件调整对象大小时，它会更改比例值。我们在这里使用它是因为每个轴的宽度是通过将 strokeWidth 乘以该轴的比例因子来确定的。

【参考方案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"   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>
    

【讨论】：

感谢回复，但我想知道当我们增加笔画宽度时，边框的宽度以 px/em/% 为单位增加。