Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

three.js canvas wont clear - particle/sprite trails #4418

Closed
Bretto opened this issue Feb 10, 2014 · 5 comments
Closed

three.js canvas wont clear - particle/sprite trails #4418

Bretto opened this issue Feb 10, 2014 · 5 comments
Labels
Help (please use the forum)

Comments

@Bretto
Copy link

Bretto commented Feb 10, 2014

It appears that the bug #4178 is still present http://jsfiddle.net/Bretto/ugR3v/ you can see the trails behind the texts on the edges of the canvas... how can I clear those ? thanks
@mrdoob
Copy link
Owner

mrdoob commented Feb 11, 2014

As described in #4178 you need to make sure that the content inside the sprite doesn't go outside the -1 to 1 region. Basically, make sure the text is inside the circle. If you need to make the text bigger, scale the sprite up.

@mrdoob mrdoob closed this as completed Feb 11, 2014
@Bretto
Copy link
Author

Bretto commented Feb 11, 2014

Thanks but to make the text fit into a 1px region I need to make the font size smaller than .5, and when I do the text disappear... could someone show us how its supposed to be done ?

@WestLangley
Copy link
Collaborator

you need to make sure that the content inside the sprite doesn't go outside the -1 to 1 region.

I think that, now, it is the -0.5 to +0.5 region. That is, the diameter of the circle is 1.

@mrdoob
Copy link
Owner

mrdoob commented Feb 11, 2014

Ah. True that.

@Bretto
Copy link
Author

Bretto commented Feb 11, 2014

maybe this will help someone

        var PI2 = Math.PI * 2;
        var programStroke = function ( context ) {

            context.lineWidth = .005;
            context.strokeStyle = 'rgba(255,0,0,.5)';
            context.beginPath();
            context.arc( 0, 0,.5, 0, PI2, true );
            context.stroke();

            context.beginPath();
            context.arc(0, 0, .03, 0, 2 * Math.PI, false);
            context.fillStyle = "#FF0000";
            context.fill();

            var textHeight = .5;
            context.font = "normal " + textHeight + "px Helvetica";
            var metrics = context.measureText(this.name);
            var textWidth = metrics.width;
            context.textAlign = "center";

            context.scale(.1,-.1);

            context.fillStyle='rgba(255,0,0,.5)';
            context.fillRect(-( textWidth + 1 )/2, -2.5,textWidth + 1,textHeight +.75);

            context.fillStyle = "#000000";
            context.fillText(this.name, -.01, -1.6);
            context.fillStyle = "#ffffff";
            context.fillText(this.name, 0, -1.5);
        }

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Help (please use the forum)
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@mrdoob @WestLangley @Bretto