Fabric JS _updateObjectsCoords alternativa? (Problema de migración a 1.7.9)

7 minutos de lectura

avatar de usuario
HOY

Actualizar: JSFiddle: https://jsfiddle.net/Qanary/915fg6ka/

estoy tratando de hacer mi curveText función de trabajo (ver la parte inferior de esta publicación). Normalmente funciona con fabric.js 1.2.0 sin embargo, cuando actualicé a fabric.js 1.7.9, la función de curva ubica el texto en posiciones incorrectas cuando está debajo dos acciones ejecutado secuencialmente.

ACCIONES : – NÚMERO 1

-Se cambia la escala del grupo de texto (me refiero a arrastrar los puntos de las esquinas con el mouse para cambiar el tamaño).

-setText llamado

tela js 1.2.0:

ingrese la descripción de la imagen aquí

tela js 1.7.9

ingrese la descripción de la imagen aquí

Lo depuré y la razón de eso es _updateObjectsCoords en fabricjs porque cuando lo eliminé del código y las 2 acciones que enumeré arriba funcionan bien.

PROBLEMA 2:
Pero esta vez me he enfrentado al siguiente problema, que es que los elementos del grupo no están ubicados correctamente al agregar el texto al lienzo por primera vez.

con _updateObjectsCoords

ingrese la descripción de la imagen aquí

sin que _updateObjectsCoords

ingrese la descripción de la imagen aquí

Aquí mi función:

var CurvedText = (function() {

    function CurvedText( canvas, options ){
        this.opts = options || {};
        for ( var prop in CurvedText.defaults ) {
            if (prop in this.opts) { continue; }
            this.opts[prop] = CurvedText.defaults[prop];
        }

        this.canvas = canvas;
        this.group = new fabric.Group([], {selectable: this.opts.selectable,radiusVal:this.opts.radius,spacingVal:this.opts.spacing,textFliping:this.opts.reverse});
        this.canvas.add( this.group ) ;
        this.canvas.centerObject( this.group );
        this.setText( this.opts.text );
        this.canvas.setActiveObject( this.group );
        this.canvas.getActiveObject().setCoords();

    }

    CurvedText.prototype.setObj = function(obj) 
    {
        this.group=obj;
    };

    CurvedText.prototype.setText = function( newText ) {

        this.opts.top=this.group.top;
        this.opts.left=this.group.left;

        while ( newText.length !== 0 && this.group.size() > newText.length ) {
            this.group.remove( this.group.item( this.group.size()-1 ) );
        }

        for ( var i=0; i<newText.length; i++ ){
            if ( this.group.item(i) === undefined ){
                var letter = new fabric.Text(newText[i], {
                    selectable: true
                });
                this.group.add( letter );
            }
            else{
                this.group.item(i).text = newText[i];
            }
        }
        this.opts.text = newText;
        this._setFontStyles();
        this._render();
    };

    CurvedText.prototype._setFontStyles = function() {
        for ( var i=0; i<this.group.size(); i++ ){
            if( this.opts.textStyleName )
            {
                if( this.opts.textStyleName === 'fontFamily' )
                {
                    this.group.item(i).setFontFamily( this.opts.fontFamily );
                }
                if( this.opts.textStyleName === 'fontColor' )
                {
                    this.group.item(i).setFill( this.opts.fontColor );
                }
            }
            else
            {
                this.group.item(i).setFontFamily( this.opts.fontFamily );
                this.group.item(i).setFill( this.opts.fontColor );
            }
            this.group.item(i).setFontSize( this.opts.fontSize );
            this.group.item(i).fontWeight = this.opts.fontWeight ;
        }
    };

    CurvedText.prototype._render = function() {
        var curAngle=0,angleRadians=0, align=0;

        // Object may have been moved with drag&drop
        if ( this.group.hasMoved() ) {
            this.opts.top = this.group.top;
            this.opts.left = this.group.left;
        }
        this.opts.angle = this.group.getAngle();
        this.opts.scaleX = this.group.scaleX;
        this.opts.scaleY = this.group.scaleY;
        this.opts.radius = this.group.radiusVal;
        this.opts.spacing = this.group.spacingVal;
        this.opts.reverse = this.group.textFliping;


        // Text align
        if ( this.opts.align === 'center' ) {
            align = ( this.opts.spacing / 2) * ( this.group.size() - 1) ;
        } else if ( this.opts.align === 'right' ) {
            align = ( this.opts.spacing ) * ( this.group.size() - 1) ;
        }

        for ( var i=0; i<this.group.size(); i++) {
            // Find coords of each letters (radians : angle*(Math.PI / 180)
            if ( this.opts.reverse ) {
                curAngle = (-i * parseInt( this.opts.spacing, 10 )) + align;
                angleRadians = curAngle * (Math.PI / 180);
                this.group.item(i).setAngle( curAngle );
                this.group.item(i).set( 'top', (Math.cos( angleRadians ) * this.opts.radius) );
                this.group.item(i).set( 'left', (-Math.sin( angleRadians ) * this.opts.radius) );
            } else {
                curAngle = (i * parseInt( this.opts.spacing, 10)) - align;
                angleRadians = curAngle * (Math.PI / 180);
                this.group.item(i).setAngle( curAngle );
                this.group.item(i).set( 'top', (-Math.cos( angleRadians ) * this.opts.radius) );
                this.group.item(i).set( 'left', (Math.sin( angleRadians ) * this.opts.radius) ) ;
            }
        }

        // Update group coords
        this.group._calcBounds();
        this.group._updateObjectsCoords();
        this.group.top = this.opts.top;
        this.group.left = this.opts.left;
        this.group.saveCoords();

        this.canvas.renderAll();
    };

    CurvedText.defaults = {
        top: 0,
        left: 0,
        scaleX: 1,
        scaleY: 1,
        angle: 0,
        spacing:0,
        radius:0,
        text: '',
        align: 'center',
        reverse:'',
        fontSize:16,
        fontWeight: 'normal',
        selectable: true,
        fontFamily:'',
        fontColor:'black',
        textStyleName:''
    };

    return CurvedText;
})();

  • Probé JSfiddle y el ejemplo funciona bien, ¿puedes enviar una captura de pantalla de tus resultados tomados de fiddle?

    – ProllyGeek

    10 de abril de 2017 a las 1:15

  • @ProllyGeek, intente las acciones que mencioné secuencialmente. 1- Agregar texto, 2- Cambiar la escala del texto de las esquinas, 3- Hacer clic en actualizar texto. Las capturas de pantalla ya están incrustadas en la pregunta. Gracias.

    – HOY

    10/04/2017 a las 10:00

  • @HOY actualicé mi respuesta a continuación.

    –Tim Harker

    11 de abril de 2017 a las 16:18

