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

如何在JavaFX中让左上角的X和Y旋转矩形?

在JavaFX中,可以通过使用Rotate类和Timeline类来实现左上角的X和Y旋转矩形。

首先,创建一个Rectangle对象,并设置其位置和大小。然后,创建两个Rotate对象,分别用于控制X轴和Y轴的旋转。接下来,创建一个Timeline对象,用于控制旋转动画的时间轴。

以下是一个示例代码:

代码语言:java
复制
import javafx.animation.KeyFrame;
import javafx.animation.KeyValue;
import javafx.animation.Timeline;
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.scene.transform.Rotate;
import javafx.stage.Stage;
import javafx.util.Duration;

public class Main extends Application {

    @Override
    public void start(Stage primaryStage) {
        // 创建一个矩形对象
        Rectangle rectangle = new Rectangle(100, 100, 200, 200);
        rectangle.setFill(Color.TRANSPARENT);
        rectangle.setStroke(Color.BLACK);

        // 创建X轴旋转对象
        Rotate xRotate = new Rotate(0, 0, 0, 0, Rotate.X_AXIS);
        // 创建Y轴旋转对象
        Rotate yRotate = new Rotate(0, 0, 0, 0, Rotate.Y_AXIS);

        // 将旋转对象添加到矩形的变换列表中
        rectangle.getTransforms().addAll(xRotate, yRotate);

        // 创建Timeline对象,控制旋转动画
        Timeline timeline = new Timeline();
        timeline.setCycleCount(Timeline.INDEFINITE);
        timeline.setAutoReverse(true);

        // 创建X轴旋转动画
        KeyValue xKeyValue = new KeyValue(xRotate.angleProperty(), 360);
        KeyFrame xKeyFrame = new KeyFrame(Duration.seconds(3), xKeyValue);
        timeline.getKeyFrames().add(xKeyFrame);

        // 创建Y轴旋转动画
        KeyValue yKeyValue = new KeyValue(yRotate.angleProperty(), 360);
        KeyFrame yKeyFrame = new KeyFrame(Duration.seconds(3), yKeyValue);
        timeline.getKeyFrames().add(yKeyFrame);

        // 创建场景并显示
        Group root = new Group(rectangle);
        Scene scene = new Scene(root, 400, 400);
        primaryStage.setScene(scene);
        primaryStage.show();

        // 启动旋转动画
        timeline.play();
    }

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

在上述代码中,我们创建了一个200x200大小的矩形,并将其放置在(100, 100)的位置。然后,创建了一个X轴和一个Y轴的旋转对象,并将它们添加到矩形的变换列表中。接着,创建了一个Timeline对象,并设置了循环次数和自动反向播放。然后,创建了X轴和Y轴的旋转动画,并将它们添加到Timeline的关键帧列表中。最后,创建了一个场景并显示,启动旋转动画。

这样,左上角的X和Y旋转矩形就可以在JavaFX中实现了。

请注意,以上代码仅为示例,实际应用中可能需要根据具体需求进行适当调整。

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

相关·内容

Figma也可以用时间轴做超级流畅动画了

进阶操作 4.1 旋转点 首先,我们应该了解什么是旋转点或锚点。假设我们内部有一个Frame一个矩形矩形:宽度= 100,高度= 100,x = 100,y = 100,旋转= 0°。...在Figma属性面板,我们定义X等于100,但是在这里图上却是150。为什么? ? 关键帧面板上X=150 ? 属性面板X=100 其原因是旋转点,该旋转点由XY轴设置为中心。...因此,位置为:X +(宽度/ 2)= 100 +(100/2)= 150。如果要设置与Figma相同值,则应选择旋转左上角。 让我们沿着X轴将其向右移动100像素,然后将其旋转-45°。 ?...单击“播放”,看它是否在旋转。 ? 但是,如果将旋转点更改为左上角怎样呢?更改旋转关键帧无关紧要。对于该层所有关键帧都是通用。 ? 我们将根据图层左上角进行移动旋转。 ?...加上宽度为500ms时间位置关键帧(Y值),高度值150,和缓动消失动画。 ? 点击播放。 ? 相当不错小球。为了其更加自然,我们可以再为其加更多细节。自己尝试一下吧! ?

19.2K45

opencv 7 -- 边界矩形

可以使用函数 cv2.boundingRect() 查找得到 (xy)为矩形左上角坐标,(w,h)是矩形宽和高 x,y,w,h = cv2.boundingRect(cnt) cv2.boundingRect...,y4]]) # 必须是array数组形式 二、旋转边界矩形 这个边界矩形是面积最小,因为它考虑了对象旋转。...min_rect[0][1]),(min_rect[1][0],min_rect[1][1]),0) 其中包含矩形左上角角点坐标(xy),矩形宽和高(w,h),以及旋转角度。...但是要绘制这个矩形需要矩形 4 个角点,可以通过函数 cv2.boxPoints() 获得 box:[ [x0,y0], [x1,y1], [x2,y2], [x3,y3] ] # 拿到每个轮廓坐标...也就是说,在这里,width与height不是按照长短来定义 在opencv,坐标系原点在左上角,相对于x轴,逆时针旋转角度为负,顺时针旋转角度为正。在这里,θ∈(-90度,0]

