Question

我有以下代码，用于将一组设备表示为SVG：

(ns foo.core
  (:use [c2.core :only [unify]]
        [c2.dom :only [replace! append!]]
        [c2.svg :only [translate]]))

(def conf 
  { :devices [{:alias "OSC Sender",
               :name "OSC Sender",
               :ins []},
              {:alias "const2", :name "const",
               :outs []}],
    :layout [{:alias "const2",
              :x 72.12447405329594,
              :y 99.88499298737729},
             {:alias "tick",
              :x 82.5732819074334,
              :y 133.91374474053296},
             {:alias "OSC Sender",
              :x 185.17741935483872,
              :y 113.90322580645162}]})

(def render-config
  [:svg {:viewBox "0 0 900 400"}
   [:rect {:id "frame" :x "1" :y "1" :width "600" :height "300" :fill "none" :stroke "blue"}]
   (unify (:layout conf)
          (fn [{alias :alias x :x y :y}]
            [:g {:transform (translate [x y])}
              [:text alias]]))])

(append! "#main" render-config)

尝试评估REPL中的render-config，我得到：

[:svg {:viewBox "0 0 900 400"} [:rect {:width "600", :y "1", :x "1", :fill "none", :stroke "blue", :id "frame", :height "300"}] ([:g {:transform "translate(72,99)"} [:text "const2"]] [:g {:transform "translate(82,133)"} [:text "tick"]] [:g {:transform "translate(185,113)"} [:text "OSC Sender"]])]

对我来说看起来像是一个恰当的Hiccup表示（当然unify做了它的魔力）。

然而，当在网页的上下文中评估render-config时（使用singult），我只会收到错误。生成一个非常简单的SVG（基本上只有封闭的“框架”矩形）可以在浏览器中使用。

任何提示/提示？

干杯！

注意：使用render-config呈现Hiccup，然后在文件中吐出结果会提供Inkscape可读取的SVG图像。

Answer 1

问题是你的unify不是唯一的孩子。在ClojureScript中，unify具有＆＃34的语义;通过这个模板fn＆＃34;确保这里的所有孩子都是这些数据，而且正在发生的事情是Singult试图将rect变为a g（与模板匹配）。这是荒谬的，这就是为什么它会爆炸。如果你将unify包装起来就好像是

[:g.devices (unify ...)]

你应该没事。

这适用于服务器端，因为unify被视为map。

用c2生成svg

1 个答案: