使用小程序canvas写一个简单的图片应用

发布日期： 2020-12-16 阅读量： 作者： 网络

小程序开发教程栏目介绍使用canvas写一个图片

推荐（免费）：小程序开发教程

应用展示

截图

需求

既然是小应用，那就希望最终成品是有 适用的场景 且是 有价值 的

需求来源

这个应用需求的灵感

在以前工作生活中，经常会无意中获得同事的美照

这时我们想要把这张照片做成表情包

一般给图片添加几个说明文字

一个有意思的沟通工具（表情包）就完成了

需求分析

基于以上需求的拆解

可以将要应用功能实现整理一下

用户需要上传一张图片
可以添加文字
文字可以作 样式调整 和 旋转缩放
另外我们希望还可以插入一些贴图
贴图可以做 旋转缩放
用户导出图片到相册

实现

github仓库 https://github.com/luosijie/f...

如果喜欢我的项目，欢迎给个星星鼓励一下

这个应用是用小程序开发的

使用框架：mpx
使用技术：小程序canvas

状态管理

import { createStore } from '@mpxjs/core'

const store = createStore({
  state: {
    cavas: null,         // cnavas实例
    ctx: null,           // canvas上下文实例
    elements: [],        // canvas元素
    activeIndex: null,   // 当前编辑中的元素索引
    mode: 'background',  // 当前编辑模式：background, text, sticker
    fontStyle: {         // 文字默认样式
      opacity: 1,
      fillStyle: '#000000',
      strokeStyle: '#000000'
    }
  },
  mutations: {
    setCanvas (state, data) {
      state.canvas = data
    },
    setCtx (state, data) {
      state.ctx = data
    },
    setElements (state, data) {
      state.elements = data
    },
    setMode (state, data) {
      state.mode = data
    },
    setActiveIndex (state, data) {
      state.activeIndex = data
    },
    setFontStyle (state, { key, data }) {
      state.fontStyle[key] = data
    },
    // 添加文字
    addText (state) {
      const size = 50
      const string = '请输入文字'
      const text = {
        type: 'text',
        data: string,
        scale: 1,
        size,
        left: 100,
        top: 100,
        rotate: 0,
        opacity: state.fontStyle.opacity,
        fillStyle: state.fontStyle.fillStyle,
        strokeStyle: state.fontStyle.strokeStyle
      }
      state.elements.push(text)
      state.activeIndex = state.elements.length - 1
    },
    // 添加贴图
    addSticker (state, data) {
      state.elements.push(data)
      state.activeIndex = state.elements.length - 1
    },
    // 删除当前选中
    deleteActiveELement (state) {
      state.elements.splice(state.activeIndex, 1)
      state.activeIndex = null
    },
    // 清空画布
    clear (state) {
      state.elements = []
      state.activeIndex = null
    }
  }
})

export default store

# 前端 # canvas # 小程序

上一篇: 怎么在Linux创建文件？

下一篇: PHP 函数如何获取输入数据？

使用小程序canvas写一个简单的图片应用

随便看看