亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

前端bug錄-移動端下載圖片

tabalt / 796人閱讀

摘要：前天，快下班的時(shí)候，一朋友發(fā)來一個(gè)戰(zhàn)績圖。然后又提出了一個(gè)需求，下載這個(gè)圖片。我前兩天才寫了文章的前端培訓(xùn)初級階段場景實(shí)戰(zhàn)下載文件下載進(jìn)度小韭菜之前用過還是啥來著。不好使的原因就是和在移動端微信瀏覽器無法下載。移動端，走長按保存圖片。

前天，快下班的時(shí)候，一朋友發(fā)來一個(gè)戰(zhàn)績圖。
這是要約我上分？（這兄弟一手 C 位吊打親友）。我果斷拒絕三連。
結(jié)果，小韭菜問我，右邊那個(gè)圖怎么做？那好了，事情從這里開始

分析一下需求

這個(gè)圖好像叫雷達(dá)圖，那我們先去看 echarts，簡直不要太像好嗎？

小韭菜沒給我反應(yīng)的機(jī)會提出了另一個(gè)想法：簡單一點(diǎn)
簡單一點(diǎn)，我又想起了 Vue官網(wǎng) 有這個(gè)東西。

小韭菜看都沒看就說：不用 Vue
What？我只是讓你看看原理啊。那好吧，我看了一眼，就是 svg 實(shí)現(xiàn)

SVG 實(shí)現(xiàn)雷達(dá)圖

jsrun測試地址，如果 jsrun 掛了，可以去我個(gè)人網(wǎng)站上看測試地址。
SVG 的 polygon

標(biāo)簽用來創(chuàng)建含有不少于三個(gè)邊的圖形。
points 屬性定義多邊形每個(gè)角的 x 和 y 坐標(biāo)

那我們來看上面的圖片，正好五個(gè)角，那我們就可以動手改改。簡單的一匹

100,10.899999999999991
175.32367609057616,75.52585404550416
145.49457852743743,162.61791536462093
71.43363673858582,139.31822592662246
41.795341202736594,81.08815994425322
實(shí)現(xiàn)下載雷達(dá)圖

因?yàn)榭煜掳嗔?，小韭菜看了一眼說搞定。然后又提出了一個(gè)需求，下載這個(gè)圖片。我一想簡單的一匹啊。我前兩天才寫了文章的 前端培訓(xùn)-初級階段-場景實(shí)戰(zhàn)（2019-06-06）-下載文件&下載進(jìn)度

小韭菜之前用過 html2canvas 還是啥來著。直接這樣搞

download 直接下載（svgToDataurl）

svgToCanvas 然后下載 canvas 的圖片

canvas 的 toBlob 結(jié)合 URL.createObjectURL 和 download

canvas 的 toDataUrl 結(jié)合 download

為啥我上面寫了這么多的方法。
因?yàn)?strong>移動端不好使。不好使的原因就是 DataURL 和 BlobURL 在移動端（微信、QQ、QQ瀏覽器）無法下載。

SVG 怎么用 img 顯示

這個(gè)還是當(dāng)時(shí)在張鑫旭張大師哪里看到的方法。
SVGTODataURL data:image/svg+xml,%3Csvg xmlns="http://w
這樣我們就可以顯示了。

download 直接下載

上面我們顯示了出來，直接下載吧。nonono，因?yàn)樯厦娴?Dataurl 是 svg 格式的，下載也是 SVG 格式的。
所以我們需要用 img 讀取 svgurl。然后 canvas 讀取 img 。然后 canvas 輸出想要的圖片格式。然后再下載。

download 無法使用，那我們怎么辦呢？

PC端，走 download 。

移動端，走 長按保存圖片。

總結(jié)步驟

SVG 生成雷達(dá)圖。（實(shí)現(xiàn)效果）

SVG to DataUrl。（為了讓 img 可以加載）

img 加載 DataUrl。（為了讓 canvas 可以加載）

canvas 加載 img。（為了改變輸出格式）

