javascript - online - Actualice los puntos de ruta de fabric.js dinámicamente

fabric js online

Question

Estoy tratando de agregar puntos a un objeto ruta de forma dinámica. Cuando lo hago, la ruta se representa correctamente, pero el rectángulo delimitador nunca se actualiza, por lo que es casi imposible para un usuario seleccionar y mover la ruta en el lienzo.

Como puede ver en el siguiente código, la ruta se crea inicialmente con un solo punto, luego agrego dinámicamente un segundo punto además de un punto de control. Después de hacer esto, el rectángulo delimitador nunca se actualiza:

var canvas = new fabric.Canvas(''c'');
canvas.backgroundColor = ''#f5f5f5'';
var path = new fabric.Path(''M 0 20'',{
    left: 100,
    top: 100,
    stroke: ''black'',
    fill: ''''
});

canvas.add(path);

var commandArray = [];
commandArray[0] = ''Q'';
commandArray[1] = 50;
commandArray[2] = 100;
commandArray[3] = 100;
commandArray[4] = 20;

path.path[1] = commandArray;

canvas.renderAll();

También intenté llamar a path.setCoords() , pero eso no hizo ninguna diferencia. ¿Cómo puedo obtener el rectángulo delimitador para actualizar sus dimensiones después de agregar puntos a una ruta?

Aquí hay un violín: http://jsfiddle.net/flyingL123/17ueLva2/2/

Answer 1

Por favor, fabricjs no admite agregar puntos dinámicamente a partir de ahora. Para hacerlo funcionar, puede agregar puntos como lo hace y luego usar el método interno path._parseDimensions() cada vez que agrega puntos y desea actualizar la dimensión del cuadro delimitador.

var dims = path._parseDimensions();
path.setWidth(dims.width);
path.setHeight(dims.height);
path.pathOffset.x = path.width/2;
path.pathOffset.y = path.height/2;
path.setCoords();

Mira este violín actualizado que tiene el código necesario para resolver tu problema. Espero que funcione para cada situación.

http://jsfiddle.net/17ueLva2/6/

Answer 2

Terminó siendo más complicado. Si se agrega un punto a la ruta que da como resultado _parseDimensions devuelve un valor de left que es negativo, la ruta saltará alrededor de la pantalla. Para mi caso de uso, necesito que la ruta permanezca en su lugar mientras se agregan y manipulan los puntos. Este violín muestra mi solución de trabajo:

http://jsfiddle.net/flyingL123/8763bx2q/8/

Si lo ejecuta con una consola JS abierta, verá la secuencia de comandos haciendo una pausa después de agregar cada punto adicional o manipular el punto actual. Cuando esto suceda, verás que la ruta no se mueve a lo largo del lienzo, que es el comportamiento deseado. Después de completar todos los puntos de ruptura, verá que la curva se centra dentro de su casilla de selección.

Si hay una manera más fácil de lograr este comportamiento, me encantaría saberlo.

Aquí está la función que estoy usando para establecer las dimensiones por si el vínculo del violín desaparece:

function updateDims() {
    var dims = path._parseDimensions(),
        prevDims = path.prevDims || {},
        leftDiff = dims.left - (prevDims.left || 0),
        topDiff = dims.top - (prevDims.top || 0);

    path.setWidth(dims.width);
    path.setHeight(dims.height);

    if (dims.left < 0) {
        path.pathOffset.x = path.width/2 + dims.left;
        path.left = path.left + leftDiff;
    } else {
        path.pathOffset.x = path.width/2;
    }

    if (dims.top < 0) {
        path.pathOffset.y = path.height/2 + dims.top;
        path.top = path.top + topDiff;
    } else {
         path.pathOffset.y = path.height/2;   
    }

    path.prevDims = dims;
    path.setCoords();
}