EffEPi / fabric.curvedText

Allows you to create curved text - extension to fabric.js
43 stars 41 forks source link

Bug with Scale and CurvedText #22

Closed neopheus closed 8 years ago

neopheus commented 9 years ago

Bug with Scale and CurvedText

1 - Open : https://jsfiddle.net/EffEPi/qpJTz/ 2 - Scale the CurvedText Selection 3 - Change the Text (CurvedText) 4 - BUG : The CurvedText is in wrong position

Do you know how to fix this problem?

Thx a lot

syrusbp commented 8 years ago

I am also looking solution for this issue.

Jochuaf commented 8 years ago

Hi Effepi, Your code works really great except this problem. Is there any solution for this problem? Thanx in advance.

syrusbp commented 8 years ago

Hi

I solved the problem. https://jsfiddle.net/qpJTz/231/

No more problems with wrong position :+1: Works with fabric 1.5.0, 1.6.0 rc1

EffEPi commented 8 years ago

How did you solve it ? I would like to integrate it with the current version

Sent via the Samsung GALAXY S®4, an AT&T 4G LTE smartphone

-------- Original message -------- From: Bartosz Postawa notifications@github.com Date: 10/24/2015 06:26 (GMT-05:00) To: "EffEPi/fabric.curvedText" fabric.curvedText@noreply.github.com Subject: Re: [fabric.curvedText] Bug with Scale and CurvedText (#22)

Hi

I solved the problem.

https://jsfiddle.net/qpJTz/231/

No more problems with wrong position

Works with fabric 1.5.0, 1.6.0 rc1

— Reply to this email directly or view it on GitHub.

syrusbp commented 8 years ago

I noticed that the problem does not occur when we set object scaleX and scaleY to 1 and angle to 0.

$('#radius, #spacing, #fill').change(function(){
    //Get textCurved object
    var obj = canvas.getActiveObject(); 
    if(obj){  
        //Get actual object scaleX, scaleY, angle    
        var scaleX = obj.get('scaleX'); 
        var scaleY = obj.get('scaleY'); 
        var angle = obj.get('angle'); 

        //Set actual object scaleX, scaleY to 1 and angle to 0
        obj.set('scaleX', 1); 
        obj.set('scaleY', 1); 
        obj.set('angle', 0); 

        //Set radius, scale, fill, etc. to expected value
        obj.set($(this).attr('id'),$(this).val()); 

        //At the end, set object to previous values 
        obj.set('scaleX', scaleX);
        obj.set('scaleY', scaleY);
        obj.set('angle', angle);
    }
    canvas.renderAll();
});

Voilà coords are OK :)

I fix this problem. Check pull request.

EffEPi commented 8 years ago

fixed with latest pull