🎉 Add border radius support to image shapes

This commit is contained in:
Alejandro Alonso 2022-01-28 13:39:17 +01:00 committed by Andrey Antukh
parent 38b7474f0b
commit fc2a26f249
11 changed files with 67 additions and 11 deletions

View file

@ -214,3 +214,8 @@
(add-fill shape render-id))]
(-> (obj/new)
(obj/set! "style" fill-styles))))
(defn extract-border-radius-attrs
[shape]
(-> (obj/new)
(add-border-radius shape)))

View file

@ -64,6 +64,7 @@
(let [add! (add-factory shape)
group? (= :group (:type shape))
rect? (= :rect (:type shape))
image? (= :image (:type shape))
text? (= :text (:type shape))
path? (= :path (:type shape))
mask? (and group? (:masked-group? shape))
@ -92,12 +93,21 @@
(add! :constraints-v)
(add! :fixed-scroll)
(cond-> (and rect? (some? (:r1 shape)))
(cond-> (and (or rect? image?) (some? (:r1 shape)))
(-> (add! :r1)
(add! :r2)
(add! :r3)
(add! :r4)))
(cond-> (and image? (some? (:rx shape)))
(-> (add! :rx)
(add! :ry)))
(cond-> image?
(-> (add! :fill-color)
(add! :fill-opacity)
(add! :fill-color-gradient)))
(cond-> path?
(-> (add! :stroke-cap-start)
(add! :stroke-cap-end)))

View file

@ -34,12 +34,14 @@
fill-image-id (str "fill-image-" render-id)
shape (assoc shape :fill-image fill-image-id)
props (-> (attrs/extract-style-attrs shape)
(obj/merge! (attrs/extract-border-radius-attrs shape))
(obj/merge!
#js {:x x
:y y
:transform transform
:width width
:height height}))]
:height height}))
path? (some? (.-d props))]
[:g
[:defs
@ -56,4 +58,6 @@
:width width
:height height}]]]]
[:& shape-custom-stroke {:shape shape}
[:> :rect props]]]))
(if path?
[:> :path props]
[:> :rect props])]]))