javascript踩坑,JavaScript好難

為什么javascript 這么多坑

javascript他爹說(shuō)了，當(dāng)初第一個(gè)版本就是花了一個(gè)星期搞出來(lái)的。人家是個(gè)lisp愛(ài)好者，但是用戶喜歡C語(yǔ)言，所以搞出了這么個(gè)東西。很多現(xiàn)在說(shuō)是坑的東西，其實(shí)都是他為了趕deadline隨便弄出來(lái)的，沒(méi)空細(xì)想。

成都創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)、成都外貿(mào)網(wǎng)站建設(shè)、西充網(wǎng)絡(luò)推廣、微信小程序、西充網(wǎng)絡(luò)營(yíng)銷、西充企業(yè)策劃、西充品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；成都創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供西充建站搭建服務(wù)，24小時(shí)服務(wù)熱線：13518219792，官方網(wǎng)址：muchs.cn

后來(lái)流行了，想改也晚了。web程序員喜歡說(shuō)，我們就是要快，哈哈哈哈哈哈，做基礎(chǔ)設(shè)施怎么能求快呢，害人害己啊。

canvas庫(kù)fabric.js踩坑

眾所周知，canvas的api繁雜，對(duì)一般的前端er來(lái)說(shuō)不太友好，加上平時(shí)一般也不會(huì)自己手寫(xiě)canvas，所以一般開(kāi)發(fā)者對(duì)canvas的涉獵可能并不太深（我看紅寶書(shū)的時(shí)候canvas是直接跳過(guò)的）。而當(dāng)需要使用canvas開(kāi)發(fā)一些定制化的需求時(shí)，echarts，antv系列，可能就無(wú)法滿足了，這個(gè)時(shí)候或許fabric會(huì)是一個(gè)比較好的選擇，fabric提供一種類似面向?qū)ο蟮姆椒▉?lái)編寫(xiě)canvas，比原生稍微方便一些(然鵝官方文檔太難看懂了)

近期的一個(gè)項(xiàng)目中，有這么一個(gè)需求：拖拽縮放元素并且進(jìn)行連線，本來(lái)我第一反應(yīng)是用antv/g6去實(shí)現(xiàn)的，但是需要對(duì)拖拽的元素縮放并且拖拽的容器需要放文字和圖表，如果使用g6的話，縮放容器，里面的內(nèi)容改變不太利索（實(shí)際是我對(duì)g6不太熟），另一個(gè)重要的問(wèn)題是g6元素里面放圖表的話只能放g2（而且需要單獨(dú)安裝插件）并且不支持諸如tooltip等等功能，簡(jiǎn)單來(lái)說(shuō)只能用個(gè)閹割版的（示例： ）。因此我最初想的是使用 vue-grid-layout ( github 文檔 )進(jìn)行拖拽與縮放，畫(huà)線使用canvas。這樣做的好處是第三方組件已經(jīng)把拖拽和縮放功能全都封裝好了，dom元素嵌入echarts和文本縮放也相當(dāng)方便(vue-echarts的autoresize，文本使用flex布局加overflow:auto)，當(dāng)然畫(huà)線又是一個(gè)大問(wèn)題，關(guān)鍵點(diǎn)就是線要和拖拽的元素接上，簡(jiǎn)而言之就是坐標(biāo)計(jì)算了?？紤]到畫(huà)布里面還要放圖（拖拽的元素連線到圖上）以及要實(shí)現(xiàn)連線的時(shí)候鼠標(biāo)移動(dòng)需要不停的重繪線，最終在同事的推薦下決定使用fabric.js來(lái)實(shí)現(xiàn)canvas部分。然后就發(fā)現(xiàn)這東西用起來(lái)一言難盡...

1.官方文檔

就算你英語(yǔ)很好看他的文檔也會(huì)很別扭的，建議直接看 官方DEMO 找自己要的，不懂的百度谷歌，最后把查找文檔作為補(bǔ)充以及檢查是否有新版api和網(wǎng)上的古早文章不同。

2.在vue中使用

目前只能這樣用

3.繪制本地圖片有問(wèn)題

我嘗試過(guò) fabric.Image.fromURL('xxx/xxx.png',function(){}) 以及 new Image().src 這兩種發(fā)現(xiàn)貌似都不能放本地圖片地址（類似 @/assets/... 這種），可能是我使用的方式不對(duì)，最后只剩下一種方法可用了:

