小程序坑-canvas

Travis 發布于2019-08-21 17:22 / 1223人閱讀

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

canvas中單位問題

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

如何在canvas上彈窗

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

解決辦法：

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

如何劃一條流暢的曲線

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

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

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

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

如何劃虛線

由于小程序劃虛線的API需要基礎庫1.6.0才開始支持，所以需要自己實現

    /**
     * 
     * @param {*} context canvas上下文
     * @param {*} x1 起點x
     * @param {*} y1 起點y
     * @param {*} x2 終點x
     * @param {*} y2 終點y
     * @param {*} dashLen 虛線每段的長度 
     */
    drawDashLine(context, x1, y1, x2, y2, dashLen) {  
        const getBeveling = Math.sqrt(Math.pow(x,2)+Math.pow(y,2));
        dashLen = dashLen === undefined ? 5 : dashLen;  
        //得到斜邊的總長度  
        var beveling = getBeveling(x2-x1,y2-y1);  
        //計算有多少個線段  
        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();  
    },

GPU云服務器云服務器小程序小程序小程序附近小程序門店小程序小程序小程序打開小程序

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/89421.html

[填坑手冊]小程序Canvas生成海報（一）---完整流程

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

shleyZ 2019-08-26 13:54 評論0 收藏0
20181012微信小程序填坑手冊～

摘要：全屏蒙版彈窗遮不住的層級還是很高的，當出現全屏蒙版彈窗時，是無法蓋住的，可以調用微信的，不過需要注意兼容低版本在類設置的顏色并沒有變化。從6月份開始到現在，寫小程序將近4個月了開發時給自己埋了不少坑～給大家分享下我的填坑經驗～～開發部分 1.小程序的組件修改不能觸發頁面刷新？需要在父級文件上保存下才會觸發（使用wepy開發） 2.接口請求出現的問題？記得勾選調試開發工具上不校驗...

劉玉平 2019-08-23 12:19 評論0 收藏0
小程序中echarts+canvas 合成圖片保存下載

摘要：再網上參考了一篇文章小程序實現頁面轉化圖片并保存到相冊根據這篇文章的內容，修改源碼，針對安卓機型寫了兼容的配置，如果你的頁面只有一個圖表，就完全可以成功轉換了，如果是多個請修改的源碼，方法選擇就可以了。最近做的小程序項目在echarts合成圖片的時候遇到了一些問題，綜合了很多網友的經驗，在此分享一下我的經歷，如有錯誤，歡迎指正。 1.在小程序中引入echarts組件請參考 echa...

neu 2019-08-26 10:12 評論0 收藏0
微信小程序海報生成踩坑記

摘要：最近有個需求是要生成分享海報，讓用戶可以將圖片保存到本地然后分享到朋友圈。本來以為是一個很簡單的需求，可是萬萬沒想到，微信會這么坑。最近有個需求是要生成分享海報，讓用戶可以將圖片保存到本地然后分享到朋友圈。本來以為是一個很簡單的需求，可是萬萬沒想到，微信會這么坑。剛開始的思路是這樣的：后臺根據小程序傳過來的參數獲取對應的小程序碼，然后與背景圖合成之后將base64格式的圖片傳給小程...

lidashuang 2019-07-01 10:45 評論0 收藏0