如何在draw2d-js中使圖像的邊界半徑？

Question

我在draw2d-js有這個問題，有一個用戶圖像，想要使其看起來像css3 border-radius 。

我使用過draw2d.shape.basic.Image ，但是它在css border-radius樣式中不起作用。

有人知道怎么做嗎？

非常感謝您的幫助。

Answer 1

如果您在這里查看已接受的答案，我想您會發現它也可以回答您的問題... 為svg：image設置圓角

作為參考，我在這里也包含上述答案的內容。

“邊界半徑”不適用於svg：image元素（無論如何）。 一種解決方法是創建帶有圓角的矩形，並使用剪切路徑。

例如： http ： //xn--dahlstrm-t4a.net/svg/clippath/border-radius-on-image.svg

來源的相關部分：

<defs>
    <rect id="rect" x="25%" y="25%" width="50%" height="50%" rx="15"/>
    <clipPath id="clip">
      <use xlink:href="#rect"/>
    </clipPath>
</defs>
<use xlink:href="#rect" stroke-width="2" stroke="black"/>
<image xlink:href="boston.jpg" width="100%" height="100%" clip-path="url(#clip)"/>

也可以創建多個rect元素而不是使用