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

Closed

Closed

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

Labels

Help (please use the forum)

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

added

Help (use Stackoverflow)

on Feb 11, 2014

Owner

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.

closed this as completed

on Feb 11, 2014

Author

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 ?

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.

Owner

Ah. True that.

Author

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

to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

No one assigned

Labels

Help (please use the forum)

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Participants