Search code examples
javascripthtmlvue.jsfabricjs

StrokeWidth value in px/em fabricjs

I am adding a rectangle/circle to the canvas and changing the strokeWidth with a range type input. What is the value of strokeWidth in px/em/%, if we have strokeWidth:5 and range of strokeWidth(1-10). Actually I wanted to know how much the actual width increases in px, whenever we try to increase the strokeWidth.

Check the code for example:

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>

enter image description here

enter image description here

Solution

  • If I'm understanding your question correctly, I believe what you're wanting is to calculate the on screen CSS pixel size of your object and stroke. This changes according to the canvas's zoom level so that needs to be accounted for in the calculation.

    This will give you the total object dimensions in CSS pixels (including stroke):

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

    This will give you just the stroke size in CSS pixels:

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

    If you're using the strokeUniform property, the stroke size won't be affected by the object's scale, so you can just do this.

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

    Also, if your object uses a paintFirst value of stroke then half of the stroke width will be covered by the fill, so you'll need to multiply your result by 0.5 to get the visible stroke width.