小程序 wxml2canvas开发文档

 

wxml:

<view class="share__canvas share__canvas1"><view class="share__canvas1-text draw_canvas" data-type="text" data-text="这是一段无边距文字">这是一段无边距文字</view>
</view>
<canvas canvas-id="canvas1" class="share__canvas"></canvas>

js:

import Wxml2Canvas from 'wxml2canvas'; // 根据具体路径修改,node_modules会被忽略
Page({drawImage1 () {let self = this;this.drawImage1 = new Wxml2Canvas({width: 340, // 宽, 以iphone6为基准,传具体数值,其他机型自动适配height: 210, // 高element: 'canvas1', background: '#f0f0f0',progress (percent) {},finish(url) {let imgs = self.data.imgs;imgs.push(url);self.setData({imgs})},error (res) {}});let data = {list: [{type: 'wxml',class: '.share__canvas1 .draw_canvas', // draw_canvas指定待绘制的元素limit: '.share__canvas1', // 限定绘制元素的范围,取指定元素与它的相对位置x: 0,y: 0}]}this.drawImage1.draw(data);},
})

初始化属性

new Wxml2Canvas(options) 时传入的options属性如下:

属性名类型默认值是否必填说明
elementString''画布的id
widthNumber0画布的宽,以iphone6的375为基准,其他机型按比例自动设置实际宽度
heightNumber0画布的高,同上
destZoomNumber3输出的图片的像素密度,不建议传值,如果需要控制图片大小,可以适当减小
zoomNumber1画布整体缩放比例,不建议传值,会覆盖各种机型的适配
translateXNumber0画布整体横向位移
translateYNumber0画布整体纵向位移
heightNumberheight * 2输出的图片的高度
backgroundString#ffffff画布的整体背景色
gradientBackgroundObjectnull画布整体的渐变背景色
finishFunctionnull绘制成功后回调函数, 返回值url,绘制图片的本地路径
progressFunctionnull绘制进度,返回值percent,0-100
errorFunctionnull绘制失败后回调函数,返回值object,包含具体原因

绘制失败的原因如下:

错误码原因说明
errcodeerrmsge
1000save canvas error保存图片失败
1001download pic error预下载图片失败
1002drawRect error绘制矩形失败
1003drawImage error绘制图片失败
1004drawText error绘制文本失败
1005drawCircle error绘制圆形图片失败
1006drawCircleImage error绘制圆形失败
1007drawLine error绘制线条失败
1008drawWxml error绘制Wxml失败
1009drawWxml preLoadImage error预下载Wxml图片失败

 

数据配置方式支持的格式

代码示例:

let data = {list: [{type: 'rect',x: 10,y: 10,style: {width: 150,height: 80,fill: '#3762ab',border: '10px solid #aaaaaa',}}
}

上述是一个矩形的创建方式,可看代码里的示例。下面是支持的属性:

矩形

属性类型是否必填说明
typeString'rect',声明为绘制矩形
xNumber坐标x
yNumber坐标y
style
widthNumber
heightNumber
fillString 或 Object填充颜色,支持渐变色
borderString边框,需要严格遵循 '10px dashed #540821' 格式
boxShadowString阴影,需要严格遵循 '10 20 20 rgba(0, 0, 0, 0.4)' 格式
dashArray虚线边框的间距和偏移

圆形

属性类型是否必填说明
typeString'circle',声明为绘制圆形
xNumber坐标x
yNumber坐标y
style
rNumber半径
fillString 或 Object填充颜色,支持渐变色
borderString边框,需要严格遵循 '10px dashed #540821' 格式
boxShadowString阴影,需要严格遵循 '10 20 20 rgba(0, 0, 0, 0.4)' 格式
dashArray虚线边框的间距和偏移

线条

属性类型是否必填说明
typeString'line',声明为绘制线条
xNumber起始坐标x
yNumber起始坐标y
x2Number终止坐标x
y2Number终止坐标y
style
widthNumber线条宽度
strokeString 或 Object填充颜色,支持渐变色
boxShadowString阴影,需要严格遵循 '10 20 20 rgba(0, 0, 0, 0.4)' 格式
dashArray有此属性则绘制虚线,传入值为虚线边框的间距和偏移

图片

属性类型是否必填说明
typeString'image',声明为绘制图片
xNumber坐标x
yNumber坐标y
urlString图片链接,支持 http/https 及本地图片,域名需要在mp平台加入白名单
style
widthNumber
heightNumber
borderString边框,需要严格遵循 '10px dashed #540821' 格式
boxShadowString阴影,需要严格遵循 '10 20 20 rgba(0, 0, 0, 0.4)' 格式
dashArray虚线边框的间距和偏移

圆形图片

属性类型是否必填说明
typeString'radius-image',声明为绘制圆形图片
xNumber坐标x
yNumber坐标y
urlString图片链接,支持 http/https 及本地图片,域名需要在mp平台加入白名单
style
rNumber半径
borderString边框,需要严格遵循 '10px dashed #540821' 格式
boxShadowString阴影,需要严格遵循 '10 20 20 rgba(0, 0, 0, 0.4)' 格式
dashArray虚线边框的间距和偏移

文本

属性类型是否必填说明
typeString'text',声明为绘制文本
xNumber坐标x
yNumber坐标y
textString文本内容
style
widthNumber文本最大宽,超过则换行
heightNumber文本高度
colorString字体颜色
fontSizeNumber字体大小,默认14
fontFamilyString字体样式
lineHeightNumber字体行高,默认14 * 1.2
fontWeightString字体粗细,默认normal
lineClampNumber文字的最大行数,超出则用 ... 截取
whiteSpaceString是否换行,默认wrap,如果传入nowrap,则不换行
textAlignString文本的水平对齐方式,默认left
borderString边框,需要严格遵循 '10px dashed #540821' 格式
backgroundString字体背景色
boxShadowString阴影,需要严格遵循 '10 20 20 rgba(0, 0, 0, 0.4)' 格式
dashArray虚线边框的间距和偏移
paddingString内边距,'10 10 10 10', 与css有区别,依次为左、上、右、下,可以不带单位

此外,上述所有的元素都可以增加 delay:true 属性,来实现延迟绘制。

wxml转换的方式

如上面的使用示例,声明type为wxml时,会查询绘制元素节点的样式并绘制。下表是对应属性:

属性类型是否必填说明
typeString'wxml',声明转换wxml
xNumber坐标x,用于修正位置
yNumber坐标y,用于修正位置
classString待查询绘制的节点类名,会查询所有相同的类名
limitString限定节点的外围容器,在取坐标时,取与它的相对位置

 


 目前支持的wxml类型如下,需要声明在节点上:

图片

属性类型是否必填说明
data-typeString'image',矩形图片
data-urlString图片链接
data-leftNumber修正横坐标位置
data-topNumber修正纵坐标位置

圆形图片

属性类型是否必填说明
data-typeString'radius-image',圆形图片
data-urlString图片链接
data-leftNumber修正横坐标位置
data-topNumber修正纵坐标位置

背景图片

属性类型是否必填说明
data-typeString'background-image',背景图片
data-leftNumber修正横坐标位置
data-topNumber修正纵坐标位置

文本

属性类型是否必填说明
data-typeString'text',文本
data-textString文本内容
data-leftNumber修正横坐标位置
data-topNumber修正纵坐标位置
data-paddingString内边距,与style叠加
data-backgroundString背景色

行内文本

属性类型是否必填说明
data-typeString'inline-text',行内文本
data-textString文本内容
data-leftNumber修正横坐标位置
data-topNumber修正纵坐标位置
data-paddingString内边距,与style叠加
data-backgroundString背景色

行内图片

属性类型是否必填说明
data-typeString'inline-image',矩形图片
data-urlString图片链接
data-leftNumber修正横坐标位置
data-topNumber修正纵坐标位置

行内文本与图片有特殊处理逻辑,当top值相同时,按照从左到右顺序排列,可能会与展现有差异。

此外,上述所有的元素都可以增加 delay:Number 属性,来实现延迟绘制, number范围:1-100,间接实现层级控制。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/117243.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

BurpSuite安装

下载 BurpSuite 下载 Java17 下载后确定版本 java -version获取启动器 密钥生成器 破解 将下载的 BurpSuite、启动器、密钥生成器&#xff0c;放入同一个目录 打开 CMD 进入该目录 启动密钥生成器 java -jar burp-keygen-scz.jar开启新的CMD&#xff0c;进入该目录 启动…

paddlepaddle使用实践过程中的问题记录

环境背景 python&#xff1a;3.10.11 系统&#xff1a;macOS Big Sur 11.7.10 cpu&#xff1a;Intel Core i7 2.6GHz 内存&#xff1a;16G paddle版本问题 初始安装的是的MacOS cpu 2.5.1版本&#xff0c;在python解释器中执行import paddle时报错&#xff1a; ImportError:…

SpringCache配置Redis有效解决缓存击穿和缓存雪崩问题

初始代码 作者参考的一篇CSDN的配置函数代码&#xff0c;实在不好意思&#xff0c;作者忘记是哪位博主了&#xff1a; /*** 设置CacheManager缓存规则* param factory* return*/Beanpublic CacheManager cacheManager(RedisConnectionFactory factory) {RedisSerializer<St…

Spring Boot - 启动主要流程

Spring Boot的启动主要流程可以概括为以下几个步骤&#xff1a; 加载Spring Boot配置&#xff1a; Spring Boot应用的启动从加载配置开始。Spring Boot会读取application.properties或application.yml等配置文件&#xff0c;将配置信息加载到Spring的Environment中&#xff0c;…

IOS屏幕旋转监听

IOS屏幕旋转 1.设计窗口,添加三个按钮 2.添加事件连接 3.按钮点击事件实现 先添加三个IBAction 实现IBAction 使用旋转立刻生效 -(IBAction)btnFixPortrait:(id)sender{//访问应用程序委托成员_app.mask UIInterfaceOrientationMaskPortrait;//设置窗口旋转属性[self setN…

企业安全—SDL概述篇

0x00 前言 众所周知&#xff0c;从源头开始就开发安全的代码&#xff0c;比产品已经成型之后付出的代价要小很多&#xff0c;也就是一直在说的安全左移的概念。最好就是从一开始&#xff0c;大家就用最安全的代码&#xff0c;或者是框架&#xff0c;那么开发出来的产品必然会减…

git rebase -i 详解

git rebase 命令简介 git rebase命令允许我们轻松地更改一系列提交&#xff0c;修改存储库的历史记录。我们可以重新排序、编辑或合并提交。一般常用git rebase来合并当前分支的多个commit记录&#xff08;压缩&#xff09;以及避免出现分支的交叉合并&#xff08;变基&#x…

ChatGPT课件汇总介绍

第二节:有效管理 Token,充分发挥 ChatGPT 的能力 OpenAI 官方计算token的测试地址:https://platform.openai.com/tokenizer 第三节:探索ChatGPT在不同领域的创新应用 1、小说撰写 1、我希望你能作为一个小说家。我会给你一个主题,请写出有创意的、吸引人的故事,能够长时…

MongoDB 学习笔记(基础)

概论 出现背景&#xff1a;MongoDB 是文档型数据库&#xff0c;由于传统的关系型数据库&#xff08;如 MySQL&#xff09;&#xff0c;在数据操作的“三高”需求以及应对 web 的网站需求面前显得有些吃力&#xff0c;在此环境下 MongoDB 出世了 三高需求&#xff1a; (1) 对数…

进程的优先级与LAMP项目部署实战

一、进程的优先级&#xff08;扩展&#xff09; 1、什么是进程的优先级 Linux是一个多用户、多任务的操作系统&#xff0c;系统中通常运行着非常多的进程。哪些进程先运行&#xff0c;哪些进程后运行&#xff0c;就由进程优先级来控制 思考&#xff1a;什么时候需要用到进程…

力扣-python-两数相加

题解 1: # Definition for singly-linked list. # class ListNode(object): # def __init__(self, val0, nextNone): # self.val val # self.next nextclass Solution(object):def addTwoNumbers(self, l1, l2):""":type l1: ListNode:t…

【MATLAB源码-第56期】基于WOA白鲸优化算法和PSO粒子群优化算法的三维路径规划对比。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 1.粒子群算法&#xff08;Particle Swarm Optimization&#xff0c;简称PSO&#xff09;是一种模拟鸟群觅食行为的启发式优化方法。以下是其详细描述&#xff1a; 基本思想&#xff1a; 鸟群在寻找食物时&#xff0c;每只鸟都…

2023-10-17 LeetCode每日一题(倍数求和)

2023-10-17每日一题 一、题目编号 2652. 倍数求和二、题目链接 点击跳转到题目位置 三、题目描述 给你一个正整数 n &#xff0c;请你计算在 [1&#xff0c;n] 范围内能被 3、5、7 整除的所有整数之和。 返回一个整数&#xff0c;用于表示给定范围内所有满足约束条件的数…

华纳云:连接mysql出现2059错误怎么解决

MySQL连接错误2059通常表示MySQL服务器拒绝了连接。这种错误可能由多种原因引起&#xff0c;以下是一些可能的解决方法&#xff1a; 检查MySQL服务器是否正在运行&#xff1a; 确保MySQL服务器正在正常运行。您可以使用以下命令检查MySQL服务器的状态&#xff1a; systemctl st…

Object.prototype.toString.call() 和 instanceOf 和 Array.isArray() 详解

解析: 理解 Object.prototype.toString.call(), instanceof, 和 Array.isArray() 是 JavaScript 中重要的类型检查工具。以下是一个较为详细的解释和示例代码&#xff0c;帮助你理解它们的工作原理和使用场景 Object.prototype.toString.call()&#xff1a; Object.prototyp…

rust - 理解borrow trait

简介 borrow trait 是处理借用(即其它语言中的引用)的 trait,变量的所有权不会转移.泛型定义如下: pub trait Borrow<Borrowed: ?Sized> {/// Immutably borrows from an owned value.fn borrow(&self) -> &Borrowed; }其中包含一个 borrow(&self)的方…

动手学深度学习—含并行连结的网络GoogLeNet(代码详解)

目录 1. Inception块3. GoogLeNet模型3. 训练模型 GoogLeNet吸收了NiN中串联网络的思想&#xff0c;并在此基础上做了改进&#xff0c;并且在2014年的ImageNet图像识别挑战赛中获得了不错的效果。 1. Inception块 GoogLeNet论文解决了多大的卷积核最合适的问题。 Inception块…

PHP 在线考试管理系统mysql数据库web结构layUI布局apache计算机软件工程网页wamp

一、源码特点 PHP 在线考试管理系统是一套完善的web设计系统 layUI技术布局 &#xff0c;对理解php编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。 PHP 在线考试系统1 代码 https://download.csdn.net/download/qq_41…

【C++面向对象】5. this指针

文章目录 【 1. 基本原理 】【 2. 实例 】 【 1. 基本原理 】 在 C 中&#xff0c;只有成员函数才有 this 指针&#xff08;友元函数没有 this 指针&#xff0c;因为友元不是类的成员&#xff09;&#xff0c;this 指针是所有成员函数的隐含参数。 在成员函数内部&#xff0c;…

线性表操作的实现--顺序表

本文参考朱战力老师的数据结构与算法--使用C语言一书 文章目录 前言 一、线性表是什么&#xff1f; 二、具体实现 1.顺序表的定义 2.初始化ListInitiate&#xff08;L&#xff09; 3.求当前元素个数ListLength&#xff08;L&#xff09; 4.插入元素ListInsert&#xff08;L&…