对JAVAFX来说, 图片上的透明部分的任何鼠标事件都不能捕捉到,听起来有点像是bug, 比如下边这个对像你只能在其图片上不秀明部分触发鼠标事件:
ImageView {
x: 0;
y: 0;
image: Image { url: "{__DIR__}myImage.png"}
}
不过可以通过在增加层透明矩形层的方式来解决问题,因为Rectangle对象就算透明也会相应鼠标事件,如下代码所示
Rectangle {//Glass Pane
x: 0;
y: 0;
width: 20;
height: 20;
fill: Color.rgb(0, 0, 0, 0);
}
以下是个在窗口中拖动图片的例子,如图第一张图片只可以拖着不透明的地方拖动,第二张图片可以拖着任何地方(包括透明的部位)来拖动,完整的代码请符见下载(netbeans project)
例子讲解:
Step1.先定义抽象类:
abstract class MyNode extends CustomNode{
var x: Number = 100;
var y: Number = 100;
var xTemp: Number =0;
var yTemp: Number =0;
var img = Image { url: "{__DIR__}myImage.png"};
}
Step2.定义两个子类来显示图片,其中一个多加了一层class pane (透明矩形)来触发鼠标事件
如下这个不带class pane:
class MyNodeWithoutGlassPane extends MyNode{
public override function create(): Node{
return Group {
content: [
ImageView {
x: bind x;
y: bind y;
image: img
}
Text{
x: bind x;
y: bind y;
content: "drag me on opaque part"
}
]
}
}
}
这个带有class pane:
class MyNodeWithGlassPane extends MyNode{
public override function create(): Node{
return Group {
content: [
// Background image
ImageView {
x: bind x;
y: bind y;
image: img;
}
Rectangle {//Glass Pane
x: bind x;
y: bind y;
width: img.width;
height: img.height;
fill: Color.rgb(0, 0, 0, 0);
}
Text{
x: bind x;
y: bind y;
content: "drag me even in transparent part"
}
]
};
}
}
Step3, 最后来写main部分,大体就是建出以上两个子类的对象来,给他们set上x,y做标值并对他们绑定数标事件(onMousePressed 和 onMouseDragged),代码如下
Stage {
scene: Scene {
content: [
MyNodeWithoutGlassPane{
x: 50;
y: 100;
onMousePressed: function(event){
var myNode = event.node as MyNode;
myNode.xTemp = myNode.x;
myNode.yTemp = myNode.y;
}
onMouseDragged: function(event){
var myNode = event.node as MyNode;
//println("{event.dragX} {event.dragY}");
myNode.x = myNode.xTemp + event.dragX;
myNode.y = myNode.yTemp + event.dragY
}
}
MyNodeWithGlassPane{
x: 250;
y: 250;
onMousePressed: function(event){
var myNode = event.node as MyNode;
myNode.xTemp = myNode.x;
myNode.yTemp = myNode.y;
}
onMouseDragged: function(event){
var myNode = event.node as MyNode;
//println("{event.dragX} {event.dragY}");
myNode.x = myNode.xTemp + event.dragX;
myNode.y = myNode.yTemp + event.dragY
}
}
]
}
width: 500
height: 500
title: "Drag Image"
resizable: false
}
完了谢谢阅读:) 祝大家愉快 ^^
分享到:
相关推荐
javaFX单独放大缩小图片和移动图片的很多,很难找到能缩放和移动一起实现的例子。由于项目的需要就自己写了个javaFX实现图片放大(以图片中心放大)、缩小、鼠标移动。(netbeans项目)
JavaFX的简易图片处理的源代码和项目文件
基于javafx的透明登录demo,netbeans项目工程
javafx的资源是真的少,为了设置一个表格完全透明花了好多时间,修改表格的滚动条也废了不少力气,这个实例里面就包含了设置表格的完全透明,还有滚动条背景透明。
JavaFX起步 基础部分 是html格式
javafx
不过,更简单的方法是使用布局窗格。JavaFX SDK提高了多种布局容器类(称为窗格)来方便的建立和管理经典布局,如行、列、堆、拼贴等。由于窗口是可以改变大小的,所以布局窗格会根据其包含的结点自动修改位置和大小。 ...
JavaFx做界面VLC做视频处理,请看源码
主要介绍了JavaFX 监听窗口关闭事件实例详解的相关资料,需要的朋友可以参考下
javafx使用方法-javafx使用方法
QuickResize—基于Java8以及JavaFX写的图片压缩器
通过JavaFX实现了图片的截取 , 已经存储保存。本地已经运行成功
该产品于2007年5月在JavaOne大会上首次对外公布。JavaFX技术主要应用于创建Rich Internet Applications(RIAs)。当前的JavaFX包括JavaFX脚本和JavaFX Mobile(一种运营于行动装置的操作系统),今后JavaFX将包括更...
javaFx入门演示示例程序操作图片
javaFX Demo 模板案例
在 JavaFx 中使用 JFreeChart 生成图表的方法
JavaFX教程;JavaFX教程;JavaFX教程JavaFX教程;
linux系统下,可用如下两命令运 行 javafx 的 jar包 export JAVAFX=/home/这里是linux的用户名文件夹/javafx-sdk-18/lib java --module-path $...其中 /home/ubuntu20/javafx-sdk-18 是上包所解压后的你放置的路径
Sun公司已于2008年12月05日发布了JavaFX技术的正式版,它使您能利用 JavaFX 编程语言开发互联网应用程序(RIA)。该产品于2007年5月在JavaOne大会上首次对外公布。JavaFX技术主要应用于创建Rich Internet ...