avatar de usuario
Tim Harker

Esto debería hacerlo, si te entendí correctamente:

texto curvo de fabricjs

Sólo un pequeño ajuste a su updateText() función:

function updateText() {
  var original = canvas.getActiveObject();
  canvas.remove(original);
  setText();
  canvas.getActiveObject().set({
    angle: original.angle,
    top: original.top,
    left: original.left,
    scaleX: original.scaleX,
    scaleY: original.scaleY
  }).setCoords();
  canvas.renderAll();
}

Y finalmente, aquí está su importante JSFiddle actualizado, https://jsfiddle.net/rekrah/pkj82n4b/.

Actualizar (v2)
– ya que suplicaste en tu generosidad para hacer tu función trabajar, ;-).

Cambia esta línea:

this.group = new fabric.Group([], {selectable: this.opts.selectable,name:'arc',radiusVal:this.opts.radius,spacingVal:this.opts.spacing,textFliping:this.opts.reverse,itemName:'text'});

A esto:

this.group = new fabric.Group([], {selectable: this.opts.selectable,name:'arc',radiusVal:this.opts.radius,spacingVal:this.opts.spacing,textFliping:this.opts.reverse,itemName:'text',originX:'center',originY:'center'});

Y para hacerlo un poco más estéticamente agradable, es posible que desee…

Cambia esta línea: canvas = new fabric.Canvas('c',);

A esto: canvas = new fabric.Canvas('c',{centeredScaling: true});

Y aquí está tu Plunker original actualizado de nuevo, https://jsfiddle.net/rekrah/c7cjzkfd/.

Esto deja su updateText() funcionar como lo tenías.

Avíseme si tiene alguna otra pregunta. Siempre feliz de ayudar!

  • Hola Tim, respondiste bien mi pregunta y corrigiste la función con un ajuste. Lo aprecio y fue muy útil. Pero mi función de texto curvo era más detallada y otras funcionalidades como cambiar el color, cambiar el espaciado, aún corrompe las ubicaciones de los grupos como se indicó anteriormente. Así que estoy tratando de usar su ajuste para otras funciones también, pero tengo dificultades. Te dejaré saber con detalles después de trabajar un poco. La funcionalidad completa es difícil de implementar en jsfiddle. Por cierto, en su segundo jsfiddle, cuando se agrega un nuevo texto, hay un problema con las actualizaciones.

    – HOY

    11/04/2017 a las 17:20


  • No te preocupes, lo entiendo. A veces puede ser complicado obtener un JSFiddle que ilustre el problema, y ​​mientras lo hace, uno puede terminar solucionando el problema :-). Simplemente actualice su pregunta cuando tenga algo más. No estoy seguro de a qué problema te refieres con el segundo JSFiddle, a falta de un .setCoords() Me di cuenta de que necesitaba agregar (actualicé el JSFiddle). Aquí hay un registro de cambios para FabricJS, aunque no estoy seguro de que se remonte lo suficiente… http://fabricjs.com/fabric-changelog.

    –Tim Harker

    11/04/2017 a las 19:05


  • Déjame saber si puedo ser de más ayuda?

    –Tim Harker

    17 de abril de 2017 a las 2:12

  • Gracias Tim, resolví problemas con su solución, no quería la recompensa de inmediato, porque podría evitar otras respuestas, y me preguntaba si también hay otras soluciones. Pero iba a darte una recompensa de todos modos. 🙂

    – HOY

    17 de abril de 2017 a las 7:15

  • Entiendo perfectamente. Simplemente no estaba seguro de cómo iban las cosas ya que no había tenido noticias tuyas. Me alegro de que estés progresando muy bien. De hecho, estoy ejecutando la versión 1.2 en este sitio de preproducción, http://xpressclocks.azurewebsites.net/create, y en un momento dado comencé a considerar la actualización, de ahí mi experiencia. Si mi pareja y yo alguna vez lo tomamos en vivo (y se vuelve algo rentable), ¡me dirigiré por un camino similar al tuyo :-)! Avíseme si tiene otras preguntas a medida que continúa, siempre feliz de ayudar. ¡Ahora estamos vinculados, amigo!

    –Tim Harker

    17 de abril de 2017 a las 13:29

Puedes usar esto:https://github.com/EffEPi/fabric.curvedText Puedes ver la demostración

  • Hola, Sofiane, lo usé pero enfrenté otro problema y abrí un problema en github, el propietario no respondió y no hubo buenos comentarios. Así que no ayudó. Aquí puedes consultar: github.com/EffEPi/fabric.curvedText/issues/37

    – HOY

    16 de abril de 2017 a las 11:24

¿Ha sido útil esta solución?