中秋赏月：基于vite.js+vue3.js+fabric.js在线制作月饼

MoonCake

在线制作中秋月饼

言简意赅，我主要分享一下思路

体验基于vite.js + vue3.js 的快速开发过程，并将代码发布到github

技术方案

• vite.js： https://vitejs.dev/
• vue3.js: https://cn.vuejs.org/index.html
• fabric.js: http://fabricjs.com/
• FileSaver.js https://www.npmjs.com/package/file-saver

开始项目

pnpm create vite
1

选择vue模板

核心代码

<template>
  <div class="app">
    <div class="canvas-warp">
      <canvas
        width="400"
        height="400"
        id="canvas"
      >canvas>
    div>

    <button
      style="margin-top: 20px"
      class="button"
      @click="handleExportClick"
    >
      制作月饼
    button>
  div>
template>

<script>
// created at 2022-08-23
import { fabric } from 'fabric'
import FileSaver from 'file-saver'

export default {
  name: 'App',

  props: {},

  components: {},

  data() {
    return {
      canvas: null,
    }
  },

  computed: {},

  methods: {
    async getData() {},

    // 导出为图片
    handleExportClick() {
      let base64 = this.canvas.toDataURL('png')
      FileSaver.saveAs(base64, 'mooncake.png')

      // 输出 png 图片可能会打断 canvas 的渲染
      this.canvas.requestRenderAll()
    },
  },

  mounted() {
    const canvas = new fabric.Canvas('canvas', {
      preserveObjectStacking: true, // 被选中时保持原有层级
      // selection: false,
    })
    // canvas.selection = false

    // 绘制一个圆
    const circle = new fabric.Circle({
      // top: 100,
      // left: 100,
      radius: 100, // 圆的半径 50
      fill: 'rgb(250,201,81)',
    })

    canvas.add(circle)

    circle.viewportCenter()

    // 绘制月饼馅
    const text = new fabric.Textbox('五仁月饼', {
      fill: 'rgb(180,110,48)',
    })
    canvas.add(text)

    text.viewportCenter()

    this.canvas = canvas
    // console.log(canvas.getObjects())
  },

  created() {
    this.getData()
  },
}
script>

<style lang="less">style>

<style lang="less" scoped>
.app {
  text-align: center;
}

.canvas-warp {
  border: 1px solid #ccc;
  box-sizing: border-box;
}

#canvas {
  width: 100%;
  height: 100%;
}

@media only screen and (max-width: 768px) {
  .app {
    padding: 0 8px;
  }

  .button {
    width: 80%;
    padding: 20px 0;
    font-size: 1.5rem;
  }

  .canvas-warp{
    padding: 10px;
  }
}
style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124

整体不难，调用Fabric.js 的接口，绘制一个基本的圆，就是月饼，再绘制一个文字，就完成了月饼的制作。

Fabric.js还提供了编辑功能，可以将文字修改为你想要的月饼馅，然后导出图片，直接将绘制完成的月饼下载到本地，发给你想要送月饼的人即可。

最后还通过github提供的github Actions 自动将提交的代码打包发布到github page。

这样就完成了项目创建到打包发布的完整过程。

源码：https://github.com/mouday/moon-cake

在线体验制作月饼：https://mouday.github.io/moon-cake/

参考文章
Fabric.js 从入门到________:
https://juejin.cn/post/7026941253845516324#heading-15
Canvas如何做款祝福月饼【中秋特别版】
https://juejin.cn/post/7005356616685977630
CSS 按钮
https://www.runoob.com/css3/css3-buttons.html