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.
