Question

我有一条线的一端在固定点，可以由用户旋转或拉伸。

jsfiddle here

似乎在fabricJS中选择旋转线/对象的唯一方法是中间的小选择框。此外，线很窄，因此很难选择。通常，必须跨行拖动一个矩形选择框以将其选中，然后抓住未标记的旋转框。

我想简化为：单击直线上的任意位置并拖动以旋转。

想法？

thx。

代码段：

var canvas = new fabric.Canvas("c", {stateful: true});


var line1 = new fabric.Line([ 100, 200, 330, 200 ], {
      fill: 'red',
      stroke: 'red',
      strokeWidth: 3,
      selectable: true,
      evented: false,
      minScaleLimit: 0.25,
      lockRotation: false,
      centeredRotation: false,
      centeredScaling: false,

      originX: "left",    // origin of rotation/transformation.      
      originY: "bottom",    // origin of rotation/transformation.

      lockMovementX: true,
      lockMovementY: true,
      lockScalingFlip: true,
      lockScalingX: false,
      lockScalingY: false,
      lockSkewingX: false,
      lockSkewingY: false,
      lockUniScaling: true
    });

Answer 1

这是您需要做的一种方法。

这个想法是，在每个scale事件上，我们将使用结构的内部fabric.canvas._rotateObject()旋转该行，并为其提供当前指针的位置。然后，立即调整线的长度以匹配比例，并将线的比例重置为1。

就可以了，但是尽管您的示例相对容易做到（直线是水平的），但如果要初始化对角线，则变得更加棘手。想象一条以[0, 0, 100, 100]作为坐标的线。这将渲染一个矩形的100x100边界框。您可以旋转线条，但是显然不需要大的边框。

因此，我们需要初始化该线，就像将其旋转回水平位置一样，然后设置它应该具有的角度。为此，我们扩展内置的fabric.Line类，并修改构造函数以进行计算。而且，由于我们已经有了新的类，因此我们还将在其中添加scale处理程序和默认选项。构造函数签名保持不变-new fabric.RotatingLine([x1, y1, x2, y2], options)，其中x1, y1-定点，x2, y2-可拖动笔尖。

最后，我们正在更改某些属性。例如。 evented: false是您无法选择点击行的原因。

下面是带有更多注释的代码段，以防万一。

const canvas = new fabric.Canvas("c", {stateful: true})

fabric.RotatingLine = fabric.util.createClass(fabric.Line, {
  minLength: 50, // we need to set this thing in px now
  
  initialize: function (points, options) {
    const a = new fabric.Point(points[0], points[1])
    const b = new fabric.Point(points[2], points[3])
    // find this line's vector
    const vectorB = b.subtract(a)
    // find angle between line's vector and x axis
    let angleRad = Math.atan2(vectorB.y, vectorB.x)
    if (angleRad < 0) {
      angleRad = 2 * Math.PI + angleRad
    }
    const angleDeg = fabric.util.radiansToDegrees(angleRad)
    // find initial horizontal position by rotating the tip back
    const c = fabric.util.rotatePoint(b.clone(), a, -angleRad)
    options = options || {}
    // finally, initialize using transform points to make a horizontal line
    this.callSuper('initialize', [a.x, a.y, c.x, c.y], {
      noScaleCache: false, // false to force cache update while scaling (doesn't redraw parts of line otherwise)
      selectable: true,
      evented: true, // true because you want to select line on click
      //minScaleLimit: 0.25, // has no effect now because we're resetting scale on each scale event
      lockRotation: false,
      hasRotatingPoint: false, // to disable rotation control
      centeredRotation: false,
      centeredScaling: false,
      
      originX: "left",    // origin of rotation/transformation.      
      originY: "bottom",    // origin of rotation/transformation.
      
      lockMovementX: true,
      lockMovementY: true,
      lockScalingFlip: true,
      lockScalingX: false,
      lockScalingY: false,
      lockSkewingX: false,
      lockSkewingY: false,
      lockUniScaling: true,
      ...options,
      angle: angleDeg // note that we use the calculated angle no matter what
    })
    
    this.setControlsVisibility({
        tr: false,
        tl: false,
        bl: false,
        mt: false, // middle top disable
        mb: false, // midle bottom
        ml: false, // middle left
        mr: false, // I think you get it
    })
    
    this.on('scaling', function (e) {
      // rotate to the pointer's x,y
      this.canvas._rotateObject(e.pointer.x, e.pointer.y)
      // while _rotateObject() tries to keep left/top at initial value,
      // it sometimes fails because of rounding errors (?)
      // so we need to do it manually again
      this.set({left: this.x1, top: this.y1})
      // calculate new length before resetting scale
      const xOffset = (this.x2 - this.x1) * this.scaleX
      const newLength = Math.max(this.minLength, xOffset)
      // reset scaleX/scaleY and set new x coord for the tip point
      this.set({
        scaleX: 1,
        scaleY: 1,
        x2: this.x1 + newLength
      })
    })
  }
})


const line1 = new fabric.RotatingLine([ 200, 200, 330, 200 ], {
  fill: 'red',
  stroke: 'red',
  strokeWidth: 3,
});

const line2 = new fabric.RotatingLine([ 200, 200, 100, 100 ], {
  fill: 'blue',
  stroke: 'blue',
  strokeWidth: 3,
});

canvas.add(line1, line2)

// Disables group selection.
canvas.on('selection:created', (e) => {
  if(e.target.type === 'activeSelection') {
    canvas.discardActiveObject();
  } else {
    //do nothing
  }
})

// Keeps objects inside canvas. undos move/rotate/scale out of canvas.
canvas.on('object:modified', function (options) {
    let obj = options.target;
    let boundingRect = obj.getBoundingRect(true);
    if (boundingRect.left < 0
        || boundingRect.top < 0
        || boundingRect.left + boundingRect.width > canvas.getWidth()
        || boundingRect.top + boundingRect.height > canvas.getHeight()) {
        obj.top = obj._stateProperties.top;
        obj.left = obj._stateProperties.left;
        obj.angle = obj._stateProperties.angle;
        obj.scaleX = obj._stateProperties.scaleX;
        obj.scaleY = obj._stateProperties.scaleY;
        obj.setCoords();
        obj.saveState();
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.min.js"></script>
<canvas id='c' width="500" height="400"></canvas>

如何通过单击任意点以选择/拖动来旋转fabricjs中的线？

1 个答案: