Question

我写了一个Clojurescript Quil网页应用程序，它由浮动的对象组成。这个“游戏”旨在成为普通html文本的背景。 Quil有文字功能，但我没有找到任何我需要做的例子。理想情况下，我希望将网页文本呈现在游戏上方的图层上，使用类似Sablono的内容，而不必担心透明度问题或任何其他问题 - 游戏只是在后台！

如果不能简单地将Quil放在下面的一层上，那么我有理由相信我能够在Quil中做到这一点，但是会有很多细节可以解决：z-ordering，让文字保持不变它的颜色，包含一个字符的矩形背景是透明的等等 - 我想避免的许多问题。

在给定此设置的情况下，在画布图层上设置html文本图层的最简单方法是什么？

以下是我到目前为止所提出的内容，它在与动画相同的功能中绘制文本，但在动画之后。不完全是我想要的，但可能需要做什么：

(ns scratch.core
  (:require [quil.core :as q :include-macros true]
            [quil.middleware :as m]))

(def dark-blue [0,0,139])

(defn setup []
  (q/text-font (q/create-font "DejaVu Sans" 28 true))
  (q/frame-rate 15)
  ; Set color mode to HSB (HSV) instead of default RGB.
  ;(q/color-mode :hsb)
  ; setup function returns initial state. It contains
  ; circle color and position.
  {:color 0
   :angle 0})

(defn draw-text
  []
  (apply q/fill dark-blue)
  (q/text "The quick, brown fox jumped over the lazy dog"
          100 200 300 200))

(defn update-state [state]
  ; Update sketch state by changing circle color and position.
  {:color (mod (+ (:color state) 0.7) 255)
   :angle (+ (:angle state) 0.1)})

(defn draw-state [state]
  ; Clear the sketch by filling it with light-grey color.
  (q/background 240)
  ; Set circle color.
  (q/fill (:color state) 255 255)
  ; Calculate x and y coordinates of the circle.
  (let [angle (:angle state)
        x (* 150 (* 0.4 (q/cos angle)))
        y (* 150 (* 0.4 (q/sin angle)))]
    ; Move origin point to the center of the sketch.
    (q/with-translation [(/ (q/width) 2)
                         (/ (q/height) 2)]
      ; Draw the circle.
      (q/ellipse x y 100 100)))
  ;; Simply make sure the text is drawn after the 'background'
  (draw-text))

(q/defsketch moving-ball
  :host "moving-ball"
  :size [500 500]
  :setup setup
  :update update-state
  :draw draw-state
  :middleware [m/fun-mode])

Answer 1

这个问题有点回答elsewhere。但是，问题中使用的解决方法 - 在画布上绘制文本 - 可能对我的用例来说已经足够了。

背景前面的文字Quil canvas app

1 个答案: