iT邦幫忙

0

Fabric.js的Text疑問

fabricjs itext text
juice416021 2020-10-29 02:37:31 ‧ 1302 瀏覽

  • 分享至 

  • xImage

程式碼如下

            text = new fabric.IText(text1, {
                left: 180,
                top: 200,
                fontFamily:  "Helvetica",　// 字型
                fill: 'yellow',
                fontWeight:id="textsize",　// 字體粗細
            })
            canvas.add(text)

請問如果我"已經"把IText加進canvas之後
有辦法更改他的設定嗎?
比如我用一個滑動桿

<input id="textsize" type="range" min="100"  step="300" value="50" max="1000">

拉這個滑動桿的"同時"文字會跟著變粗變細
或是利用類似的方法更改顏色、字型之類的
這是做得到的嗎?
如果可以的話該怎麼做?
感謝

通靈亡 iT邦高手 1 級 ‧ 2020-10-29 09:09:48 檢舉
https://stackoverflow.com/questions/24347527/change-text-font-in-fabric-js
juice416021 iT邦新手 5 級 ‧ 2020-11-05 12:56:07 檢舉
感謝你們 我成功字型跟粗細了!
登入發表討論
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

2
glj8989332
iT邦研究生 4 級 ‧ 2020-10-29 09:10:18
最佳解答

大概是這樣做

  1. 增加一個scrollbar且對應的onchange事件處理
  2. 將scrollbar的值指定到IText物件的'fontSize'屬性
  3. 用canvas.renderAll()做重新渲染

https://jsfiddle.net/29b7jgwc/2/

登入發表回應

我要發表回答

立即登入回答
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22195 篇
完賽人數
600 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