Delphi中如何将PATH组件生成对象的旋转支点设为左上角(0,0)点

通用核心逻辑 #

所有2D图形渲染系统的旋转支点调整都基于固定的矩阵变换顺序，不需要修改PATH本身的路径数据：

• 第一步：将坐标系平移到目标支点（也就是元素自身坐标系的(0,0)左上角位置）
• 第二步：执行指定角度的旋转操作
• 第三步：反向平移坐标系抵消第一步的偏移，再渲染PATH对象
  大部分主流开发框架都封装了简化参数，不需要手动写完整的变换序列。

不同开发场景的代码实现 #

SVG #

直接在rotate变换参数中指定支点坐标即可：

<!-- rotate(旋转角度, 支点X坐标, 支点Y坐标) -->
<path d="M10 10 L50 10 L50 50 L10 50 Z" transform="rotate(30 0 0)" />

HTML/CSS #

通过transform-origin属性指定变换原点：

path {
  /* 等价于 transform-origin: 0 0 */
  transform-origin: left top;
  /* 旋转动画示例 */
  animation: rotate 3s linear infinite;
}

@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

Canvas 2D #

手动执行变换序列即可：

const ctx = document.querySelector('canvas').getContext('2d');
const path = new Path2D('M10 10 L50 10 L50 50 L10 50 Z');
//  PATH在画布上的左上角坐标
const pathLeft = 100;
const pathTop = 100;

function draw() {
  ctx.clearRect(0,0, ctx.canvas.width, ctx.canvas.height);
  ctx.save();
  // 平移到目标支点
  ctx.translate(pathLeft, pathTop);
  // 执行旋转
  ctx.rotate(performance.now() / 1000);
  // 反向平移后绘制PATH
  ctx.translate(-pathLeft, -pathTop);
  ctx.fill(path);
  ctx.restore();
  requestAnimationFrame(draw);
}
draw();

Flutter #

通过Transform.rotate的origin参数指定支点：

import 'dart:math' as math;
import 'package:flutter/widgets.dart';

class RotatePathDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Transform.rotate(
      angle: math.pi / 4,
      // 指定左上角为旋转支点
      origin: const Offset(0, 0),
      child: CustomPaint(
        painter: PathPainter(),
        size: const Size(50,50),
      ),
    );
  }
}

class PathPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()..color = const Color(0xff000000);
    final path = Path()
      ..addRect(const Rect.fromLTWH(0, 0, 50, 50));
    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}

内容的提问来源于stack exchange，提问作者Olaf