javascript - rectangulo - figuras en canvas html5

Lienzo: Rectángulos-Ajustar a la cuadrícula/Ajustar a los objetos

Question

Logré manipular Fabric.js para agregar una instantánea y escalar a la funcionalidad de la cuadrícula de la siguiente manera:

var grid = 100;
//Snap to Grid
canvas.on(''object:moving'', function (options) {
    options.target.set({
        left: Math.round(options.target.left / grid) * grid,
        top: Math.round(options.target.top / grid) * grid
    });
});
canvas.on(''object:scaling'', function (options) {
    options.target.set({
        left: Math.round(options.target.left / grid) * grid,
        top: Math.round(options.target.top / grid) * grid
    });
});

Ahora quiero agregar funcionalidad de complemento a objetos. Mi idea era verificar la intersección de dos objetos y luego bloquear de alguna manera el movimiento. Sé que no es el mejor intento, pero al menos se adapta, pero no permite mover el objeto más lejos. Y: ahora mismo no está bien implementado. Ver: http://jsfiddle.net/gcollect/y9kyq/

Tengo tres problemas:

1. El "complemento" no funciona bien, porque el atributo de objeto dejado depende del puntero de alguna manera. Replicación arrastrando objetos y viendo mis controles salir. Por ejemplo, al mover el rectángulo rojo a la posición izquierda: 62, el rectángulo no se cruza con el rectángulo azul y aún puede moverse. ¿Cómo puedo volver a cargar el valor real a la izquierda del rectángulo? Debido a mis líneas de ajuste a la cuadrícula, está a la izquierda: 100 y no a la izquierda: 62.
2. ¿Alguna idea de cómo puedo agregar una funcionalidad de complemento a objeto? ¿Y prohibir la intersección?
3. ¿Cómo puedo verificar esto para n objetos y no solo para dos?

Gracias por tus comentarios.

PD: El ejemplo de jsfiddle no muestra la escala de la funcionalidad de la grilla, porque necesitaba la manipulación de Fabric.js en línea: 11100

var distroundedforgrid = Math.round(dist/100)*100;      
      transform.newScaleX = Math.round((transform.original.scaleX * distroundedforgrid / lastDist)*10)/10;
      transform.newScaleY = Math.round((transform.original.scaleY * distroundedforgrid / lastDist)*10)/10;

      target.set(''scaleX'', transform.newScaleX);
      target.set(''scaleY'', transform.newScaleY);
    }

Answer 1

Me di cuenta de resolver el complemento a los objetos en el eje x y trabajaré en una solución para el eje y. Ver JSfiddle aquí.

Lo hice estableciendo un nuevo valor de "izquierda" para el objeto activo, cuando detecto una intersección.

        if (options.target.isContainedWithinObject(obj)||options.target.intersectsWithObject(obj)||obj.isContainedWithinObject(options.target)) {

            var distx = ((obj.left + obj.width)/2) - ((options.target.left + options.target.width)/2);
            var disty = ((obj.top + obj.height)/2) - ((options.target.top + options.target.height)/2);                  

            if (distx > 0){
                options.target.left = obj.left - options.target.width;
            } else {
                options.target.left = obj.left + obj.width;
            }

        }

Answer 2

Para aquellos que todavía están interesados ​​en la solución: la resolví aquí: https://.com/a/22649022/3207478 Ver jsfiddle: http://jsfiddle.net/gcollect/FD53A/

Trabajando con .oCoords.tl .tr .bl. and .br solved it. .oCoords.tl .tr .bl. and .br solved it.

Answer 3

Para reescalar basado en la grilla, vea este JSfiddle

function snapScaling(options) {
    var target = options.target;
    var type = canvas.getActiveObject().get(''type'');
    var corner = target.__corner;
    var w = target.getWidth();
    var h = target.getHeight();
    var snap = {   // Closest snapping points
      top: Math.round(target.top / grid) * grid,
      left: Math.round(target.left / grid) * grid,
      bottom: Math.round((target.top + h) / grid) * grid,
      right: Math.round((target.left + w) / grid) * grid,
    };
    snap.height = snap.top - snap.bottom;
    if(snap.height < 0) {
      snap.height *= - 1;
    }
    snap.width = snap.left - snap.right;
    if(snap.width < 0) {
      snap.width *= - 1;
    }
    switch (corner) {
      case ''mt'':
      case ''mb'':
          target.top = snap.top;
          target.height = snap.height;
          target.scaleY = 1;
        break;
      case ''ml'':
      case ''mr'':
        target.left = snap.left;
        target.width = snap.width;
        target.scaleX = 1;
        break;
      case ''tl'':
      case ''bl'':
      case ''tr'':
      case ''br'':
        target.top = snap.top;
        target.left = snap.left;

        target.height = snap.height;
        target.width = snap.width;

        target.scaleY = 1;
        target.scaleX = 1;
    }

    if(type == ''ellipse'') {
      target.rx = (target.width / 2);
      target.ry = (target.height / 2);
    }
  }