share-poster-webapp v1.0.1

技术文档

该文档现在支持：

• 文字 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、 用法

2、 computed属性

圆形图片

1、 用法

2、 computed属性

背景图片

文本：

1、 用法

2、 computed属性

矩形:

1、 用法

2、computed属性

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