微信小程序 canvas 处理图片的缩放移动旋转问题

news2024/12/24 8:25:35

这里使用到了一个插件，canvas-drag，来实现大部分功能的

上效果

直接上代码吧~

wxml

<div class="container">
  <canvas-drag id="canvas-drag" graph="{{graph}}" width="700" height="750" enableUndo="{{true}}"></canvas-drag>
</div>

<view class="btn" bindtap="onAddImage">添加图片</view>
<view class="btn" bindtap="onAddText">添加文字</view>
<view class="btn" bindtap="onExport">导出图片</view>
<view class="btn" bindtap="onChangeColor">改变文字颜色</view>
<view class="btn" bindtap="onChangeBgColor">改变背景颜色</view>
<view class="btn" bindtap="onExportJSON">导出模板</view>
<view class="btn" bindtap="onClearCanvas">清空画布</view>
<view class="btn" bindtap="onUndo">后退</view>

创建了一个由canvas-drag封装过的画布，然后增加了一些按钮

wxss

.btn{
  padding: 10rpx 20rpx;
  float:left;
  margin:10rpx;
  border:solid 1px #dfdfdf;
  border-radius: 10rpx;
}

canvas-drag canvas {
  border: 1px solid black;
}

.container {  
  display: flex;  
  justify-content: center; /* 水平居中 */  
  /* align-items: center; 如果需要垂直居中，也可以添加这个属性   */
  /* height: 100vh; 如果需要垂直居中，可以设置容器的高度为视口高度   */
}

json

{
  "navigationBarTitleText": "",
  "usingComponents": {
    "canvas-drag": "/static/canvas-drag/index"
  }
}

//index.js
import CanvasDrag from '../../static/canvas-drag/canvas-drag';
const utils_storageUtil = require("../../utils/storageUtil.js");
Page({
    data: {
        graph: {},
    },
    /**
     * 添加图片
     */
    onAddImage() {
        wx.chooseImage({
            success: (res) => {
                this.setData({
                    graph: {
                        w: 200,
                        h: 200,
                        type: 'image',
                        url: res.tempFilePaths[0],
                    }
                });
            }
        })
    },

    /**
     * 添加文本
     */
    onAddText() {
        this.setData({
            graph: {
                type: 'text',
                text: 'helloworld',
            }
        });
    },

    /**
     * 导出图片
     */
    onExport() {
        CanvasDrag.export()
            .then((filePath) => {
                console.log(filePath);
                utils_storageUtil.setStorage("image_url",filePath)
                wx.previewImage({
                    urls: [filePath]
                })
            })
            .catch((e) => {
                console.error(e);
            })
    },

    /**
     * 改变文字颜色
     */
    onChangeColor() {
        CanvasDrag.changFontColor('rgb(200,200,200)');
    },

    /**
     * 改变背景颜色
     */
    onChangeBgColor() {
        CanvasDrag.changeBgColor('rgb(200,200,200)');
    },

    /**
     * 导出当前画布为模板
     */
    onExportJSON(){
        CanvasDrag.exportJson()
          .then((imgArr) => {
            console.log(JSON.stringify(imgArr));
        })
          .catch((e) => {
              console.error(e);
          });
    },

     onClearCanvas:function(event){
        let _this = this;
        _this.setData({canvasBg:null});
        CanvasDrag.clearCanvas();
    },

    onUndo:function(event){
        CanvasDrag.undo();
    },

    onSave:function(){
       
    }
});

这里说明一点~CanvasDrag的路径是引入插件的路径，下面的utils_storageUtil是存储功能的，可不加，utils_storageUtil是在导出图片那块儿使用到的，删掉即可

emmmm，忘记给插件地址了~

https://github.com/wxa-component/wxa-comp-canvas-drag