使用Reanimate为Haskell Diagrams生成动画出现渲染异常如何解决

异常根因 #

• 坐标系冲突：Diagrams采用数学坐标系（Y轴向上），Reanimate遵循SVG标准坐标系（Y轴向下），二者方向相反，直接渲染会导致图形垂直翻转，基于坐标计算的箭头连接也会出现位置偏差。
• 单位不匹配：原有代码使用absolute作为渲染尺寸参数，Diagrams输出的线宽等样式采用像素单位，和Reanimate的逻辑视口单位不兼容，导致线宽显示异常。

修复代码 #

替换Reanimate.Diagrams模块的renderDiagram实现即可，原有主程序无需改动：

{-# LANGUAGE OverloadedStrings #-}
module Reanimate.Diagrams
  ( renderDiagram
  ) where

import Data.Text.Lazy (toStrict)
import Diagrams.Backend.SVG (SVG (SVG), Options (SVGOptions))
import Diagrams.Core.Types (Diagram)
import Diagrams.Core.Compile (renderDia)
import Diagrams.TwoD.Types (V2(..))
import Diagrams.TwoD.Transform (scaleY, translateY)
import Diagrams.BoundingBox (boundingBox, getCorners)
import Diagrams.Size (dims)
import Graphics.Svg.Core (renderText)
import Graphics.SvgTree (Tree, parseSvgFile)
import Reanimate.Svg.Unuse (unbox)
import Data.Maybe (maybe, fromMaybe)

renderDiagram :: Diagram SVG -> Tree
renderDiagram d =
  let -- 计算Diagram的实际边界，确定输出尺寸
      (V2 xMin yMin, V2 xMax yMax) = fromMaybe (V2 0 0, V2 16 9) $ getCorners $ boundingBox d
      width = xMax - xMin
      height = yMax - yMin
      -- 翻转坐标系适配Reanimate，平移避免图形移出视口
      adjustedDia = translateY (yMin + yMax) $ scaleY (-1) d
      -- 传入实际尺寸，保证单位匹配
      opts = SVGOptions (dims $ V2 width height) Nothing "" [] False
      e = renderDia SVG opts adjustedDia
      t = toStrict $ renderText e
      err = error "Malformed SVG"
  in  maybe err unbox (parseSvgFile "" t)

简化版本（可选） #

如果你固定使用Reanimate默认的16:9视口，可省略边界计算逻辑，简化实现：

renderDiagram :: Diagram SVG -> Tree
renderDiagram d =
  let adjustedDia = translateY 9 $ scaleY (-1) d
      opts = SVGOptions (dims $ V2 16 9) Nothing "" [] False
      e = renderDia SVG opts adjustedDia
      t = toStrict $ renderText e
      err = error "Malformed SVG"
  in  maybe err unbox (parseSvgFile "" t)

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