JavaFX 实现推拽效果

最新推荐文章于 2023-07-27 10:03:28 发布

JesseChen0319

最新推荐文章于 2023-07-27 10:03:28 发布

阅读量396

点赞数

分类专栏： java javafx 文章标签： html html5

本文链接：https://blog.youkuaiyun.com/crxglh/article/details/120086904

版权

java 同时被 2 个专栏收录

6 篇文章

订阅专栏

javafx

1 篇文章

订阅专栏

本文介绍了如何使用JavaScript创建一个可拖拽的场景，包括定义point对象来记录坐标变化，通过mouseenter和mouserelease事件处理手型和移动游标，以及利用mousepressed和mousedragged事件调整translate值。关键代码展示了如何捕捉和应用鼠标操作以实现精准的拖拽和释放坐标记录。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先声明一个可以拖拽的scene

var scene = Label( "blablabla")
scene.id = "label"

定义两个记录point，分别记录translate和实放游标的点

class Delta {
    var x = -1.0
    var y = -1.0
}

var dragDelta = Delta()
var releasedDelta = Delta()

先加入mouseenter的手型游标时间

scene.setOnMouseEntered {
	scene.cursor = Cursor.HAND
}

在mouserelease事件中记录坐标

scene.setOnMouseReleased {
	releasedDelta.x = it.sceneX
	releasedDelta.y = it.sceneY
	scene.cursor = Cursor.HAND;
}

在mousepressed事件中，调整translate的计算方式：

scene.setOnMousePressed {
	if (releasedDelta.x > 0 && releasedDelta.y > 0) {
		val offsetX = it.sceneX - releasedDelta.x //already have translate point, recalculate the translate value
		var offsetY = it.sceneY - releasedDelta.y
		dragDelta.x = dragDelta.x + offsetX
		dragDelta.y = dragDelta.y + offsetY
	} else {
		dragDelta.x = it.sceneX
		dragDelta.y = it.sceneY
	}
	scene.cursor = Cursor.MOVE;
	releasedDelta = Delta()
}

在mousedrag中设置scene的translate值

scene.setOnMouseDragged {
	scene.translateX = it.sceneX - dragDelta.x;
	scene.translateY = it.sceneY - dragDelta.y;
}

JavaFX 实现 推拽效果

JavaFX 实现推拽效果