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);
}
}