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

一直没有怎么使用过canvas,小程序也是之前看过一个视频而已,想要找个例子结合一下两者。所以一个小小的保存图片作为朋友圈相册封面的demo就这么出现了,在这里主要记录一下自己遇到的一些问题以及解决的办法。

截图:

效果图/制作页面/颜色选择

主要是以下几个问题:

1.颜色选择器

2.页面通信

3.组件间通信

4.canvas(生成图片、预览/保存、文字换行)

1.颜色选择器

从小程序的文档中没有找到相应的颜色选择组件,昨天(18.3.13)小程序插件功能上线了,小伙伴们也可以选择插件。写这个demo是在前两天写的,所以自己就实现了一个简单的颜色选择。

鉴于组件的复用,而目前小程序的自定义组件只能拥有自己的wxml 模版和 wxss 样式,js的处理还是需要在引用组件的父组件中处理,所以换了一种方式实现颜色的选择:跳到新页面中选择。

备注:使用数据缓存(setStorageSync),以免一些数据被重新初始化

 /* 选择颜色
 ob: 对象
 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.页面通信

数据缓存
navigateTo-url参数

3.组件间通信(data)

<template is="msgItem" data="{{...item}}"/> // 展开
<template is="msgItem" data="{{item}}"/>

4.canvas(生成图片、预览/保存、文字换行)

生成图片路径-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);
   }
  })
 },

预览/保存图片

// 预览
 preview: function(val) {
  if(val) {
   wx.previewImage({
    urls: [val] // 需要预览的图片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('获取权限成功,给出再次点击图片保存到相册的提示。')
        } else {
         console.log('获取权限失败,给出不给权限就无法正常使用的提示')
        }
       }
      })
     }
    }
   });
  }
 },

文字换行

参考:https://www.jb51.net/html5/637068.html

// 裁减-换行(measureText)
  var lastSubStrIndex = 0;
  var dTextWidth = 0;
  var lineHeight = 20; // 行高
  var initX = 10; // 起始X坐标
  var initY = canvasHeight / 2; // 起始Y坐标
  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滑动问题

这个问题是我在做的时候发现的,因为我绘制的图片超出了一屏的高度而且需要给这个canvas添加一个长按事件,所以导致滑动卡顿甚至不可滑动,经过各种尝试,最终得出的结论是,不要把事件放在canvas上,可以在canvas外面套一层view,把事件放到view上面即可解决。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 微信小程序 使用canvas制作K线实例详解

    微信小程序 使用canvas制作K线 实现效果图: 前言: 我们目的是想要一条平滑的曲线来表示均线等,而不是一条转折点明显的折线.因此还得继续探索api.我们发现,在canvas API中,能够画出曲线的有2个 beZierCurveTo(num1, num2, num3, num4, x, y) quadraticCurveTo(num1, num2, x, y) 这两个api都是通过贝塞尔曲线来绘制路径.好在学习PS的时候,对贝塞尔曲线的具体表现也是有一定的熟练程度的,因此知道要确定一条由多

  • 详解微信小程序canvas圆角矩形的绘制的方法

    微信小程序允许对普通元素通过 border-radius 的设置来进行圆角的绘制,但有时候在使用 canvas 绘图的时候,也需要圆角,例如需要将页面上某块区域导出为图片下载到本地的时候,常用的解决方法就是使用 canvas 将这块区域绘制出来,最后导出 canvas 即可,但是 canvas 没有直接提供圆角的绘制 api ,所以需要 曲线救国 圆角矩形与一般矩形的区别在于,前者的四个角都是圆弧,所以只需要将一般矩形的四个角切掉,换成圆弧即可,如下图就是一个一般矩形被切掉了四个角的样子: 很明

  • 微信小程序 wxapp画布 canvas详细介绍

    微信小程序 wxapp画布 canvas :最近学习微信小程序的知识,这里记录下小程序 waxpp画布canvas 的知识: canvas 属性名 类型 默认值 说明 hidden Boolean false 设置画布的显示/隐藏,hidden值为true表示隐藏,值为false表示显示 canvas-id String   canvas组件的唯一标识符 binderror EventHandle   当发生错误时触发error事件,detail = { errMsg: 'something w

  • 微信小程序canvas写字板效果及实例

    微信小程序canvas写字板效果及实例 写字板效果:书写文字,画板重置,导出图片,导出图片前判断是否书写内容 app.json: 添加一个路由:"pages/canvas/canvas" { "pages":[ "pages/index/index", "pages/logs/logs", "pages/canvas/canvas" ], "window":{ "navigat

  • 微信小程序 canvas API详解及实例代码

    绘图是每个移动应用必备的技术,基本上和Android,IOS,等移动开发都是相同的,创建个上下文,给你个画布再上画,官网给的小例子都比较全了自己去看吧,drawImage时没有反应不知道是BUG还是电脑不能测试待定,http://wxopen.notedown.cn/api/api-canvas.html 屏幕就像是数学上的坐标轴,且在第四象限,以屏幕左上角为圆点,X轴向右为正向左为负,Y轴向下为正向上为负(这点和数学上相反的)以圆点为基点画个距离圆点上下50宽高100的矩形来演示canvas基

  • 微信小程序canvas拖拽、截图组件功能

    先看下微信小程序canvas拖拽功能 组件地址 github.com/jasondu/wx-- readme近期补上 实现效果 如何实现 使用canvas 使用movable-view标签 由于movable-view无法实现旋转,所以选择使用canvas 需要解决的问题 如何将多个元素渲染到canvas上 如何知道手指在元素上.如果多个元素重叠如何知道哪个元素在最上层 如何实现拖拽元素 如何缩放.旋转.删除元素 看起来挺简单的嘛,就把上面这几个问题解决了,就可以实现功能了:接下来我们一一解决.

  • 微信小程序canvas实现刮刮乐效果

    本文实例为大家分享了微信小程序实现刮刮乐效果的具体代码,供大家参考,具体内容如下 效果图 设计流程 设计思路 canvas设置背景图,作为中奖图片: 在canvas上绘制刮的灰色涂层: 通过绑定的事件,清除对应区域的涂层: 最后判断涂层清除区域是否超过设置的可见百分比,如果超过则全部涂层清除,否则不清楚. 1.全局常量 获取用户传入的canvas的ID,设置的canvas的宽高,canvas涂层的颜色,清除当前坐标的半径和直径,计算当前清除的面积,全部清除百分比,canvas的面积. const

  • 微信小程序 canvas开发实例及注意事项

    微信小程序 wxcanvas 测试手机为IPHONE6,开发者工具版本0.10.102800.开发者工具0.11.112301版本也一样 微信小程序里的canvas 非 h5 canvas有很多不一样的地方,以下把微信小程序的canvas叫做wxcanvas 下面全是我一点点测试出的干货,耐心看: 1.wxcanvas,不像h5canvas那样有width和height属性和width和height的style样式.他只有style样式,可以理解为他就是个框吧: 2.wxcanvas不要当成真的

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

    一直没有怎么使用过canvas,小程序也是之前看过一个视频而已,想要找个例子结合一下两者.所以一个小小的保存图片作为朋友圈相册封面的demo就这么出现了,在这里主要记录一下自己遇到的一些问题以及解决的办法. 截图: 效果图/制作页面/颜色选择 主要是以下几个问题: 1.颜色选择器 2.页面通信 3.组件间通信 4.canvas(生成图片.预览/保存.文字换行) 1.颜色选择器 从小程序的文档中没有找到相应的颜色选择组件,昨天(18.3.13)小程序插件功能上线了,小伙伴们也可以选择插件.写这个d

  • 在微信小程序中使用图表的方法示例

    前言:网上有许多的图表库,如:Echarts.Tau Charts.ChartJS等等,具体自行百度. 这次我们使用的是:Echarts 官方教程:点击查看 Echarts下载地址:飞机直达 1.下载好之后,把里面的ec-canvas文件夹复制到项目中,如:在项目中建立一个文件夹component ,然后把ec-canvas放到component文件夹里面. 2.在pages中新建一个页面,我这边建立了一个echarsDemo页面,然后在echarsDemo目录中的index.json文件中引入

  • 微信小程序中的canvas 文字断行和省略号显示功能的处理方法

    文字的多行处理在dom元素中很好办.但是canvas中没有提供方法,只有通过截取指定字符串来达到目的. 那么下面就介绍我自己处理的办法: wxml: <canvas canvas-id='word' id='test'></canvas> canvas肯定要一个画板容器啦,记得设置宽高哦,小程序中默认宽高是300px和150px js:在page中 //处理文字多出省略号显示 dealWords: function (options) { options.ctx.setFontSi

  • uniapp在微信小程序中使用ECharts的方法

    今天使用uniapp集成Echarts,实现地图图表的展示 可以参照mpvue-echarts 参照:https://github.com/F-loat/mpvue-echarts https://ask.dcloud.net.cn/article/36288 进行改进 网上有很多教程,但都说的不是很明白,下面直接上步骤 1.npm install echarts mpvue-echarts 执行该命令后,会在node_modules下生成mpvue-echarts.echarts,然后把mpv

  • 微信小程序中setInterval的使用方法

    微信小程序中setInterval的使用方法 看了下小程序的画布功能,简单的使用了一下,用蹩脚的逻辑做了个 "弹啊弹,弹走鱼尾纹的小球",一起来看下吧.过程不重要主要是画布的使用哦.(本来想传gif的来着,后来发现不会传,就传个图片吧,想看的自己下载下来玩呦) 先上图,后上代码了: js: var winWidth = 0 var winHeight = 0 var diameter = 10 var time = 0 Page({ data:{ numX:1, numY:1 }, x

  • Golang通过小程序获取微信openid的方法示例

    为什么要获取小程序的 openid 在开发微信小程序的过程中,小程序可以通过微信官方提供的登录能力方便地获取微信提供的用户身份标识,快速建立小程序内的用户体系.那么这个用户身份标识就是 openid. 小程序获取 openid 的流程 那么小程序获取 openid 的流程具体如下,这里我简化了一下,因为我们只需要获取到 openid 即可,具体可以参考 这里 我们需要在小程序中调用 wx.login() 获取 code 码,然后将这个 code 码发送给后端,后端带着这个 code 码和 app

  • 微信小程序中转义字符的处理方法

    在微信小程序开发过程中,有时候会用到常用的一些特殊字符如:'<'.'>'.'&'.'空格'等,微信小程序同样支持对转义字符的处理,下面提供两种方法用来处理微信小程序中转义字符的处理. 1.官方API调用 这种方式,我们直接在wxml布局文件中,直接调用相关特殊符号的转义字符会无效,原因是小程序的text文本控件的decode属性没有打开导致的,看下文档说明: 从文档中,我们可以发现,decode属性默认为false,不会解析我们的特殊字符,我们通过设置decode属性为true,并且调

  • 在微信小程序中使用vant的方法

    在微信小程序中如何使用vant UI ,最近在开发小程序项目的时候遇到了这个问题, 去网上百度发现大家给的步骤普遍都是直接npm i vant-weapp -S --production,接着构建npm, 然而,我在尝试的时候发现,构建npm的时候一直失败,告诉我找不到node_moudules ???? 你们是不是也遇到了这种问题呢? 好的,接下来就让我来告诉大家真正的解决方案吧! 首先, 你需要在小程序根目录下打开命令窗口,依次输入以下命令 npm init 初始化 npm install

  • 在小程序中使用Echart图表的示例代码

    在小程序中使用Echart图表 Echart UI构建(柱状图) Echart 假数据 Echart 动态设置数据 柱状图UI示例 // Echart config,包括init data 和style及数据类型 var option = { animation: false,//提高页面加载速度,关闭echart的动画 grid: [ //grid section UI ... ], xAxis: [ //xAxis section UI ... ], yAxis: [ //yAxis sec

  • 小程序微信支付功能配置方法示例详解【基于thinkPHP】

    本文实例讲述了小程序微信支付功能配置方法.分享给大家供大家参考,具体如下: ★ 背景 近期进行小程序的开发,毕竟是商城项目的开发,最后牵扯到的微信支付是必要的 个人开发过程中也是遇到各种问题,在此,我根据自己的实际操作,进行了代码的详细配置,以方便小程序新手的快速操作 -  使用语言:PHP             # PHP世界上最好的语言 HaHahahaaha -  使用框架:ThinkPHP 3.2    # 版本有点低而已,没啥大碍 -  测试工具:微信开发者工具    # 其实还挺好

随机推荐