Damn! just after posting I've saw the problem:
if(target != null){
context.save();
context.translate(position.x-24, position.y-24);
context.rotate(angle);
context.drawImage(imageElement, -24,-24);
context.restore();
}else{
context.drawImage(imageElement, position.x-24,
position.y-24);
}
Sorry about that :)
On Feb 16, 4:35 pm, Vinicius Carvalho <[email protected]>
wrote:
> Hi. I'm trying the new canvas tag. And I'm having some issues with the
> save/restore.
>
> My first demo was just to draw 2 crossing lines (representing a
> coordinate system)
>
> Draw an image, and react to click events to make the image move to the
> clicked point (it works just fine):
>
> canvas = Canvas.createIfSupported();
> canvas.setWidth("640px");
> canvas.setHeight("480px");
> canvas.setCoordinateSpaceHeight(480);
> canvas.setCoordinateSpaceWidth(640);
> context = canvas.getContext2d();
> context.setFillStyle(CssColor.make(255, 255, 255));
>
> context.fillRect(0, 0, 640, 480);
> bubble = new Bubble(new Vector2D(100,100),
> 80,20,CssColor.make(255,0,0));
> RootPanel.get().add(canvas);
> canvas.addClickHandler(new ClickHandler() {
>
> @Override
> public void onClick(ClickEvent event) {
> bubble.setTarget(new
> Vector2D(event.getX(),event.getY()));
> }
> });
>
> Timer timer = new Timer() {
>
> @Override
> public void run() {
> doUpdate();
> }
> };
> timer.scheduleRepeating(25);
> }
>
> private void doUpdate(){
> //draw the lines
> context.setFillStyle(redraw);
> context.fillRect(0, 0, 640, 480);
>
> context.beginPath();
> context.moveTo(320, 10);
> context.lineTo(320, 470);
> context.moveTo(10, 240);
> context.lineTo(630, 240);
> context.stroke();
> context.closePath();
> //update the image coordinates
> bubble.update();
> bubble.draw(context);
>
> }
>
> public void draw(Context2d context){
>
> context.drawImage(imageElement, position.x,position.y);
>
> }
>
> public void update(){
> if(target != null && distance() > 1){
> double deltaX =
> ((position.x-target.x)/(speed))*speed/25;
> double deltaY =
> ((position.y-target.y)/(speed))*speed/25;
> angle += Math.PI/90;
> position.x = (position.x > target.x) ?
> position.x-deltaX :
> position.x + Math.abs(deltaX) ;
> position.y = (position.y > target.y) ?
> position.y-deltaY :
> position.y + Math.abs(deltaY) ;
> }
> }
>
> Well, that works just fine as I said. So I've decided to make the
> image spin as it moves, its now that problems arose:
>
> public void draw(Context2d context){
> //save context since we are making transformations
> context.save();
> context.translate(position.x,position.y);
> context.rotate(angle);
> //draw the image at its center
> context.drawImage(imageElement, -16,-16);
> context.restore();
> }
>
> Well this has the most undesirable effect. It seems that after the
> restore, the translation is not restored to the 0,0, and on the next
> frame, the axis are drawn on the relative x,y position, rotated by
> angle, and in the next frame it also happens, and it continues messing
> with the coordinate system.
>
> I really can not find where the problem is here.
>
> Regards
--
You received this message because you are subscribed to the Google Groups
"Google Web Toolkit" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-web-toolkit?hl=en.
