Alternative zu Fabric JS _updateObjectsCoords? (Migrationsproblem zu 1.7.9)

Lesezeit: 7 Minuten

Benutzeravatar von HOY
HEI

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

Ich versuche, meine zu machen curveText Funktionsarbeit (siehe unten in diesem Beitrag). Es funktioniert normalerweise mit fabric.js 1.2.0 jedoch, als ich aktualisiert habe fabric.js 1.7.9, die Curving-Funktion lokalisiert den Text unten an falschen Positionen zwei Aktionen hingerichtet der Reihe nach.

AKTIONEN: – AUSGABE 1

– Textgruppenskalierung wird geändert (ich meine, die Eckpunkte mit der Maus ziehen, um die Größe zu ändern).

-setText aufgerufen

Fabric js 1.2.0:

Geben Sie hier die Bildbeschreibung ein

Stoff js 1.7.9

Geben Sie hier die Bildbeschreibung ein

Ich habe es debuggt und der Grund dafür ist _updateObjectsCoords in fabricjs, denn als ich es aus dem Code entfernt habe und 2 Aktionen, die ich oben aufgeführt habe, funktioniert es gut.

AUSGABE 2:
Aber dieses Mal bin ich auf das folgende Problem gestoßen, bei dem Gruppenelemente nicht korrekt lokalisiert werden, wenn der Text zum ersten Mal zur Leinwand hinzugefügt wird.

mit _updateObjectsCoords

Geben Sie hier die Bildbeschreibung ein

ohne _updateObjectsCoords

Geben Sie hier die Bildbeschreibung ein

Hier meine Funktion:

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

  • Ich habe JSfiddle ausprobiert und das Beispiel funktioniert gut. Können Sie einen Screenshot Ihrer Ergebnisse aus Fiddle senden?

    – ProllyGeek

    10. April 2017 um 1:15 Uhr

  • @ProllyGeek , bitte versuchen Sie die Aktionen, die ich nacheinander erwähnt habe. 1- Text hinzufügen, 2- Skalierung des Textes von den Ecken ändern, 3- Klicken Sie auf Text aktualisieren. Die Screenshots sind bereits in die Frage eingebettet. Vielen Dank.

    – HOCH

    10. April 2017 um 10:00 Uhr

  • @HOY Ich habe meine Antwort unten aktualisiert.

    – Tim Harker

    11. April 2017 um 16:18 Uhr

Benutzeravatar von Tim Harker
Tim Harker

Das sollte reichen, wenn ich dich richtig verstanden habe:

Fabricjs gebogener Text

Nur eine kleine Änderung an Ihrer updateText() Funktion:

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

Und schließlich, hier ist Ihr wichtiges aktualisiertes JSFiddle, https://jsfiddle.net/rekrah/pkj82n4b/.

Aktualisierung (v2)
– da Sie in Ihrem Kopfgeld plädiert haben, um Ihr zu machen Funktion Arbeit, ;-).

Ändern Sie diese Zeile:

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

Dazu:

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

Und um es ein wenig ästhetischer zu machen, möchten Sie vielleicht …

Ändern Sie diese Zeile: canvas = new fabric.Canvas('c',);

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

Und hier ist Ihr ursprünglicher Plunker wieder aktualisiert, https://jsfiddle.net/rekrah/c7cjzkfd/.

Dies lässt Ihre updateText() funktionieren so wie du es hattest.

Lassen Sie mich wissen, wenn Sie weitere Fragen haben. Immer gerne helfen!

  • Hallo Tim, du hast meine Frage richtig verstanden und die Funktion mit einem Tweak korrigiert. Ich weiß es zu schätzen und es war wirklich hilfreich. Aber meine CurvedText-Funktion war detaillierter und andere Funktionalitäten wie Farbe ändern, Abstand ändern, verfälschen immer noch die Gruppenpositionen wie oben. Also versuche ich, Ihre Optimierung auch für andere Funktionen zu verwenden, habe aber Schwierigkeiten. Ich werde Sie mit Details informieren, nachdem ich ein wenig gearbeitet habe. Die volle Funktionalität ist auf jsfiddle schwer zu implementieren. Übrigens, auf Ihrem zweiten jsfiddle, wenn ein neuer Text hinzugefügt wird, gibt es ein Problem mit Updates.

    – HOCH

    11. April 2017 um 17:20 Uhr

  • Keine Sorge, ich verstehe. Es kann manchmal schwierig sein, ein JSFiddle zu bekommen, das das Problem veranschaulicht – und während Sie es tun, kann man das Problem am Ende beheben :-). Aktualisieren Sie einfach Ihre Frage, wenn Sie etwas mehr haben. Ich bin mir nicht sicher, auf welches Problem Sie sich mit dem zweiten JSFiddle beziehen, kurz vor a .setCoords() Mir ist aufgefallen, dass das Hinzufügen erforderlich ist (ich habe JSFiddle aktualisiert). Hier ist ein Änderungsprotokoll für FabricJS, aber ich bin mir nicht sicher, ob es weit genug zurückreicht … http://fabricjs.com/fabric-changelog.

    – Tim Harker

    11. April 2017 um 19:05 Uhr

  • Lassen Sie mich wissen, ob ich Ihnen weiterhelfen kann?

    – Tim Harker

    17. April 2017 um 2:12 Uhr

  • Danke Tim, ich habe Probleme mit deiner Lösung gelöst, ich wollte das Kopfgeld nicht sofort geben, weil es andere Antworten verhindern könnte, und ich habe mich gefragt, ob es auch andere Lösungen gibt. Aber ich wollte dir sowieso ein Kopfgeld geben. 🙂

    – HOCH

    17. April 2017 um 7:15 Uhr

  • Ich verstehe vollkommen. Ich war mir nur nicht sicher, wie die Dinge liefen, da ich nichts von dir gehört hatte. Schön, dass du gut vorankommst. Ich führe tatsächlich Version 1.2 auf dieser Vorproduktionsseite aus, http://xpressclocks.azurewebsites.net/create, und habe an einem Punkt mit der Suche nach einem Upgrade begonnen – daher meine Erfahrung. Wenn mein Partner und ich es jemals live bringen (und es etwas profitabel wird), werde ich einen ähnlichen Weg wie Sie einschlagen :-)!!! Lass es mich wissen, wenn du weitere Fragen hast, während du fortfährst, helfe immer gerne – wir sind jetzt verlinkt, Kumpel!

    – Tim Harker

    17. April 2017 um 13:29 Uhr

Sie können dies verwenden:https://github.com/EffEPi/fabric.curvedText Sie können die Demo sehen

  • Hallo Sofiane, ich habe es benutzt, hatte aber ein anderes Problem und eröffnete ein Problem auf Github, der Besitzer hat nicht geantwortet und es gab kein gutes Feedback. Es hat also nicht geholfen. Hier können Sie prüfen: github.com/EffEPi/fabric.curvedText/issues/37

    – HOCH

    16. April 2017 um 11:24 Uhr

1386560cookie-checkAlternative zu Fabric JS _updateObjectsCoords? (Migrationsproblem zu 1.7.9)

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy

Contact - Terms and Conditions - Privacy Policy