Làm cách nào để vẽ hình ảnh được xoay trên Canvas JavaFX?

Question

Tôi muốn vẽ hình ảnh trên canvas được xoay. với drawImage(image, 0, 0) Tôi có thể vẽ hình ảnh nhưng làm thế nào tôi có thể xoay hình ảnh đó bằng 45 độ và vẽ nó và sau đó vẽ hình ảnh khác với độ quay -50 độ sau hình ảnh trước đó trên cùng một khung hình?

graphicContext2D không hoạt động vì tôi xoay vòng tất cả nội dung canvas.

Vậy làm cách nào tôi có thể làm điều đó?

Answer 1

Đây là mẫu, theo các nguyên tắc tương tự như câu trả lời của Katona, khác biệt duy nhất là nó xoay hình ảnh về các điểm trục tùy ý bằng cách áp dụng biến đổi tùy chỉnh.

import javafx.application.Application; 
import javafx.geometry.Insets; 
import javafx.scene.Scene; 
import javafx.scene.canvas.*; 
import javafx.scene.image.Image; 
import javafx.scene.layout.StackPane; 
import javafx.scene.paint.Color; 
import javafx.scene.transform.Rotate; 
import javafx.stage.Stage; 

/** Rotates images round pivot points and places them in a canvas */ 
public class RotatedImageInCanvas extends Application { 
    /** 
    * Sets the transform for the GraphicsContext to rotate around a pivot point. 
    * 
    * @param gc the graphics context the transform to applied to. 
    * @param angle the angle of rotation. 
    * @param px the x pivot co-ordinate for the rotation (in canvas co-ordinates). 
    * @param py the y pivot co-ordinate for the rotation (in canvas co-ordinates). 
    */ 
    private void rotate(GraphicsContext gc, double angle, double px, double py) { 
     Rotate r = new Rotate(angle, px, py); 
     gc.setTransform(r.getMxx(), r.getMyx(), r.getMxy(), r.getMyy(), r.getTx(), r.getTy()); 
    } 

    /** 
    * Draws an image on a graphics context. 
    * 
    * The image is drawn at (tlpx, tlpy) rotated by angle pivoted around the point: 
    * (tlpx + image.getWidth()/2, tlpy + image.getHeight()/2) 
    * 
    * @param gc the graphics context the image is to be drawn on. 
    * @param angle the angle of rotation. 
    * @param tlpx the top left x co-ordinate where the image will be plotted (in canvas co-ordinates). 
    * @param tlpy the top left y co-ordinate where the image will be plotted (in canvas co-ordinates). 
    */ 
    private void drawRotatedImage(GraphicsContext gc, Image image, double angle, double tlpx, double tlpy) { 
     gc.save(); // saves the current state on stack, including the current transform 
     rotate(gc, angle, tlpx + image.getWidth()/2, tlpy + image.getHeight()/2); 
     gc.drawImage(image, tlpx, tlpy); 
     gc.restore(); // back to original state (before rotation) 
    } 

    @Override public void start(Stage stage) { 
     Image image = new Image(
      "http://worldpress.org/images/maps/world_600w.jpg", 350, 0, true, true 
     ); 

     // creates a canvas on which rotated images are rendered. 
     Canvas canvas = new Canvas(600, 400); 
     GraphicsContext gc = canvas.getGraphicsContext2D(); 

     drawRotatedImage(gc, image, 40, 0, 0); 
     drawRotatedImage(gc, image, -50, 400, 200); 

     // supplies a tiled background image on which the canvas is drawn. 
     StackPane stack = new StackPane(); 
     stack.setMaxSize(canvas.getWidth(), canvas.getHeight()); 
     stack.setStyle("-fx-background-image: url('http://1.bp.blogspot.com/_wV5JMD1OISg/TDYTYxuxR4I/AAAAAAAAvSo/a0zT8nwPV8U/s400/louis-vuitton-nice-beautiful.jpg');"); 
     stack.getChildren().add(
       canvas 
     ); 

     // places a resizable padded frame around the canvas. 
     StackPane frame = new StackPane(); 
     frame.setPadding(new Insets(20)); 
     frame.getChildren().add(stack); 

     stage.setScene(new Scene(frame, Color.BURLYWOOD)); 
     stage.show(); 
    } 

    public static void main(String[] args) { launch(RotatedImageInCanvas.class); } 
} 

Answer 2

Vâng, tôi chưa bao giờ sử dụng JavaFX, nhưng xem đó là tài liệu API, tôi đã đưa ra giải pháp này (tôi đã không thực sự cố gắng nó để nó có thể sai):

Canvas canvas = ... 
Image img = ... 
GraphicsContext gc = canvas.getGraphicsContext2D(); 

gc.save(); // saves the current state on stack, including the current transform 
gc.rotate(45); 
gc.drawImage(img); 
gc.restore(); // back to original state (before rotation) 

gc.save(); 
gc.rotate(-50); 
gc.drawImage(img); 
gc.restore(); 

Tôi không biết nếu nó hoạt động ở đây, nhưng ý tưởng (chuyển đổi stack) được mượn từ API vẽ khác (như OpenGL).

Answer 3

Vấn đề trên cũng có thể được giải quyết bằng cách tạo ra các lớp khác nhau của vải.

private void createLayers(){ 
     // Layers 1&2 are the same size 
     layer1 = new Canvas(300,250); 
     layer2 = new Canvas(300,250); 

     // Obtain Graphics Contexts 
     gc1 = layer1.getGraphicsContext2D(); 
     gc1.setFill(Color.GREEN); 
     gc1.fillOval(50,50,20,20); 
     gc1.getCanvas().setRotate(45); 
     gc2 = layer2.getGraphicsContext2D(); 
     gc2.setFill(Color.BLUE); 
     gc2.fillOval(100,100,20,20); 
     gc.getCanvas().setRotate(135); 
    } 
     ... 

private void addLayers(){ 
     // Add Layers 
     borderPane.setTop(cb);   
     Pane pane = new Pane(); 
     pane.getChildren().add(layer1); 
     pane.getChildren().add(layer2); 
     layer1.toFront(); 
     borderPane.setCenter(pane);  
     root.getChildren().add(borderPane); 
    }