canvas toDataUrl。（改變輸出格式為圖片格式）

分情況支持下載

移動端 圖片長按下載

PC端 download下載

測試地址

更新:計(jì)算點(diǎn)：2019年6月10日09:42:14

時(shí)間：2019年6月10日09:42:14
問題：如果計(jì)算對應(yīng)的點(diǎn)
假設(shè)我們要做的是 五角形，寬高都是 200px。各項(xiàng)能力都是 0-100%。

中心點(diǎn)為 100,100

我們先平分五份 360/5 = 72

通過上面的我們可以把我們問題變?yōu)?strong>已知圓心、線段點(diǎn)&長度（百分比*0度的最長邊）、和旋轉(zhuǎn)角度（每項(xiàng)能力是72），求旋轉(zhuǎn)點(diǎn)坐標(biāo)。如下，已知 A、B 點(diǎn)坐標(biāo)，BAC角度求C點(diǎn)坐標(biāo)。

或者說計(jì)算圓上任意一點(diǎn)
圓點(diǎn)坐標(biāo)：(100,100)，半徑：100，角度：72
圓上任一點(diǎn)為：（x1,y1）

x1 = 100 + 100 * Math.cos(72 * Math.PI /180) //x1=x0+r*cos(ao*3.14/180)
y1 = 100 + 100 * Math.sin(72 * Math.PI /180) //y1=y0+r*sin(ao*3.14/180)

有點(diǎn)汗顏，全都還給老師了。忘的真是干干凈凈

微信公眾號：前端linong

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/104473.html

相關(guān)文章

  • Vue-book 2.0 一個(gè)移動端簡單的全棧 web APP

    摘要：本項(xiàng)目是一個(gè)簡單的全棧項(xiàng)目，前端新手可以拿來練練手。項(xiàng)目實(shí)現(xiàn)了一些簡單的功能，后臺可以對圖書進(jìn)行錄入錄出掃碼或手動，前臺顯示錄入的圖書，并且前臺注冊登錄后可以將書的訂單發(fā)給服務(wù)器，并存到服務(wù)器。 Vue-book 2.0 Github 地址：https://github.com/percy507/v... 【覺得不錯就來個(gè) star 吧 ^_^】 說明（菜鳥請進(jìn)，大神繞道 ~） 前端...

    wh469012917 評論0 收藏0

  • Vue-book 2.0 一個(gè)移動端簡單的全棧 web APP

    摘要：本項(xiàng)目是一個(gè)簡單的全棧項(xiàng)目，前端新手可以拿來練練手。項(xiàng)目實(shí)現(xiàn)了一些簡單的功能，后臺可以對圖書進(jìn)行錄入錄出掃碼或手動，前臺顯示錄入的圖書，并且前臺注冊登錄后可以將書的訂單發(fā)給服務(wù)器，并存到服務(wù)器。 Vue-book 2.0 Github 地址：https://github.com/percy507/v... 【覺得不錯就來個(gè) star 吧 ^_^】 說明（菜鳥請進(jìn)，大神繞道 ~） 前端...

    NotFound 評論0 收藏0

  • 網(wǎng)頁應(yīng)該如何錄屏呢？

    摘要：用于將及其狀態(tài)轉(zhuǎn)化為可序列化的數(shù)據(jù)結(jié)構(gòu)并添加唯一標(biāo)識則是將記錄的數(shù)據(jù)結(jié)構(gòu)重建為對應(yīng)的。用于記錄中的所有變更則是將記錄的變更按照對應(yīng)的時(shí)間一一重放。表示觀察變動時(shí)，是否需要記錄變動前的屬性值。該方法返回變動記錄的數(shù)組。 摘要： 網(wǎng)頁應(yīng)該如何錄屏呢？ 作者：Winty 原文：用戶行為錄幀調(diào)研 Fundebug經(jīng)授權(quán)轉(zhuǎn)載，版權(quán)歸原作者所有。 關(guān)鍵點(diǎn) 首先，每一次會話都有一個(gè)唯一的s...

    _Suqin 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<