首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

JAVAFX画布上MouseScroll上的JavaFx绘制和缩放SVG线放大和缩小

JavaFX是一个用于创建富客户端应用程序的Java库。它提供了丰富的图形界面组件和功能,可以用于开发跨平台的桌面应用程序。JavaFX中的画布(Canvas)是一个可用于绘制图形的区域,而MouseScroll事件是指鼠标滚轮滚动时触发的事件。

在JavaFX中,可以通过以下步骤来实现在画布上绘制和缩放SVG线的放大和缩小:

  1. 创建一个JavaFX应用程序,并导入相关的JavaFX库。
  2. 创建一个画布对象,并设置其宽度和高度。
  3. 在画布上绘制SVG线。可以使用JavaFX的Path类来表示SVG线,通过设置其起始点、终止点和控制点等属性来定义线的形状。
  4. 监听MouseScroll事件,并在事件处理程序中根据滚轮滚动的方向来进行缩放操作。
  5. 在缩放操作中,可以通过修改SVG线的起始点、终止点和控制点等属性来改变线的大小。

以下是一个简单的示例代码,演示了在JavaFX画布上绘制和缩放SVG线的放大和缩小:

代码语言:txt
复制
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;
import javafx.scene.input.ScrollEvent;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.scene.shape.CubicCurveTo;
import javafx.scene.shape.MoveTo;
import javafx.scene.shape.Path;
import javafx.stage.Stage;

public class Main extends Application {

    private static final double LINE_WIDTH = 2.0;
    private static final double SCALE_FACTOR = 1.1;

