我想知道有没有办法更改边界框图标,我在fabric.js中读取源代码,它生成边框的方框,但我想将其更改为圆形或更改为我的自定义外观。 你能告诉我吗?

===============>>#1 票数:9

自定义控件的最快方法是编写自己的_drawControl函数并使其与fabricjs标准兼容以覆盖它。 请记住,对于每个渲染,此函数被调用9次,因此请尽量使用代码和绘图。 此外,如果您修改上下文(ctx),请记住使用.save.restore不要弄乱渲染管道。

FabricJs将调用topleft的函数准备一个矩形,因此角落将位于top + size/2left + size/2 ,其中size是this.cornerSize

function newControls(control, ctx, methodName, left, top) {
  if (!this.isControlVisible(control)) {
        return;
      }
      var size = this.cornerSize;
      isVML() || this.transparentCorners || ctx.clearRect(left, top, size, size);
      ctx.arc(left + size/2, top + size/2, size/2, 0, 2 * Math.PI, false);
      ctx.stroke();
}

fabric.Object.prototype._drawControl = newControls;

 function newControls(control, ctx, methodName, left, top) { if (!this.isControlVisible(control)) { return; } var size = this.cornerSize; this.transparentCorners || ctx.clearRect(left, top, size, size); ctx.beginPath(); ctx.arc(left + size/2, top + size/2, size/2, 0, 2 * Math.PI, false); ctx.stroke(); } fabric.Object.prototype._drawControl = newControls; fabric.Object.prototype.cornerSize = 15; var canvas = new fabric.Canvas('c'); canvas.add(new fabric.Rect({width:100, height:100, top:50, left:50})); canvas.setActiveObject(canvas.getObjects()[0]); 
 <script type ="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script> <canvas id="c" width="400" height="400" style="border:1px solid #ccc"></canvas> 

===============>>#2 票数:4

检查以下示例:

http://fabricjs.com/customization/

例2:

var canvas = new fabric.Canvas('c3');
  canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 }));

  canvas.item(0).set({
    borderColor: 'red',
    cornerColor: 'green',
    cornerSize: 6,
    transparentCorners: false
  });
  canvas.setActiveObject(canvas.item(0));

  ask by Lindy translate from so

未解决问题?本站智能推荐: