微信小程序 canvas type = 2d 绘制海报心得（包括怎么绘制图片和圆角图片和圆角矩形等）

最新推荐文章于 2024-07-31 13:57:35 发布

要不，在试一下

最新推荐文章于 2024-07-31 13:57:35 发布

阅读量2.4k

点赞数 3

文章标签：小程序微信

本文链接：https://blog.csdn.net/qq_36571836/article/details/120334304

版权

微信小程序 canvas type=2d 使用心得

为了方便这里我封装成了一个component
- 然后说说怎么使用最新的方法(使用方法类似于html中的canvas可以进行参考)获取--canvas demo实例和画笔ctx----method中封装了各种绘制的方法*（文字，图片，圆角图片，圆角矩形等,还有利用for循环进行绘制多个圆角文字）*

为了方便这里我封装成了一个component

在这里插入图片描述
shop-canvas 就是我当前的canvas-----之后的绘图操作都在其中–可以自行更改

在这里插入图片描述
然后在index.json中引入该页面级的 canvas组件

<shop-canvas wx:if="{
   {shopData}}" shopData="{
   {shopData}}" renderCanvas="{
   {renderCanvas}}"  class="{
   {false ?  'hidden_canvas' : ''}}"></shop-canvas>
<view style="padding: 20rpx;text-align: center;margin: 50rpx;border-radius: 20rpx;color: #f00; border: 1rpx solid #f00" bindtap="onDownloadShopInfo" wx:if="{
   {shopData}}">点击下载当前门店信息</view>

这里shopData为模拟的数据---进行判断--只有从后端获取到数据后--再进行后续操作---页面加入判断--如果没有数据，那么绘制海报的按钮就不进行展示

.hidden_canvas {
   
  position: fixed;
  left: -9999999rpx;
}
//这里加入 这个class类的原因是  因为我绘制的canvas不需要在页面上进行 展示---绘制完成后--直接进行下载到手机操作了。---根据自己情况进行处理--是否加入

然后说说怎么使用最新的方法(使用方法类似于html中的canvas可以进行参考)获取–canvas demo实例和画笔ctx----method中封装了各种绘制的方法（文字，图片，圆角图片，圆角矩形等,还有利用for循环进行绘制多个圆角文字）

注意：可以自行选择–method下的方法

// index/shop-canvas/canvas.js
Component({
   
  /**
   * 组件的属性列表
   */
  properties: {
   
    shopData: {
    // 获取数据
      type: Object,
      value: {
   }
    },
    renderCanvas: {
    // 只有在父组件点击下载按钮的时候--开始进行绘制
      type: Boolean,
      value: false
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
   
    　startX: 14, // 这个在drawMultipleArcTo的时候用到---使用for循环进行一次绘制多个圆角文字并且自动换行
    　startY: 20
  },

  /**
   * 组件的方法列表
   */
  methods: {
   
    // 获取canvas实例和画笔
    getMyCanvasAndCtx(id) {
   
      return new Promise(resolve => {
   
        const query = wx.createSelectorQuery().in(this)//因为在组件中----所以要加入 .in(this)如果在页面中可以去掉
        query.select(`#${
   id}`)
          .fields({
   
            node: true,
            size: true
          })
          .exec((res) => {
   
            const canvas = res[0].node
            const ctx = canvas.getContext('2d')

            const dpr = wx.getSystemInfoSync().pixelRatio
            // 这里是为了把画布放大dpr倍进行绘制--利用css中达到在手机中 高清显示
            canvas.width = res[0].width * dpr
            canvas.height = res[0].height * dpr
            ctx.scale(dpr, dpr)
            this.setData({
   
              canvas: canvas,
              ctx: ctx
            }, () => {
   
              resolve({
   
                canvas,
                ctx
              })
            })
          })
      })
    },
    //绘制图片的方法
    drawImageMethod({
   
      imgUrl,
      x,
      y,
      imgWidth,
      imgHeight
    }) {
   
      return new Promise(resolve => {
   
        //绘制头像
        const img = this