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


Posted in Javascript onSeptember 17, 2018

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

截图:

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

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

主要是以下几个问题:

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://3water.com/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上面即可解决。

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

Javascript 相关文章推荐
读jQuery之七 判断点击了鼠标哪个键的代码
Jun 21 Javascript
JavaScript创建类/对象的几种方式概述及实例
May 06 Javascript
js实现div拖动动画运行轨迹效果代码分享
Aug 27 Javascript
jQuery实现的导航下拉菜单效果示例
Sep 05 Javascript
html中鼠标滚轮事件onmousewheel的处理方法
Nov 11 Javascript
JavaScript原生节点操作小结
Jan 17 Javascript
vue Render中slots的使用的实例代码
Jul 19 Javascript
vue富文本编辑器组件vue-quill-edit使用教程
Sep 21 Javascript
vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法
Oct 22 Javascript
原生JS检测CSS3动画是否结束的方法详解
Jan 27 Javascript
Typescript 中的 interface 和 type 到底有什么区别详解
Jun 18 Javascript
浅谈layui里的上传控件问题
Sep 26 Javascript
webpack4打包vue前端多页面项目
Sep 17 #Javascript
node中的密码安全(加密)
Sep 17 #Javascript
Vue CLI3搭建的项目中路径相关问题的解决
Sep 17 #Javascript
浅谈webpack SplitChunksPlugin实用指南
Sep 17 #Javascript
vue的过滤器filter实例详解
Sep 17 #Javascript
一步一步的了解webpack4的splitChunk插件(小结)
Sep 17 #Javascript
React Router V4使用指南(精讲)
Sep 17 #Javascript
You might like
PHP游戏编程25个脚本代码
2011/02/08 PHP
PHP中uploaded_files函数使用方法详解
2011/03/09 PHP
Yii2 GridView实现列表页直接修改数据的方法
2016/05/16 PHP
PHP使用file_get_contents发送http请求功能简单示例
2018/04/29 PHP
php微信开发之关注事件
2018/06/14 PHP
php菜单/评论数据递归分级算法的实现方法
2019/08/01 PHP
基于JQuery框架的AJAX实例代码
2009/11/03 Javascript
新鲜出炉的js tips提示效果
2011/04/03 Javascript
javascript禁用Tab键脚本实例
2013/11/22 Javascript
JS实现5秒钟自动封锁div层的方法
2015/02/20 Javascript
javascript实现确定和取消提示框效果
2015/07/10 Javascript
jquery+html5烂漫爱心表白动画代码分享
2015/08/24 Javascript
跟我学习javascript的隐式强制转换
2015/11/16 Javascript
JavaScript制作颜色反转小游戏
2016/09/25 Javascript
JavaScript中关于iframe滚动条的去除和保留
2016/11/17 Javascript
nodeJS删除文件方法示例
2016/12/25 NodeJs
axios发送post请求springMVC接收不到参数的解决方法
2018/03/05 Javascript
Vue引用Swiper4插件无法重写分页器样式的解决方法
2018/09/27 Javascript
js实现ATM机存取款功能
2020/10/27 Javascript
详解es6新增数组方法简便了哪些操作
2019/05/09 Javascript
深入浅析ng-bootstrap 组件集中 tabset 组件的实现分析
2019/07/19 Javascript
微信小程序 拍照或从相册选取图片上传代码实例
2019/08/28 Javascript
关于vue里页面的缓存详解
2019/11/04 Javascript
jQuery实现穿梭框效果
2021/01/19 jQuery
[原创]windows下Anaconda的安装与配置正解(Anaconda入门教程)
2018/04/05 Python
关于python多重赋值的小问题
2019/04/17 Python
Python彻底删除文件夹及其子文件方式
2019/12/23 Python
Python3.x+pyqtgraph实现数据可视化教程
2020/03/14 Python
详解移动端HTML5页面端去掉input输入框的白色背景和边框(兼容Android和ios)
2016/12/15 HTML / CSS
美国CVS药店官网:CVS Pharmacy
2018/07/26 全球购物
亚马逊加拿大网站:Amazon.ca
2020/01/06 全球购物
主题婚礼策划方案
2014/02/10 职场文书
《雕塑之美》教学反思
2014/04/24 职场文书
2015小学音乐教师个人工作总结
2015/07/21 职场文书
java基础——多线程
2021/07/03 Java/Android
解析python中的jsonpath 提取器
2022/01/18 Python