    @Override
    public void start(Stage primaryStage) {
        Canvas canvas = new Canvas(400, 400);
        GraphicsContext gc = canvas.getGraphicsContext2D();

        // 绘制初始的SVG线
        drawSVGLine(gc);

        // 监听MouseScroll事件
        canvas.setOnScroll(event -> {
            double delta = event.getDeltaY();
            if (delta > 0) {
                // 放大SVG线
                scaleSVGLine(gc, SCALE_FACTOR);
            } else {
                // 缩小SVG线
                scaleSVGLine(gc, 1 / SCALE_FACTOR);
            }
        });

        StackPane root = new StackPane(canvas);
        Scene scene = new Scene(root, 400, 400);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    private void drawSVGLine(GraphicsContext gc) {
        gc.setStroke(Color.BLACK);
        gc.setLineWidth(LINE_WIDTH);

        Path path = new Path();
        path.getElements().add(new MoveTo(50, 50));
        path.getElements().add(new CubicCurveTo(150, 150, 250, 150, 350, 50));

        gc.strokePath(path);
    }

    private void scaleSVGLine(GraphicsContext gc, double scaleFactor) {
        gc.clearRect(0, 0, gc.getCanvas().getWidth(), gc.getCanvas().getHeight());

        gc.scale(scaleFactor, scaleFactor);
        drawSVGLine(gc);
        gc.scale(1 / scaleFactor, 1 / scaleFactor);
    }

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

在这个示例中,我们创建了一个400x400的画布,并在画布上绘制了一个起始点为(50, 50),终止点为(350, 50),控制点为(150, 150)的SVG线。然后,我们监听了MouseScroll事件,并根据滚轮滚动的方向进行了相应的缩放操作。缩放操作通过修改画布的缩放因子来实现,同时重新绘制了缩放后的SVG线。

请注意,这只是一个简单的示例,实际应用中可能需要更复杂的逻辑和功能。另外,根据具体的需求,可能需要使用其他的JavaFX组件和功能来实现更丰富的用户界面和交互体验。

关于JavaFX的更多信息和详细介绍,可以参考腾讯云的JavaFX产品文档:JavaFX产品介绍

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

一篇文章带你了解SVG 图标

一、SVG图标的优势 图标使用SVG优点: 1、可以轻松地按比例放大和缩小图标,具体取决于要在应用程序中显示位置以及显示应用程序屏幕尺寸。...但是,在显示SVG图标时,使用HTMLimg元素来显示图标是最容易,HTML img元素可以轻松地放大和缩小SVG图标的大小。...当仅设置其中一个属性宽度时,浏览器将沿另一个轴相应缩放SVG图标,以便SVG图标保持其纵横比。 三、自定义SVG图标 有时可能需要创建自己SVG图标。...但是,当使用img元素显示此SVG图标,并放大和缩小img元素大小时,SVG图标不会放大或缩小。相反,或多或少会显示SVG画布。 下面是将img CSS Height属性设置为32。...SVG viewBox属性指定应显示多少SVG画布(在XY方向上)。 如何只显示SVG画布包含圆圈图标的部分? 只想显示SVG画布包含圆圈图标的部分。

4.2K30

JavaFX WebView概述,很强大,内置了类似Electron功能

来自 Murali Billa JavaFX技术人员主要成员 在此博客中,我们将研究JavaFX如何渲染网页以及负责该网页组件-即WebView JavaFX是: 用于创建和交付可在多种设备运行桌面应用程序以及富...JavaFX WebView: JavaFX WebView  是一个微型浏览器(也称为嵌入式浏览器),它通过JavaFX  应用程序中API提供Web查看器完整浏览功能  。...该浏览器基于  WebKit,这是一个开源Web浏览器引擎,支持HTML5,JavaScript,CSS,DOM渲染SVG图形。 WebView类是Node类扩展。...媒体播放 表单控件(除外) 可编辑内容 历史维护 支持,,标签 SVG 网络插座 网络工作者...要在LoadWorker帮助下跟踪加载进度: 加载始终发生在后台线程。计划后台作业后,立即返回启动加载方法。

10.2K41

PS基础操作及常用快捷键

图层顺序 ? 把不同图片放到同一个图层下:选中移动工具箭头,鼠标按住图像拖动到要图层或背景下 如: ? 新建图层:右下角点击如下 ? 4....选框绘制技巧 ALT+鼠标滚轮:放大或缩小画布 绘制正图形:先拖拽选框,再按shift键 从鼠标点击处为中心进行选框绘制:先拖拽选框,再按alt键 从鼠标点击处为中心进行选框绘制正图形:先拖拽选框,...再按alt键shift键 绘制选框过程中平移选框:按空格后,再按住绘制图形移动 Del : 删除选中区域 选框一次性拖拽到位,松手之后很难继续拖拽选框 移动选框:在选中选框工具情况下,属性栏中新选区被选中时...自由变化 ctrl+T 不同图层有不同操作,shift+鼠标点击图层,选中后可以操作所有图层 可以对图像进行放大缩小,旋转 放大缩小:鼠标移动到定界框顶点时,按住鼠标拖拽(shift等比缩放,alt...常用快捷键 快捷键 功能 Ctrl+N 新建画布 Ctrl+shift+alt+n 新建图层 Ctrl+alt+z 撤销(操作错了返回一步) Alt+鼠标滚轮滚动 放大/缩小画布显示效果 在画布显示比工作区大时

1.8K10

了解 Android 矢量图片格式:`VectorDrawable`

矢量资源有三大好处,分别是: 好用 占用资源少 动态 好用 矢量图可以优雅调整大小;这是因为它们将图像绘制在抽象大小画布,你可以放大或缩小画布,然后重新绘制对应尺寸图像。...这会使设计人员开发人员之间工作流程复杂化。我们将在以后文章中深入讨论这个主题。 为什么不用 SVG? 如果你曾经使用矢量图像格式,你可能会遇到网络行业标准 SVG 格式(可缩放矢量图形)。...Android 在受限制移动设备运行,因此支持整个 SVG 规范并不是一个现实目标。 然而,SVG 包含一个 路径规范,它定义了如何描述绘制形状。使用此 API,您可以表达大多数矢量形状。...第二个 视口 大小定义虚拟画布,或者定义所有后续绘制命令空间坐标。固有视口尺寸可以不同(但应该以相同比例)— 如果你需要,可以在 1*1 画布中定义矢量。...可视化路径操作 上面的命令移动虚拟笔,然后画一条线到另一个点,抬起并移动笔,然后绘制另一条线

2.5K30

JavaFX——(第一篇:介绍篇)

JavaFX体系结构框架 JavaFx平台是一个构建于java技术基本并且容易创建和部署富客户端平台跨平台应用。...下图说明JavaFx 2整体架构,分别描述了各个部件各部分是如何联系起来。在下面的JavaFX API基础就可以运行你JavaFx代码。...对于使用社备有多个使用路径: DirectX 9 在 Windows XPWindows Vista DirectX 11在Windows 7 OpenGL在Mac, Linux, 嵌入式 Java2D...这个重要属性允许系统批量执行事件在pulse。 Layout and CSS也有pulse事件。场景图上许多改变将导致布局CSS变化。系统将自动优化性能通过pulse。...这个部分显示在图1中橙色部分,它基于WebKit,这个开源浏览器引擎能提供支持对HTML5, CSS, JavaScript, DOM, and SVG

5.6K60

JavaFX入门(四):JavaFX布局(一)

说道GUI编程一定要谈到布局,JavaFX内置了大量布局控件提供给我们使用。其实,JavaFX布局控件界面元素控件都是继承自javafx.scene.layout.Region类。...常见一个用例场景就是,软件主界面的上面是菜单栏工具条,左边右边可能是文档或者内容列表或者常用工具集合,然后中间是主要内容显示区,下面是状态栏。...当窗口放大缩小时候,该Button始终在左下角离右边100px,离下边100px位置。通俗地说,AnchorPane可以将控件锚定到布局面板某个位置。...在SceneBuilder中我们可以很容易在右边属性面板中设置锚定方位距离: ? 比如我们在左上角右下角放置两个Button,如图: ?...在我们用SceneBuilder设计界面的时候,自动生成FXML文件中实体元素属性是JavaFX属性是对应,我们可以通过FXML了解对应类一些属性方法。

11.2K41

Canvas鼠标滚轮缩放以及画布拖动(图文并茂版)

Canvas鼠标滚轮缩放以及画布拖动 本文会带大家认识Canvas中常用坐标变换方法 translate scale,并结合这两个方法,实现鼠标滚轮缩放以及画布拖动功能。...Canvas坐标变换 Canvas 绘图缩放以及画布拖动主要通过 CanvasRenderingContext2D 提供 translate scale 两个方法实现,先来认识下这两个方法。...画布清空问题 每次鼠标移动时候会改变 Canvas CanvasRenderingContext2D 偏移量,并重新进行图形绘制,重新绘制过程就是先将画布清空,然后设置画布偏移量(调用 translate...,反之表示缩小,放大和缩小都有对应阈值,超过阈值就禁止继续放大和缩小。...this.offset.y); this.ctx.scale(this.scale, this.scale); this.draw(); } 总结 本文从基础原理到代码实现,完整给大家讲解了 Canvas 画布绘制中经常会遇到画布拖动鼠标滚轮缩放功能

1.7K10

fabric使用

fabric使用 在vue项目中使用  网上参考很多方法做了一个画板,gitee地址这啦,需要小伙伴自取 https://gitee.com/xc-dh/vue-fabric-canvas 以下是一些使用笔记...circle instanceof fabric.Circle; // true circle instanceof fabric.Object; // true 2、绘制不规则图形 使用路径绘图:用点线移动方式进行绘图...通过对 线、曲线、弧应用绘制非常复杂图形。 在fabric.Path( )方法中,“M”代表“移动”命令,这个“M 00” 代表把画笔移动到(0,0)点坐标。...“L”代表“线”,“L 200 100 ”意思是使用钢笔画一条线,从(0,0)坐标画到(200,100)坐标。 “z” 代表让图形闭合路径。...options.e.clientX, options.e.clientY) }) 注:常用监听事件如下: mouse:down:鼠标按下时 mouse:move:鼠标移动时 mouse:up:鼠标抬起时 对画布对象操作

91220

图形编辑器开发:网格与网格吸附

网格,指的是渲染在画布,按照特定间距绘制垂直水平直线,所构成网格。 作用是让用户可以较 直观 地观察到图形距离大小关系,以及实现网格吸附。...网格绘制 考虑到性能,我们 只绘制视口范围内网格线。其他超出部分不同绘制出来。因为是重复图案(可以视作两条线组成 L 形平铺),可以考虑用纹理平铺渲染以提高性能。...网格通常渲染在图形下方,并在画布缩放前后,维持线宽为 1 像素不变。 关于渲染实现,我之前写过 画布标尺绘制文章,思路其实是一样。...绘制就是在原来网格线基础,再画一个放大了 n 倍网格线。注意这个大网格颜色相比小网格颜色要不同,以看出区别。...因为密度降低,此时可以考虑让点跟随画布缩放缩放(还有一个前提是画布不能放得很大)。 网格密度过大 当缩小画布时,网格会跟随缩小。当缩放得非常小时,网格线就会显得非常密集。

14110

MyChat,一个私有的“微信“

MyChat 由来 做这个项目的原因契机有很多,说两个比较关键。 一是因为一个叫傅政委男人,关于这个人(https://bugstack.cn/),以后再说,要讲东西有点多,一篇写不下。...二是对自己一个交代吧,把自己对软件设计理解,在这个行业所学所得,还有自认为良好编码习惯都倾注到这个项目。如果以后你有机会能够看到 MyChat 项目源码,也希望能评价一番,好,我都接受。...UI 采用 JavaFx ,了解过 JavaFx 的人都知道这东西在国内文档表现,为使得页面开发便捷,专门为其开发了一些轮子,比如 FxmlObject ,让你可以轻松来操作 fxml 文件对象。...问题记录 开发 MyChat 遇到了很多问题,这里列举一些随手记问题大家分享一下,有的已经解决,有的在该项目中仍然存在....聊天内容如何跟着主页面的缩放进行缩放? 聊天内容文本域如何动态调整宽高?使文本合理展示? (难搞) javaFx 边框?边距?背景?

2.9K10

SVG动画进行异步懒光栅化处理

图:使用 Devtools 查看SVG动画时间线 这是一个非常复杂SVG,在某些帧消耗时间是我们帧预算10倍,所以这个动画看起来非常糟糕。 这是在一款功能强大MacBook测试。...不过新API为我们提供了更多控制方法: SVG懒栅格化处理 ? createImageBitmap可以将许多不同图像栅格化为位图数据,这些数据可以绘制到canvas元素。...另外你还可以只渲染SVG一部分,并以特定大小进行输出: ? 这允许我们非常方便使用画布SVG进行位图缩放,同时渲染被裁剪后且非常清晰版本。 一旦清晰版准备就绪,就可以将其包含在动画中。...图:Devtools中画布动画时间线 使用这种方法对CPU来说更加友好,动画也很流畅: 查看SVG动画与SVG-in-canvas两种效果比较视频演示: 演示视频时长30秒,越消耗4M流量。...path=script.js:1:0 平滑光栅化 从上面的时间线可以看出,Chrome在将更清晰纹理传到GPU时仍然会跳过一帧。

1.2K20

HTML5 学习总结(四)——canvas绘图、WebGL、SVG

创建了canvas元素后,要在canvas元素上面绘制图象,首先必须获取canvas环境上下文: canvas.getContext(画布绘制类型) 2d: 表示2维 experimental-webgl...1.5、绘制图像 context.drawImage(image,x,y) 把image图像绘制画布x,y坐标位置。...context.drawImage(image,x,y,w,h) 把image图像绘制画布x,y坐标位置,图像宽度是w,高度是h。...特点: 1.任意放缩 用户可以任意缩放图像显示,而不会破坏图像清晰度、细节等。 2.文本独立 SVG图像中文字独立于图像,文字保留可编辑可搜寻的状态。...4.超强显示效果 SVG图像在屏幕总是边缘清晰,它清晰度适合任何屏幕分辨率打印分辨率。

9.5K100

图形编辑器开发:自定义光标

我们需要绘制好光标图片,然后导出为 png(背景为透明度),然后定义好 x y,再通过 css 类包裹一下,然后根据需要在 Canvas 设置对应 css 样式即可。...多种旋转角度旋转缩放光标 有两种光标比较特殊,它们有特殊旋转角度参数。 它们就是旋转缩放光标。...就是有些光标是绘制画布。 一个经典例子就是 AutoCAD 十字光标,这个十字长度是可以设置,可以相当长。 如果你修改操作系统光标,那这个十字便会突破天际地显示到非绘制区域。...考虑到性能,建议把光标放到另一个 canvas 图形一个 canvas 会让画布中没做任何操作图形频繁重绘。 结尾 总结一下。...一种是用工具批量生产光标图片,一种是利用 svg 在运行时动态生成; 最后是在画布渲染光标的方案,适合一些有特殊需求图形编辑器。

23820

canvas离屏技术与放大镜实现

为了方便讲解,本文分为 2 个应用部分: 实现水印中心缩放 实现放大镜 专注前端与算法系列干货分享,转载请声明出处:原文链接: xxoo521.com 什么是离屏技术?...canvas 学习滤镜实现介绍过drawImage接口。除了绘制图像,这个接口还可以:将一个canvas对象绘制到另一个canvas对象。这就是离屏技术。...实现水印中心缩放 在代码中,有两个 canvas 标签。分别是可见与不可见。不可见 canvas 对象 Context 对象,就是我们放置图像水印地方。...); } } script> body> html> 实现效果如下图所示: 拖动滑竿,即可放大和缩小图像...保存后图像,就有已经有了水印,如下图所示: 实现放大镜 在上述中心缩放基础,实现放大镜主需要注意以下 2 个部分: 细化处理canvas鼠标响应事件:滑入、滑出、点击松开 重新计算离屏坐标(

1.2K10

JavaScript 编程精解 中文第三版 十七、在画布绘图

它提供了在空白html节点绘制图形编程接口。SVG画布最主要区别在于 SVG 保存了对于图像基本信息描述,我们可以随时移动或修改图像。...因此我们需要将文字画在画布。 文本 2D 画布context对象提供了fillText方法strokeText方法。第二个方法可以用于绘制字母轮廓,但通常情况下我们需要是fillText方法。...诚然,我们可以绘制另一组精灵,但我们也可以使用另一种方式在画布绘图。 我们可以调用scale方法来缩放之后绘制任何元素。...SVG画布都可以允许你绘制文字,但是它们不会只通过一行代码来帮助你放置text或者包装它,在一个基于 HTML 图像中,包含文本块更加简单。 SVG 可以被用来制造可以任意缩放而仍然清晰图像。...DOM 也可以允许我们在图片每一个元素(甚至在 SVG 画出图形)注册鼠标事件处理器。在画布里则实现不了。 但是画布基于像素方法在需要绘制大量微小元素时会有优势。

3.7K30
领券