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

資訊專欄INFORMATION COLUMN

小程序坑-canvas

Travis / 1267人閱讀

摘要：中單位問題在中繪制的單位都是，但由于不同屏幕的像素比不同，在小程序中樣式我們使用的單位是，所以在中就需要把換成對(duì)應(yīng)的由于可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)，規(guī)定屏幕寬為，所以換算成的公式是屏幕寬度這一點(diǎn)在小程序的官方文檔也有講到屏幕寬度可以使用獲取

canvas中單位問題

在canvas中繪制的單位都是px，但由于不同屏幕的像素比不同，在小程序中樣式我們使用的單位是rpx，所以在canvas中就需要把rpx換成對(duì)應(yīng)的px；由于rpx可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)，規(guī)定屏幕寬為750rpx，所以rpx換算成px的公式是：
1rpx = 屏幕寬度 / 750
這一點(diǎn)在小程序的官方文檔也有講到：https://mp.weixin.qq.com/debu...
屏幕寬度可以使用wx.getSystemInfoSync();獲??；
所以例如在樣式中你的canvas寬度650rpx，那么在canvas中繪制使用的寬度就是：（屏幕寬度 / 750）* 650 ;

如何在canvas上彈窗

由于canvas組件是小程序創(chuàng)建的原生組件，它的層級(jí)是最高的，其他不是原生的組件都沒法蓋住它，但有些使用我們要必須在上面彈窗，那這時(shí)怎么辦呢？？？

解決辦法：

在彈窗時(shí)將canvas轉(zhuǎn)換成圖片并隱藏，使用image標(biāo)簽代替canvas，這樣彈窗就可以蓋在上面啦?。?！
使用wx.canvasToTempFilePath將canvas臨時(shí)轉(zhuǎn)為圖片（https://mp.weixin.qq.com/debu...）
這里要注意一個(gè)問題，參數(shù)中的width、height等等單位都是px，需要使用上面將的方式轉(zhuǎn)換。

如何劃一條流暢的曲線

修改之前
修改之后
如果我們像將一條折線變得流暢應(yīng)該怎么做呢？
這里涉及到1. 頭尾的圓滑 2. 折線處的平順；

頭尾的圓滑：ctx.setLineCap("round")

折線處的平順：ctx.setLineJoin("round")
兩個(gè)api的文檔說(shuō)明：

https://mp.weixin.qq.com/debu...
https://mp.weixin.qq.com/debu...

如何劃虛線 
由于小程序劃虛線的API需要基礎(chǔ)庫(kù)1.6.0才開始支持，所以需要自己實(shí)現(xiàn)
    /**
     * 
     * @param {*} context canvas上下文
     * @param {*} x1 起點(diǎn)x
     * @param {*} y1 起點(diǎn)y
     * @param {*} x2 終點(diǎn)x
     * @param {*} y2 終點(diǎn)y
     * @param {*} dashLen 虛線每段的長(zhǎng)度 
     */
    drawDashLine(context, x1, y1, x2, y2, dashLen) {  
        const getBeveling = Math.sqrt(Math.pow(x,2)+Math.pow(y,2));
        dashLen = dashLen === undefined ? 5 : dashLen;  
        //得到斜邊的總長(zhǎng)度  
        var beveling = getBeveling(x2-x1,y2-y1);  
        //計(jì)算有多少個(gè)線段  
        var num = Math.floor(beveling/dashLen);  
          
        for(var i = 0 ; i < num; i++)  
        {  
            context[i%2 == 0 ? "moveTo" : "lineTo"](x1+(x2-x1)/num*i,y1+(y2-y1)/num*i);  
        }  
        context.stroke();  
    },

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

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

相關(guān)文章

  • [填坑手冊(cè)]小程序Canvas生成海報(bào)（一）---完整流程

    摘要：海報(bào)生成示例最近智酷君在做小程序生成海報(bào)的項(xiàng)目中遇到一些棘手的問題，在網(wǎng)上查閱了各種資料，也踩扁了各種坑，智酷君希望把這些填坑經(jīng)驗(yàn)整理一下分享出來(lái)，避免后來(lái)的兄弟重復(fù)掉坑。 showImg(https://segmentfault.com/img/bVbs5V8?w=343&h=517);海報(bào)生成示例 最近智酷君在做[小程序]canvas生成海報(bào)的項(xiàng)目中遇到一些棘手的問題，在網(wǎng)上查閱了...

    shleyZ 評(píng)論0 收藏0

  • 20181012微信小程序填坑手冊(cè)～

    摘要：全屏蒙版彈窗遮不住的層級(jí)還是很高的，當(dāng)出現(xiàn)全屏蒙版彈窗時(shí)，是無(wú)法蓋住的，可以調(diào)用微信的，不過(guò)需要注意兼容低版本在類設(shè)置的顏色并沒有變化。 從6月份開始到現(xiàn)在，寫小程序?qū)⒔?個(gè)月了開發(fā)時(shí)給自己埋了不少坑～給大家分享下我的填坑經(jīng)驗(yàn)～～ 開發(fā)部分 1.小程序的組件修改不能觸發(fā)頁(yè)面刷新？需要在父級(jí)文件上保存下才會(huì)觸發(fā)（使用wepy開發(fā)） 2.接口請(qǐng)求出現(xiàn)的問題？記得勾選調(diào)試開發(fā)工具上 不校驗(yàn)...

    劉玉平 評(píng)論0 收藏0

  • 小程序中echarts+canvas 合成圖片保存下載

    摘要：再網(wǎng)上參考了一篇文章小程序?qū)崿F(xiàn)頁(yè)面轉(zhuǎn)化圖片并保存到相冊(cè)根據(jù)這篇文章的內(nèi)容，修改源碼，針對(duì)安卓機(jī)型寫了兼容的配置，如果你的頁(yè)面只有一個(gè)圖表，就完全可以成功轉(zhuǎn)換了，如果是多個(gè)請(qǐng)修改的源碼，方法選擇就可以了。 最近做的小程序項(xiàng)目在echarts合成圖片的時(shí)候遇到了一些問題，綜合了很多網(wǎng)友的經(jīng)驗(yàn)，在此分享一下我的經(jīng)歷，如有錯(cuò)誤，歡迎指正。 1.在小程序中引入echarts組件請(qǐng)參考 echa...

    neu 評(píng)論0 收藏0

  • 微信小程序 海報(bào)生成踩坑記

    摘要：最近有個(gè)需求是要生成分享海報(bào)，讓用戶可以將圖片保存到本地然后分享到朋友圈。本來(lái)以為是一個(gè)很簡(jiǎn)單的需求，可是萬(wàn)萬(wàn)沒想到，微信會(huì)這么坑。 最近有個(gè)需求是要生成分享海報(bào)，讓用戶可以將圖片保存到本地然后分享到朋友圈。本來(lái)以為是一個(gè)很簡(jiǎn)單的需求，可是萬(wàn)萬(wàn)沒想到，微信會(huì)這么坑。剛開始的思路是這樣的： 后臺(tái)根據(jù)小程序傳過(guò)來(lái)的參數(shù)獲取對(duì)應(yīng)的小程序碼，然后與背景圖合成之后將base64格式的圖片傳給小程...

    lidashuang 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<