背景Quil画布应用程序前的文本



我写了一个Clojurescript Quil网页应用程序,它由周围浮动的对象组成。这个"游戏"旨在成为普通html文本的背景。奎尔有文字能力,但我还没有找到任何例子,我需要做什么。理想情况下,我想有网页文本渲染在游戏之上的一层,使用像Sablono,而不必担心透明度问题,或任何其他问题-游戏只是在后台!

如果不能简单地把奎尔放在下面的图层上,那么我可以合理地确定我将能够在奎尔中做到这一点,但是会有很多细节需要整理:z顺序,让文本保持其颜色,让包含字符的矩形背景透明等-许多问题我想避免。

什么是最简单的方法,有一个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])  

这个问题在别处有些答案。然而,问题中使用的变通方法-在画布上绘制文本-对于我的用例来说可能已经足够好了。

相关内容

  • 没有找到相关文章

最新更新