中秋赏月：基于vite.js+vue3.js+fabric.js在线制作月饼-阿里云开发者社区

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

2022-09-05 227

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 中秋赏月：基于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

选择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>