在 fabricJs 中更改 "hasControls" 的边框大小

Question

我想进一步自定义 fabricJs hasControls 边框大小的外观。它目前绘制在 canvas 上，边框为 1px，但 3px 边框是我想要完成的。

fabricJS 文档没有任何自定义属性来更改此边框大小。

Answer 1

hasControls 属性设置为 true 的 fabricjs 对象也有一个 borderScaleFactor 和一个 borderColor 属性。

color.addEventListener('change', function(){
    canvas.getActiveObject().borderColor = this.value;
    canvas.renderAll();
  });
scale.addEventListener('change', function(){
    canvas.getActiveObject().borderScaleFactor = this.value;
    canvas.renderAll();
  });


var canvas = new fabric.Canvas('canvas');
fabric.Image.fromURL('https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png', function(img) {
  img.scale(0.4).set({
    left: 150,
    top: 150,
    angle: -15
  });
  img.borderColor = color.value;
  canvas.add(img).setActiveObject(img);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.js"></script>
<input id="color" type="color" value="#FF00FF"/>
<input id="scale" type="range" max="2" min=".01" step=".01"/>
<canvas id="canvas" width="800" height="600"></canvas>

在 fabricJs 中更改 "hasControls" 的边框大小

Change border size of the "hasControls" in fabricJs

javascript

canvas

html5-canvas

fabricjs