javafx画直线 javafx 画布

Canvas初始设置宽300高250，然后通过调用canvas.getGraphicsContext2D()方法获得了它的GraphicsContext。随后通过调用strokeLine、fillOval、strokeArc和fillPolygon等方法执行了一系列基本绘图操作

上代码：

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;
import javafx.scene.paint.Color;
import javafx.scene.shape.ArcType;
import javafx.stage.Stage;

public class BasicOpsTest extends Application {

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

    @Override
    public void start(Stage primaryStage) {
        primaryStage.setTitle("画图操作测试");
        Group root = new Group();//创建一个跟容器节点
        Canvas canvas = new Canvas(300, 250);//创建一个帆布画
        GraphicsContext gc = canvas.getGraphicsContext2D();//获取绘画上下文环境对象，获取绘画小宇宙
        drawShapes(gc);//调用自定义具体绘画流程方法，绘制图形
        root.getChildren().add(canvas);//将根节点容器上添加帆布画
        primaryStage.setScene(new Scene(root));//舞台设置场景，场景挂载节点容器
        primaryStage.show();// 舞台展现
    }

    private void drawShapes(GraphicsContext gc) {//绘画上下文环境对象，在这个系列api中有点画笔对象那意思
        gc.setFill(Color.GREEN);//绘画上下文填充绿色，给画笔的填充作用属性填充颜料为绿色
        gc.setStroke(Color.BLUE);//绘画上下文设置线型和颜色,给画笔的线性绘画笔筒内填充蓝色颜料
        gc.setLineWidth(1);//绘画上下文设置线条粗细
        gc.strokeLine(100, 10, 10, 10);//根据对应坐标参数划线，起点坐标(x1,y1),重点坐标(x2,y2)
        gc.fillOval(10, 60, 30, 30);//画一个填充型椭圆，参数分别是（x,y),宽w,和高h
        gc.strokeOval(60, 60, 30, 30);//画一个线状型椭圆，参数分别是（x,y),宽w,和高h
        gc.fillRoundRect(110, 60, 30, 30, 10, 10);//画一个圆填充型角矩形
        gc.strokeRoundRect(160, 60, 30, 30, 10, 10);//画一个线性状圆角矩形
        gc.fillArc(10, 110, 30, 30, 45, 240, ArcType.OPEN);//创建填充式拱形
        gc.fillArc(60, 110, 30, 30, 45, 240, ArcType.CHORD);//创建填充式拱形
        gc.fillArc(110, 110, 30, 30, 45, 240, ArcType.ROUND);//创建填充式原型拱形
        gc.strokeArc(10, 160, 30, 30, 45, 240, ArcType.OPEN);
        gc.strokeArc(60, 160, 30, 30, 45, 240, ArcType.CHORD);
        gc.strokeArc(110, 160, 30, 30, 45, 240, ArcType.ROUND);
        gc.fillPolygon(new double[]{10, 40, 10, 40},
                new double[]{210, 210, 240, 240}, 4);//创建填充式多边形
        gc.strokePolygon(new double[]{60, 90, 60, 90},
                new double[]{210, 210, 240, 240}, 4);//创建线性多边形
        gc.strokePolyline(new double[]{110, 140, 110, 140},
                new double[]{210, 210, 240, 240}, 4);//创建多段线
    }
}

——————————————————

 

 

想要学好Canvas API，你只需要记住对应代码都基于对Canvas或GraphicsContext对象的调用。

这种模式分为五个主要部分。

首先，Canvas的位置被设置到坐标(0,0)处

并且对Canvas对象应用了一个变换。

例 移动Canvas

private void moveCanvas(int x, int y) { canvas.setTranslateX(x); canvas.setTranslateY(y); }

你可以传入不同的参数值来将Canvas移动到新的位置。你所传入的参数值将会传递给setTranslateX和setTranslateY方法，并且Canvas会进行相应的移动。

其次，在屏幕上绘制了主要的形状(看起来像大写的字母”D”)。它通过调用GraphicsContext的bezierCurveTo方法绘制一条贝塞尔曲线而生成

 

在屏幕上绘制一条贝塞尔曲线(大写的”D”)

private void drawDShape() { gc.beginPath(); gc.moveTo(50, 50); gc.bezierCurveTo(150, 20, 150, 150, 75, 150); gc.closePath(); }

你可以通过改变参数值来对这个形状进行试验。bezierCurveTo方法将会随着你的尝试对形状进行拉伸。

在此之后，一个红色和黄色的射线渐变(RadialGradient)提供了背景中的圆形图案

 

绘制一个RadialGradient

private void drawRadialGradient(Color firstColor, Color lastColor) { gc.setFill(new RadialGradient(0, 0, 0.5, 0.5, 0.1, true, CycleMethod.REFLECT, new Stop(0.0, firstColor), new Stop(1.0, lastColor))); gc.fill(); }

这里GraphicsContext的setFill方法接受了一个RadialGradient对象作为其参数。同样你可以尝试不同的值或者根据你的喜好传入不同的颜色。

一个线性渐变(LinearGradient)对自定义形状”D”进行了着色，使其从蓝色过渡绿色

 

绘制一个LinearGradient

private void drawLinearGradient(Color firstColor, Color secondColor) { LinearGradient lg = new LinearGradient(0, 0, 1, 1, true, CycleMethod.REFLECT, new Stop(0.0, firstColor), new Stop(1.0, secondColor)); gc.setStroke(lg); gc.setLineWidth(20); gc.stroke(); }

这段代码将GraphicsContext的笔触(Stroke)设置为使用LinearGradient，然后使用gc.stroke()对图案进行了渲染。

最后通过调用GraphicsContext对象的applyEffect方法提供了多种色彩的阴影

 

增加一个阴影

private void drawDropShadow(Color firstColor, Color secondColor, Color thirdColor, Color fourthColor) { gc.applyEffect(new DropShadow(20, 20, 0, firstColor)); gc.applyEffect(new DropShadow(20, 0, 20, secondColor)); gc.applyEffect(new DropShadow(20, -20, 0, thirdColor)); gc.applyEffect(new DropShadow(20, 0, -20, fourthColor)); }

所示，通过创建带有指定颜色的DropShadow对象，并将其传递给GraphicsContext对象的applyEffect方法在图形上应用了视觉效果