HQChart小程序教程2-如何使用新版2D畫布創建一個K線圖

小程序 Canvas 2D 接口

小程序畫布。2.9.0 起支持一套新 Canvas 2D 接口（需指定 type 屬性），同時支持同層渲染，原有接口不再維護。
文檔地址：https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html

hqchart使用2D畫布步驟

1. 在.wxml文件種新建一個canvas元素， 增加類型(type)爲2d.

<canvas class="historychart"  canvas-id="historychart" id='historychart' type="2d"  
    style="height:553px; width:375px;" 
    bindtouchstart='historytouchstart' bindtouchmove='historytouchmove' bindtouchend='historytouchend'>
</canvas>

2. 通過select查詢畫布，並初始化hqchart.

onReady() 
{
    var self = this
    // 獲取系統信息
    wx.createSelectorQuery()
        .select('#historychart')
        .fields({
            node: true,
            size: true,
        })
        .exec(self.CreateKLineChart.bind(this)); //初始化hqchart
},

CreateKLineChart:function(res)
{
    console.log('[App::CreateKLineChart] res ', res);
    
    //設置黑色風格
    var style = JSCommonHQStyle.GetStyleConfig(JSCommonHQStyle.STYLE_TYPE_ID.BLACK_ID);
    JSCommon.JSChart.SetStyle(style);
    
    //創建歷史K線類
    var element = new JSCommon.JSCanvasElement();
    element.ID = 'historychart';
    element.CanvasNode = res[0];	//綁定通過select查詢出來的畫布節點
    element.Height = this.data.Height ;   //高度寬度需要手動綁定!! 微信沒有元素類
    element.Width = this.data.Width ;
    this.HistoryChart = JSCommon.JSChart.Init(element); //把畫布綁定到行情模塊中
    this.HistoryChart.SetOption(this.HistoryOption);
},

3. 其他的操作和老版的一樣。

使用微信新版畫布經驗總結

1. 獲取畫布元素需要通過select來獲取，然後通過這個元素來獲取畫布。
2. 畫布使用的時候需要獲取手機像素倍數，然後畫布大小需要放大手機的像素倍數
3. 新版本畫布操作是同步，而老版本是異步的，需要通過draw來操作。所以爲了兼容老版本，在獲取新的畫布實例以後， 在這個實例裏面創建一個空的draw() 方法， 這樣調用draw就不會報錯

function JSCanvasElement() 
{
    this.Height;
    this.Width;
    this.ID;
    this.WebGLCanvas;
    this.IsUniApp=false;
    this.CanvasNode=null;

    //獲取畫布
    this.GetContext = function () 
	{
        var canvas;
        if (this.CanvasNode && this.CanvasNode.node)  //新版本
        {
            const width = this.CanvasNode.width;
            const height = this.CanvasNode.height;

            var node = this.CanvasNode.node;
            node._height = height;
            node._width = width;
            console.log("[JSCanvasElement::GetContext] create by getContext('2d')");
            canvas = node.getContext('2d');
            const dpr = wx.getSystemInfoSync().pixelRatio; //獲取分辨率比例
            node.width = width * dpr;
            node.height = height * dpr;
            canvas.scale(dpr, dpr);	//擴大
            canvas.draw = (bDraw, callback) => { if (callback) callback(); };
            canvas.DomNode = node;
        }
        else 	//老版本
        {
            canvas=wx.createCanvasContext(this.ID);
        }

4. canvasToTempFilePath 在新版裏面使用 canvas 參數（就是通過select查詢出來的元素變量）， 老版本是使用 canvasId， 這個需要注意下
5. drawImage 新版本無法直接使用臨時圖片路徑， 需要通過一個image來轉換下。

if (self.Canvas && self.Canvas.DomNode) //新版本2D畫布
{
    let tempImage = self.Canvas.DomNode.createImage();  //新版本的必須要裝成image類 比較坑
    tempImage.src = this.Frame.ScreenImagePath;
    self.Canvas.clearRect(0, 0, width, height);
    self.Canvas.drawImage(tempImage, 0, 0, width, height);
    self.DrawDynamicChart(false);
}
else
{
    self.Canvas.drawImage(this.Frame.ScreenImagePath, 0, 0, width, height); //老版本直接放圖片本地路徑
    self.DrawDynamicChart(false);
}

如果還有問題可以加交流QQ羣: 950092318

HQChart代碼地址
地址：https://github.com/jones2000/HQChart