這種方法首先需要在頁(yè)面上放一個(gè)隱藏的img元素，結(jié)果一開(kāi)始fabric還讀不到只能通過(guò) onload 事件來(lái)獲取，但這樣會(huì)導(dǎo)致畫(huà)布重繪時(shí)無(wú)法執(zhí)行onload，最后一個(gè)繪制圖片被我寫(xiě)成這樣了

sendToBack 方法是為了確保在后面畫(huà)線的時(shí)候線能在圖的上面一層顯示(貌似fabric是按照先后繪制順序排層級(jí)的，先繪制的層級(jí)最高，于是我們需要將圖的層級(jí)降到最低)

可能是頁(yè)面結(jié)構(gòu)太復(fù)雜的緣故，上面的方法有小概率執(zhí)行時(shí)圖片還沒(méi)加載好，導(dǎo)致最后畫(huà)布里面其它內(nèi)容都出來(lái)了結(jié)果最重要的圖沒(méi)了，最終我搞出來(lái)的解決辦法是，在img標(biāo)簽上直接綁定load事件，執(zhí)行l(wèi)oad時(shí)將組件內(nèi)設(shè)置的狀態(tài)修改，并監(jiān)聽(tīng)這個(gè)狀態(tài)的變化來(lái)執(zhí)行圖片渲染到canvas畫(huà)布的過(guò)程。

畫(huà)圖（畫(huà)線除了selectable其它類似，因?yàn)槲业捻?xiàng)目需要選中線）

因?yàn)槲倚枰c(diǎn)擊線的時(shí)候彈出刪除菜單，所以不能在初始化的時(shí)候直接 skipTargetFind: true ，我要做的是去除選中的樣式和大部分功能，保留選中時(shí)能獲取到選中對(duì)象，一旦這個(gè)屬性設(shè)為true則會(huì)取消所有選中樣式和功能，不需要在canvas對(duì)象里面再單獨(dú)配置了。

第二，計(jì)算三次貝塞爾曲線的控制點(diǎn)，這里面用了向量運(yùn)算...

網(wǎng)上找的檢測(cè)屏幕縮放比例的方法(可以檢測(cè)到系統(tǒng)分辨率改變)

然后在初始化fabric對(duì)象時(shí)需要重新計(jì)算寬高(canvasLayout為畫(huà)布上一級(jí)的父元素)

pageZoom主要在拖動(dòng)元素時(shí)計(jì)算元素與線的連接點(diǎn)坐標(biāo)用到了，這個(gè)系統(tǒng)里面只要vue-grid-layout元素有改變，我就要重新計(jì)算線的起點(diǎn)并重繪線，通過(guò)這種辦法實(shí)現(xiàn)了dom元素和canvas元素的綁定，聽(tīng)起來(lái)很low的樣子，不過(guò)最后功能是都實(shí)現(xiàn)了。

參考文章(還有些講fabric的api的文章找不到了...)

fabric視頻教程（我還沒(méi)看過(guò)，可能有些內(nèi)容存在過(guò)時(shí)）

關(guān)于[JS] forEach循環(huán)return無(wú)法跳出的踩坑和解決方案

在leetcode上刷題的時(shí)候踩的坑，題目是這樣的

簡(jiǎn)單思考了一下，用最簡(jiǎn)單的雙循環(huán)就可以解決問(wèn)題，于是習(xí)慣性用forEach遍歷了兩次

結(jié)果發(fā)現(xiàn)函數(shù)返回值是undefined

百度了一下，發(fā)現(xiàn)是因?yàn)閒orEach多次執(zhí)行回調(diào)函數(shù)，回調(diào)函數(shù)中使用return沒(méi)法直接終止forEach，只能終止單次的回調(diào)。所以return語(yǔ)句在forEach內(nèi)部是無(wú)法跳出循環(huán)的。

解決方案:

1.方案一:js針對(duì)數(shù)組操作的另外兩個(gè)方法some()與every()

2.方案二:for/while語(yǔ)句老實(shí)循環(huán)

總結(jié)原因還是對(duì)forEach方法理解不夠到位

文章標(biāo)題：javascript踩坑,JavaScript好難
URL鏈接：http://muchs.cn/article14/phgsge.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、網(wǎng)站收錄、定制開(kāi)發(fā)、服務(wù)器托管、網(wǎng)站維護(hù)、網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)