在织物js选择控件中添加小线 [英] Add little lines in fabric js selection controls

问题描述

当您将一个canvas元素设置为 hasControls 时，用户单击该元素时会显示一些控件。这些控件是小画布广场。我想覆盖在方形控件上的小线，以给予进一步抛光的外观和感觉。

解决方案

覆盖面料Object _drawControl函数：

 < script src =http://cdnjs.cloudflare.com/ajax/libs /fabric.js/1.5.0/fabric.min.js\"> ;</script> ;<script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery。 min.js>< / script>< / script>< canvas id ='canvas'width =500height =400style =border：＃000 1px solid;& c $ c> 
 

这当然只是一个例子。 p>

When you have a canvas element set to hasControls little controls render when the user clicks the element. These controls are little canvas squares. I would like to overlay little lines on the square controls to give a further polish to look and feel.

解决方案

override fabric Object _drawControl function:

   fabric.Object.prototype._drawControl = function(control, ctx, methodName, left, top) {
      if (!this.isControlVisible(control)) {
        return;
      }
      var size = this.cornerSize;
      this.transparentCorners || ctx.clearRect(left, top, size, size);
      ctx[methodName](left, top, size, size);
      /* added code */
      ctx.save();
      var space = 2;
      ctx.beginPath();
      ctx.moveTo(left + space, top + space);
      ctx.lineTo(left + size - space, top + space);
      ctx.stroke();
      ctx.restore();
    };
canvas = new fabric.Canvas('canvas');
canvas.add(new fabric.Rect({width: 50, left: 50, top: 50, height: 50}));

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id='canvas' width="500" height="400" style="border:#000 1px solid;"></canvas>

This is of course just an example of how you can achieve it.

这篇关于在织物js选择控件中添加小线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！