Fabrcjs – Why does he not click on the shape after changing the left or top value of the shape

This is the fifth day of my participation in Gwen Challenge

Code word is not easy, your praise is my motivation to continue to update the creation.

Fabric is a powerful and simple JS Canvas library that allows you to create, fill, and gradient shapes on the Canvas. Combination graphics (including combination graphics, graphics text, pictures, etc.) and a series of functions. To put it simply, we can implement the complex Canvas function in a simple way by using Fabric.

I recently had a small problem drawing graphics using FabricJS. I hope I can help others.

Status analysis:

When drawing the scroll bar through canvas, the slider needs to be frequently rolled, so its left value needs to be updated. However, when the view part is frequently dragged, it is found that: Although the slider is in the correct position, it cannot be dragged to move it. Debug finds that the actual position of the slider is not in the displayed position because the coordinates of its points are not calculated correctly.

Solution:

Object.setcoords () is called to do the following:

object.set('left'.123), object. SetTop (456), and so on. object.set('width'.100), the object set ('height'.100)
object.set('scaleX'.1.5), the object set ('scaleY'.1.5)
object.set('skewX'.20), the object set ('skewY'.20)
object.set('padding'.10)
object.set('angle'.45)
object.set('strokeWidth'.12Center (), object.centerh (), Object.centerv () canvas.zoomtopoint (...Copy the code

What does object.setcoords () do

SetCoords recalculates the coordinates of each vertex of the graph and updates the position in the canvas by updating the coordinates and absolute position

/**
 * Calculates and returns the .coords of an object.
 * @return {Object} Object with tl, tr, br, bl ....
 * @chainable* /
calcCoords: function(absolute) {
  var rotateMatrix = this._calcRotateMatrix(),
      translateMatrix = this._calcTranslateMatrix(),
      startMatrix = multiplyMatrices(translateMatrix, rotateMatrix),
      vpt = this.getViewportTransform(),
      finalMatrix = absolute ? startMatrix : multiplyMatrices(vpt, startMatrix),
      dim = this._getTransformedDimensions(),
      w = dim.x / 2, h = dim.y / 2,
      tl = transformPoint({ x: -w, y: -h }, finalMatrix),
      tr = transformPoint({ x: w, y: -h }, finalMatrix),
      bl = transformPoint({ x: -w, y: h }, finalMatrix),
      br = transformPoint({ x: w, y: h }, finalMatrix);
  if(! absolute) {var padding = this.padding, angle = degreesToRadians(this.angle),
        cos = fabric.util.cos(angle), sin = fabric.util.sin(angle),
        cosP = cos * padding, sinP = sin * padding, cosPSinP = cosP + sinP,
        cosPMinusSinP = cosP - sinP;
    if (padding) {
      tl.x -= cosPMinusSinP;
      tl.y -= cosPSinP;
      tr.x += cosPSinP;
      tr.y -= cosPMinusSinP;
      bl.x -= cosPSinP;
      bl.y += cosPMinusSinP;
      br.x += cosPMinusSinP;
      br.y += cosPSinP;
    }
    var ml  = new fabric.Point((tl.x + bl.x) / 2, (tl.y + bl.y) / 2),
        mt  = new fabric.Point((tr.x + tl.x) / 2, (tr.y + tl.y) / 2),
        mr  = new fabric.Point((br.x + tr.x) / 2, (br.y + tr.y) / 2),
        mb  = new fabric.Point((br.x + bl.x) / 2, (br.y + bl.y) / 2),
        mtr = new fabric.Point(mt.x + sin * this.rotatingPointOffset, mt.y - cos * this.rotatingPointOffset);
  }
  // if (! absolute) {
  // var canvas = this.canvas;
  // setTimeout(function() {
  // canvas.contextTop.clearRect(0, 0, 700, 700);
  // canvas.contextTop.fillStyle = 'green';
  // canvas.contextTop.fillRect(mb.x, mb.y, 3, 3);
  // canvas.contextTop.fillRect(bl.x, bl.y, 3, 3);
  // canvas.contextTop.fillRect(br.x, br.y, 3, 3);
  // canvas.contextTop.fillRect(tl.x, tl.y, 3, 3);
  // canvas.contextTop.fillRect(tr.x, tr.y, 3, 3);
  // canvas.contextTop.fillRect(ml.x, ml.y, 3, 3);
  // canvas.contextTop.fillRect(mr.x, mr.y, 3, 3);
  // canvas.contextTop.fillRect(mt.x, mt.y, 3, 3);
  // canvas.contextTop.fillRect(mtr.x, mtr.y, 3, 3);
  / /}, 50);
  // }
  var coords = {
    // corners
    tl: tl, tr: tr, br: br, bl: bl,
  };
  if(! absolute) {// middle
    coords.ml = ml;
    coords.mt = mt;
    coords.mr = mr;
    coords.mb = mb;
    // rotating point
    coords.mtr = mtr;
  }
  return coords;
}

/**
 * Sets corner position coordinates based on current angle, width and height.
 * See {@link https://github.com/kangax/fabric.js/wiki/When-to-call-setCoords|When-to-call-setCoords}
 * @param {Boolean} [ignoreZoom] set oCoords with or without the viewport transform.
 * @param {Boolean} [skipAbsolute] skip calculation of aCoords, useful in setViewportTransform
 * @return {fabric.Object} thisArg
 * @chainable* /
setCoords: function(ignoreZoom, skipAbsolute) {
  this.oCoords = this.calcCoords(ignoreZoom);
  if(! skipAbsolute) {this.aCoords = this.calcCoords(true);
  }
  // set coordinates of the draggable boxes in the corners used to scale/rotate the image
  ignoreZoom || (this._setCornerCoords && this._setCornerCoords());
  return this;
}
Copy the code