在小程序中使用canvas的方法示例

更新時(shí)間：2018年09月17日 14:41:18 作者：MytLoy

這篇文章主要介紹了在小程序中使用canvas的方法示例,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

一直沒(méi)有怎么使用過(guò)canvas，小程序也是之前看過(guò)一個(gè)視頻而已，想要找個(gè)例子結(jié)合一下兩者。所以一個(gè)小小的保存圖片作為朋友圈相冊(cè)封面的demo就這么出現(xiàn)了，在這里主要記錄一下自己遇到的一些問(wèn)題以及解決的辦法。

截圖：

效果圖/制作頁(yè)面/顏色選擇

主要是以下幾個(gè)問(wèn)題：

1.顏色選擇器

2.頁(yè)面通信

3.組件間通信

4.canvas（生成圖片、預(yù)覽/保存、文字換行）

1.顏色選擇器

從小程序的文檔中沒(méi)有找到相應(yīng)的顏色選擇組件，昨天（18.3.13）小程序插件功能上線了，小伙伴們也可以選擇插件。寫(xiě)這個(gè)demo是在前兩天寫(xiě)的，所以自己就實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的顏色選擇。

鑒于組件的復(fù)用，而目前小程序的自定義組件只能擁有自己的wxml 模版和 wxss 樣式，js的處理還是需要在引用組件的父組件中處理，所以換了一種方式實(shí)現(xiàn)顏色的選擇：跳到新頁(yè)面中選擇。

備注：使用數(shù)據(jù)緩存（setStorageSync），以免一些數(shù)據(jù)被重新初始化

 /* 選擇顏色
 ob: 對(duì)象
 value：顏色值 */
 changeColor: function(e) {
  var value = e.target.dataset.value;
  if (this.data.ob && value) {
   wx.setStorageSync(this.data.ob, value);
   wx.navigateTo({
    url: '/pages/wallpaper/wallpaper',
   });
  }
 },

2.頁(yè)面通信

數(shù)據(jù)緩存
 navigateTo-url參數(shù)

3.組件間通信（data）

<template is="msgItem" data="{{...item}}"/> // 展開(kāi)
<template is="msgItem" data="{{item}}"/>

4.canvas（生成圖片、預(yù)覽/保存、文字換行）

生成圖片路徑-canvasToTempFilePath

// 生成圖片
 drawPicture: function(val) {
  const that = this;
  const btnName = val.currentTarget.dataset.btnName;
  wx.canvasToTempFilePath({
   canvasId: 'myCanvas',
   success: function (res) {
    if (btnName === 'preview') {
     that.preview(res.tempFilePath);
    } else if (btnName === 'save') {
     that.save(res.tempFilePath);
    }
   },
   fail: function (err) {
    console.log(err);
   }
  })
 },

預(yù)覽/保存圖片

// 預(yù)覽
 preview: function(val) {
  if(val) {
   wx.previewImage({
    urls: [val] // 需要預(yù)覽的圖片http鏈接列表
   })
  }
 },
// 保存
 save: function(val) {
  if(val) {
   wx.saveImageToPhotosAlbum({
    filePath: val,
    success: function (res) {
     console.log('成功');
    },
    fail: function (err) {
     console.log('失敗', err);
     if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
      wx.openSetting({
       success(settingdata) {
        console.log(settingdata)
        if (settingdata.authSetting['scope.writePhotosAlbum']) {
         console.log('獲取權(quán)限成功，給出再次點(diǎn)擊圖片保存到相冊(cè)的提示。')
        } else {
         console.log('獲取權(quán)限失敗，給出不給權(quán)限就無(wú)法正常使用的提示')
        }
       }
      })
     }
    }
   });
  }
 },

文字換行

參考：http://www.dhdzp.com/html5/637068.html

// 裁減-換行(measureText)
  var lastSubStrIndex = 0;
  var dTextWidth = 0;
  var lineHeight = 20; // 行高
  var initX = 10; // 起始X坐標(biāo)
  var initY = canvasHeight / 2; // 起始Y坐標(biāo)
  for(var i = 0; i < dText.length; i++) {
   dTextWidth += ctx.measureText(dText[i]).width;
   if (dTextWidth > canvasWidth - initX) {
    ctx.fillText(dText.substring(lastSubStrIndex, i), initX, initY);
    initY += lineHeight;
    dTextWidth = 0;
    lastSubStrIndex = i;
   }
   if (i == dText.length-1) {
    ctx.fillText(dText.substring(lastSubStrIndex, i + 1), initX, initY);
   }
  }

canvas滑動(dòng)問(wèn)題

這個(gè)問(wèn)題是我在做的時(shí)候發(fā)現(xiàn)的，因?yàn)槲依L制的圖片超出了一屏的高度而且需要給這個(gè)canvas添加一個(gè)長(zhǎng)按事件，所以導(dǎo)致滑動(dòng)卡頓甚至不可滑動(dòng)，經(jīng)過(guò)各種嘗試，最終得出的結(jié)論是，不要把事件放在canvas上，可以在canvas外面套一層view，把事件放到view上面即可解決。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: