V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
cat
V2EX  ›  问与答

前端求助:如何优雅的让 canvas 的原点 (0, 0) 从左下角开始?

  •  1
     
  •   cat · 2023-08-22 11:20:26 +08:00 · 901 次点击
    这是一个创建于 459 天前的主题,其中的信息可能已经有所发展或是发生改变。

    众所周知,在网页中 0,0 一般是在页面左上角,向右向下延申(此处暂不考虑 RTL 情况)

    现在要绘制一些图形,甲方给的数据中 0,0 是在左下角,也就是说 Y 轴的起点是在底部

    目前的做法是把所有的 Y 坐标反正为负数,视觉上就反过来了,但后续的许多处理都特别麻烦

    突然想到那些图表组件,例如散点图折线图,它们的 Y 轴起点一般也在底部

    想请教各位大佬,这部分有什么比较优雅的处理方式吗

    感谢!

    4 条回复    2023-08-23 17:53:14 +08:00
    cheese
        1
    cheese  
       2023-08-22 11:37:38 +08:00
    没啥好办法,要么你就劫持原生方法,直接输入甲方的坐标,然后计算成左上角为原点的,再输入 canvas 绘图
    KouShuiYu
        2
    KouShuiYu  
       2023-08-22 11:38:26 +08:00
    试试 css

    transform: rotateX(180deg);
    Mutoo
        3
    Mutoo  
       2023-08-22 11:42:26 +08:00
    用 webgl 绘制,它的坐标系统就是 y 向上的。或者在你的 canvas 2d 绘制系统抽象一个摄像机空间,然后所有的绘制操作都通过这个相机做一个坐标系变换。
    6qHc19ohwmC9wDT3
        4
    6qHc19ohwmC9wDT3  
       2023-08-23 17:53:14 +08:00
    赞同 2 楼的 CSS 方案
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2035 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 00:57 · PVG 08:57 · LAX 16:57 · JFK 19:57
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.