1.8K20
  • 图形编辑器开发:实现缩放图形

    x / y width / height rotation 位置大小 x y 为图形左上角位置,注意是旋转。...看到图形,是做过变换(基于矩形中心旋转)之后,但我们需要修改 width、height、xy 则是旋转。...计算 x y // ... } } 看看只更新宽高效果。 可以看到是有问题,因为修改宽高后,矩形中心点也发生了变化,导致缩放中心错误。所以我们要修正一下 x y。...修正 x y 接着我们就要修正 x y 值。 重点就一句话:缩放前参考点缩放后参考点位置要保持一致。这个参考点其实就是图形缩放过程缩放中心。...对于右下角缩放控制点,它缩放中心就是左上角,即 x y 经过旋转位置。 class Graph { // ...

    20021

    解锁前端难题:亲手实现一个图片标注工具

    ,包括缩放旋转,一个是编辑,包括选取修改尺寸,涉及到技术包括,缩放,移动,自定义形状绘制(本文仅实现矩形),绘制形状选取,改变尺寸旋转角度等。...我们先考虑矩形标注绘制问题,由于 canvas 是位图,我们需要在 js 存储矩形数据,矩形存储需要支持坐标,尺寸,旋转角度是否在编辑中等。...距离视口左上角坐标,并将其记录到全局变量startXstartY。...这是因为我们判断点在矩形内部逻辑,并未考虑旋转问题,我们矩形数据存储了矩形旋转之前坐标旋转角度,如下所示。...鼠标事件处理,点击、拖拽、滚轮缩放等。 几何计算,点是否在矩形内、旋转角度计算等。 希望这个实例能够为你提供一些启发帮助,让你在实现自己图片标注工具时有一个参考借鉴。

    69910

    图形编辑器开发:最基础但却复杂选择工具

    如果你对图形拾取细节感兴趣,可以看我这篇文章: 《如何在 Canvas 上实现图形拾取?》 隐藏锁定图形会被忽略,如果点是组下一个元素,要将整个组所有元素都选中。...在渲染层,会对被选中图形进行轮廓高亮,用户有感知。 此外还会有一个 矩形选中框,上面还会有控制点,用户可以缩放旋转图形。 选中框是图形包围盒,通常是 带旋转 OBB 包围盒。...如果你对碰撞检测细节感兴趣,可以看我之前写文章: 《图形编辑器——矩形选区是如何实现选中多个图形?》 《几何算法:矩形碰撞包含检测算法》 框选可以多选结合。...代码核心实现: 移动前此时记录图形位置,起始位置; 拖拽时计算相对位移,更新图形位置; 释放时重置状态,以及记录到历史记录。...常见有: 缩放控制点,在图形选中框 4 个角上; 旋转控制点,拖拽它设置图形旋转旋转控制点; 给图形设置渐变填充色,需要指定两种颜色颜色位置,需要 渐变色控制点; 下面是 figma 缩放旋转演示

    34530

    关于碰撞检测

    1.矩形m与矩形n 矩形1参数是:左上角坐标是(x1,y1),宽度是w1,高度是h1; 矩形2参数是:左上角坐标是(x2,y2),宽度是w2,高度是h2。...、bottom、top为矩形左、右、上、下坐标值) 第二种: 两个矩形中心点在x方向距离绝对值小于等于矩形宽度二分之一,同时y方向距离绝对值小于等于矩形高度二分之一。...假设: 圆形1左上角坐标是(x1,y1),半径是r1, 圆形2左上角坐标是(x2,y2),半径是r2。...:closestPoint = {x, y}; 矩形 rect = {x, y, w, h}; // 左上角与宽高 圆形 circle = {x, y, r}; // 圆心与半径 首先是 x 轴: 如果圆心在矩形左侧...2)) if(distance < circle.r) return true // 发生碰撞 else return false // 未发生碰撞 4.圆形与旋转矩形矩形旋转看成是画布旋转,求出旋转前圆心坐标

    1.1K10

    OpenCV旋转矩形RotatedRectPoints函数遇到问题

    微卡智享 在RotatedRect成员函数,points()函数求矩形4个顶点;原来4个顶点在图形对应关系,可以看下图: ?...Opencv采用通用图像坐标系,左上角为原点O(0,0),X轴向右递增,Y轴向下递增,单位为像素。 矩形4个顶点位置的确定,是理解其它各变量基础,其中p[0]点是关键。...顶点p[0]位置可以这样理解: 如果没有对边与Y轴平行,则Y坐标最大点为p[0]点,矩形(2)(3)(4); 如果有对边与Y轴平行,则有两个Y坐标最大点。此时,左侧点为p[0]点。...矩形(1)。...跟踪输出后结果 从上图中可以看到按原来原理,P0点应该是左下角,结果输出P0点为左上角,后来我又换了几张图测试后发现,RotatedRect坐标点,原来说Y轴最大为P[0],现在实际输出后变为

    2.6K20

    cv2.drawContours

    1.1什么是轮廓 轮廓可以简单认为成连续点(连着边界)连在一起曲线,具有相同颜色或者灰度。轮廓在形状分析物体检测识别很有用。为了准确,要使用二值化图像。...可以使用函数cv2.boundingRect()查找得到#(x,y)为矩形左上角坐标,(w,h)是矩形宽和高x,y,w,h=cv2.boundingRect(cnt)img=cv2.rectangle...(img,(x,y),(x+w,y+h),(0,255,0),2)旋转边界矩形,这个边界矩形是面积最小,因为它考虑了对象旋转。...返回是一个Box2D结构,其中包含矩形最上角角点坐标(xy矩形宽和高(w,h)以及旋转角度。但是要绘制这个矩形需要矩形4个角点,可以通过函数cv2.boxPoints()获得。...其中绿色为直矩形,红色为旋转矩形。?2.8最小外接圆 函数cv2.minEnclosingCircle()可以帮我们找到一个对象外接圆。它是所有能够包括对象面积最小一个。

    3.3K10

    我做了一个在线白板!!!

    移动矩形 移动矩形很简单,修改它xy即可,首先计算鼠标当前位置鼠标按下时位置之差,然后把这个差值加到鼠标按下时那一瞬间矩形xy上作为矩形坐标,那么这之前又得来修改一下咱们矩形模子:...,所以绘制矩形时需要再移动一下画布原点,移动到自身中心,然后再进行绘制,这样旋转就相当于以自身中心进行旋转了,不过需要注意是,原点变了,矩形本身激活状态相关图形绘制坐标均需要修改一下: class...它想太多,原因其实很简单: 虚线是矩形没有旋转位置,我们点击在了旋转边框上,但是我们点击检测是以矩形没有旋转时进行,因为矩形虽然旋转了,但是本质上它xy坐标并没有变,知道了原因解决就很简单了...; this.diagonalPoint.y = 2 * centerPos.y - rotatedPos.y; // 计算鼠标按下位置元素左上角坐标差值 this.mousedownPosAndElementPosOffset.x...,而且绘制矩形也出问题了: 原因矩形旋转一样,滚动只是最终绘制时候加上了滚动值,但是矩形xy仍旧没有变化,因为绘制时是减去了scrollY,那么我们获取到鼠标的clientY不妨加上scrollY

    3.6K31

    WPF 如何计算矩形内一个坐标相对另一个矩形坐标

    我在 WPF 拿到一个矩形里面的一个坐标,在这个矩形里面包含了另一个矩形,我想将这个点转换到另一个矩形里面的坐标。...第二个方法时将 point 转换坐标系, point 坐标系 rect 坐标系相同 尝试方法一将 rect 转换为 originRect 坐标系,需要拿到两个矩形之间向量,也就是将 rect...,也就是 rect 使用 originRect 左上角作为原点坐标系,此时坐标系 point 坐标系相同,也就是计算在相同坐标系一个点相对于矩形点 方法通过将点减去矩形左上角...这里线性部分指的是旋转缩放 在 WPF 会将元素原来坐标计为 x y 1 最后 1 就是占坑,对元素进行变换就是通过矩阵乘法 | M11 M12 0 | |...0 | | x y 1 | 而此时两个矩形都是左上角作为原点也就是元素 x y 都是0相当于 | 0*1 + 0*0 + 1*x, 0*0 + 0*0 + 1*y, 0*0 + 0*0 + 1*

    64030

    自定义控件详解(三):Canvas效果变换

    而是每次调用.DrawXXX()方法,都会生成一个新画布并在上面绘制,这就类似于PS图层。 从下面会看到解释。...paint); //再绘制一个蓝色矩形 ,看看这个矩形是以平移前画布左上角为原点还是以平移后画布左上角为原点 paint.setColor(Color.BLUE...可见当画布进行转换(平移、旋转等)操作之后,往后drawXXX时候都以新画布位置为准     那么,比如我只想第二个矩形所在画布平移,而往后都是以原来画布为准,怎么办,难道还需要逆向操作,怎么平移出去再怎么平移回来么...,paint); canvas.restore(); //恢复成栈顶保存画布状态 //再绘制一个蓝色矩形 ,看看这个矩形是以平移前画布左上角为原点还是以平移后画布左上角为原点...y轴方向上倾斜相应角度,sy为倾斜角度tan值, 注意:倾斜角度tan值,比如倾斜60度,tan60=根号3,小数对应1.732,那么参数就是1.732 Paint paint = new Paint

    84550

    仿bilibili刷新按钮实现

    canvasdrawRoundRect()方法,第一个参数是绘制范围,这里就直接按该控件大小来设置即可。第二、三个参数是xy圆角半径,第三个参数是画笔(要画东西当然需要画笔~)。...在安卓,文字绘制跟其它绘制是不同,例如,圆角矩形旋转图标的绘制起点是左上角,而文字则是按文字左下字为起点,也就是按基线(Baseline)来绘制,故需要得到基线起点坐标。 ?...但我们这个控件有点不同,它还需要考虑到旋转图标的位置问题,所以x应该这么求: x = 控件宽度/2 - (文字长度+空隙+旋转图标宽度)/2。...,再让控件中心y坐标加上(下降)这个高度差一半。...(degress),并编写gettersetter方法,还需要在setter方法调用invalidate(),这样才能在角度值发生变换时,控件回调onDraw()进行图标的旋转绘制。

    1.5K80

    WPF 如何计算矩形内一个坐标相对另一个矩形坐标

    我在 WPF 拿到一个矩形里面的一个坐标,在这个矩形里面包含了另一个矩形,我想将这个点转换到另一个矩形里面的坐标。...第二个方法时将 point 转换坐标系, point 坐标系 rect 坐标系相同 尝试方法一将 rect 转换为 originRect 坐标系,需要拿到两个矩形之间向量,也就是将 rect...,也就是 rect 使用 originRect 左上角作为原点坐标系,此时坐标系 point 坐标系相同,也就是计算在相同坐标系一个点相对于矩形点 方法通过将点减去矩形左上角...这里线性部分指的是旋转缩放 在 WPF 会将元素原来坐标计为 x y 1 最后 1 就是占坑,对元素进行变换就是通过矩阵乘法 | M11 M12 0 | |...0 | | x y 1 | 而此时两个矩形都是左上角作为原点也就是元素 x y 都是0相当于 | 0*1 + 0*0 + 1*x, 0*0 + 0*0 + 1*y, 0*0 + 0*0 + 1*

    1.1K20

    详解CALayeranchorPointposition

    position共同决定图层相对父图层位置,即framex,y 在图层旋转固定点 锚点使用单位坐标来描述,范围为左上角{0, 0}到右下角{1, 1},默认坐标是{0.5, 0.5}....继续扩展,很明显,白纸旋转形态随图钉位置不同而不同,图钉订在白纸正中间与左上角时分别造就了两种旋转形态,这是由图钉(anchorPoint)位置决定。...图1 图2 像UIView有superView与subView概念一样,CALayer也有superLayer与layer概念,前面说到白纸图中矩形可以理解为layer,书桌图中矩形以外坐标系可以理解成...如果各自以左上角为原点,则在图中有相对两个坐标空间。 position 在图1,anchorPoint有(0.5,0.5)(0,0)两种情况,分别为矩形中心点与原点。...图2矩形沿不同anchorPoint点旋转形态,这就是类似于刚才讲图钉订在白纸正中间与左上角时分别造就了两种旋转形态。

    99330

    创新工具:2024年开发者必备一款表格控件(二)

    在未旋转矩形边界内绘制旋转文本 在未旋转矩形边界内绘制旋转文本具有诸多优势,更好地利用空间、布局一致性、在响应式设计中提高效率而不对设计造成重大干扰等。...在倾斜矩形内绘制文本 文本也可以在倾斜矩形旋转,类似于 MS Excel 在带有边框单元格绘制旋转文本。...static void RText(GcGraphics g, int angle, float x1, float y1, float x2, float y2, string s) { var..., y1, x2 - x1, y2 - y1); g.DrawSlantedText(tl, angle, false, rc, SlantedTextAlignment.CenterInsideOutside...); } 请查看我们演示,了解如何在旋转矩形边界内绘制旋转文本,或在倾斜矩形绘制文本,并使用 DrawRotatedText SlantedTextAlignment 枚举各种选项。

    12810
    领券