技术文档

该文档现在支持：

• 文字 data-type ='text'
• 图片 data-type ='image'
• 圆角图片 data-type='radius-image'
• 背景图片 data-type='background-image'

使用文档：(示例可见/wxminiprogram/main/components/dialog/ConvertTextToPicture/index.js)

///建议宽高设置成
let query = this.createSelectorQuery();
if (!query) {
  return;
}
query.select("#convert-to-picture-container").boundingClientRect();
query.exec((res) => {
  if (res && res.length) {
    const { width = 0, height = 0 } = res[0] || {};
  }
});

// ***
// your logic
// ***
this.drawImage = new Wxml2Canvas({
  width,
  height,
  obj: this,
  borderRadius: 12,
  element: "squareCanvas",
  finish(coverImage) {
    wx.hideLoading();
    // 这里的this 指向内部
  },
  error() {},
});
this.drawImage.draw(
  {
    type: "wxml", //类型
    class: ".draw_canvas", //需要转视图的class
    limit: ".convert-to-picture-container", // 外层的box
    x: 0,
    y: 0,
  },
  this
);

wxml：

<view wx:elif="{{cardinfo && sid}}" class="share-topic-wrapper draw_share_canvas" style="background-image: url({{cover}})" data-type="background-image">
<view class="share-topic-container">
  <view class="share-works-form">
      <view class="share-works-form-label">
          <text class="draw_share_canvas" data-type="text" data-text="作">作</text>
          <text class="draw_share_canvas" data-type="text" data-text="者：">者：</text>
      </view>
      <view class="share-works-form-value">
          <image class="share-works-form-value-img draw_share_canvas" data-type="image"
                 data-url="{{cardinfo.author.avatar}}" src="{{cardinfo.author.avatar}}"></image>
          <text class="share-works-form-value-txt draw_share_canvas" data-type="text"
                data-text="{{cardinfo.author.nickName}}"
                data-lineClamp="{{1}}">{{cardinfo.author.nickName}}</text>
      </view>
  </view>
  <view class="share-works-form">
      <view class="share-works-form-label draw_share_canvas" data-type="text" data-text="资料大小：">
          资料大小：
      </view>
      <view class="share-works-form-value share-works-form-value1 draw_share_canvas"
            data-type="text"
            data-lineClamp="{{1}}"
            data-text="{{cardinfo.size}}">
          {{cardinfo.size}}
      </view>
  </view>
  <view class="share-works-form">
      <view class="share-works-form-label draw_share_canvas">
          <text class="draw_share_canvas" data-type="text" data-text="格">格</text>
          <text class="draw_share_canvas" data-type="text" data-text="式：">式：</text>
      </view>
      <view class="share-works-form-value share-works-form-value1">
          <image class="share-works-form-value-img draw_share_canvas" data-type="image"
                 data-url="{{cardinfo.img}}" src="{{cardinfo.img}}"></image>
          <text class="share-works-form-value-txt draw_share_canvas"
                data-type="text"
                data-text="{{cardinfo.type}}">{{cardinfo.type}}</text>
      </view>
  </view>
  <view class="share-works-tags" wx:if="{{cardinfo.tags && cardinfo.tags.length}}">
      <view class="share-works-tags-item draw_share_canvas"
            wx:for="{{cardinfo.tags}}"
            wx:key="index"
            data-type="text"
            data-text="{{item}}"
            data-maxwidth="{{320}}">
          {{item}}
      </view>
  </view>
  <view class="share-works-desc draw_share_canvas"
        data-type="text"
        data-text="{{cardinfo.description}}"
        data-lineClamp="{{3}}"
        wx:if="{{cardinfo.description}}">
      {{cardinfo.description}}
  </view>
</view>
</view>

技术方案

1、利用createSelectorQuery获取SelectorQuery对象

2、 NodesRef SelectorQuery.selectAll(string selector) 获取在当前页面下所有标记的选择器节点。获得NodesRef对象

3、 SelectorQuery NodesRef.fields(Object fields, NodesRef.FieldsCallback callback)获取节点的相关信息。需要获取的字段在fields中指定。返回值是 nodesRef 对应的selectorQuery。

4、 根据制定computedStyle的属性进行元素的排列 渲染。computed获取的属性

图片

1、 用法

| 属性 | 类型 | 是否必填 | 说明 | | --------- | ------ | -------- | ----------------- | | data-type | String | 是 | 'image'，矩形图片 | | data-url | String | 是 | 图片链接 | | data-left | Number | 否 | 修正横坐标位置 | | data-top | Number | 否 | 修正纵坐标位置 |

2、 computed属性

| type | String | 是 | 'radius-image'，声明为绘制圆形图片 | | ------------ | ------ | ---- | ------------------------------------------------------------ | | x | Number | 是 | 坐标x | | y | Number | 是 | 坐标y | | url | String | 是 | 图片链接，支持 http/https 及本地图片，域名需要在mp平台加入白名单 | | style | | | | | r | Number | 是 | 半径 | | border | String | 否 | 边框，需要严格遵循 '10px dashed #540821' 格式 | | boxShadow | String | 否 | 阴影，需要严格遵循 '10 20 20 rgba(0, 0, 0, 0.4)' 格式 | | dash | Array | 否 | 虚线边框的间距和偏移 | | borderRadius | String | 否 | 圆角 |

圆形图片

1、 用法

| 属性 | 类型 | 是否必填 | 说明 | | --------- | ------ | -------- | ------------------------ | | data-type | String | 是 | 'radius-image'，圆形图片 | | data-url | String | 是 | 图片链接 | | data-left | Number | 否 | 修正横坐标位置 | | data-top | Number | 否 | 修正纵坐标位置 |

2、 computed属性

| type | String | 是 | 'radius-image'，声明为绘制圆形图片 | | ------------ | ------ | ---- | ------------------------------------------------------------ | | x | Number | 是 | 坐标x | | y | Number | 是 | 坐标y | | url | String | 是 | 图片链接，支持 http/https 及本地图片，域名需要在mp平台加入白名单 | | style | | | | | r | Number | 是 | 半径 | | border | String | 否 | 边框，需要严格遵循 '10px dashed #540821' 格式 | | boxShadow | String | 否 | 阴影，需要严格遵循 '10 20 20 rgba(0, 0, 0, 0.4)' 格式 | | dash | Array | 否 | 虚线边框的间距和偏移 | | borderRadius | String | 否 | 圆角 |

背景图片

| 属性 | 类型 | 是否必填 | 说明 | | --------- | ------ | -------- | ---------------------------- | | data-type | String | 是 | 'background-image'，背景图片 | | data-left | Number | 否 | 修正横坐标位置 | | data-top | Number | 否 | 修正纵坐标位置 |

文本：

1、 用法

| 属性 | 类型 | 是否必填 | 说明 | | --------------- | ------ | -------- | ----------------------------------- | | data-type | String | 是 | 'text'，文本 | | data-text | String | 是 | 文本内容 | | data-left | Number | 否 | 修正横坐标位置 | | data-top | Number | 否 | 修正纵坐标位置 | | data-padding | String | 否 | 内边距，与style叠加 | | data-background | String | 否 | 背景色 | | data-lineClamp | Numer | 否 | 文本显示几行 | | data-endSuffix | String | 否 | 与lineClamp同步使用，用于末尾省略号 | | data-maxwidth | Number | 否 | 绘制的边界 |

2、 computed属性

| 属性 | 类型 | 是否必填 | 说明 | | ------------ | ------ | -------- | ------------------------------------------------------------ | | type | String | 是 | 'text'，声明为绘制文本 | | x | Number | 是 | 坐标x | | y | Number | 是 | 坐标y | | text | String | 否 | 文本内容 | | style | | | | | width | Number | 否 | 文本最大宽，超过则换行 | | height | Number | 否 | 文本高度 | | color | String | 否 | 字体颜色 | | fontSize | Number | 否 | 字体大小，默认14 | | fontFamily | String | 否 | 字体样式 | | lineHeight | Number | 否 | 字体行高，默认14 * 1.2 | | fontWeight | String | 否 | 字体粗细，默认normal | | lineClamp | Number | 否 | 文字的最大行数，超出则用 ... 截取 | | whiteSpace | String | 否 | 是否换行，默认wrap，如果传入nowrap，则不换行 | | textAlign | String | 否 | 文本的水平对齐方式，默认left | | border | String | 否 | 边框，需要严格遵循 '10px dashed #540821' 格式 | | background | String | 否 | 字体背景色 | | boxShadow | String | 否 | 阴影，需要严格遵循 '10 20 20 rgba(0, 0, 0, 0.4)' 格式 | | dash | Array | 否 | 虚线边框的间距和偏移 | | padding | String | 否 | 内边距，'10 10 10 10', 与css有区别，依次为左、上、右、下，可以不带单位 | | borderRadius | String | 否 | 圆角 |

矩形:

1、 用法

| 属性 | 类型 | 是否必填 | 说明 | | --------- | ------ | -------- | ------------ | | data-type | String | 是 | 'rect'，文本 |

2、computed属性

| x | Number | 是 | 坐标x | | --------- | ---------------- | ---- | --------------------------------------------------------- | | y | Number | 是 | 坐标y | | style | | | | | width | Number | 是 | 宽 | | height | Number | 是 | 高 | | fill | String 或 Object | 否 | 填充颜色，支持渐变色 | | border | String | 否 | 边框，需要严格遵循 '10px dashed #540821' 格式 | | boxShadow | String | 否 | 阴影，需要严格遵循 '10 20 20 rgba(0, 0, 0, 0.4)' 格式 | | dash | Array | 否 | 虚线边框的间距和偏移 |

以上所有元素都能根据data-delay 属性来控制先后绘制的顺序