【前端】【vue.js】【参考项目】vue-konva-project

概述

• 目标

  • 制作在线ppt编辑排版网页，支持插入文本框，图片，添加操作逻辑人性的缩放移动功能

• 项目地址

  • CSDN博客

  • GitHub项目

• 项目介绍

  • 实现类似美图秀秀网页版的拼图工具

• 项目框架

  • vue.js

    • Javascript框架

  • Konva.js

    • Canvas绘图框架

  • iView

    • UI组件库

目录结构

• assets
• libs
• views
• components
  • TemplateStage
    • index.vue
    • LayerFont.vue
    • LayerGroup.vue
  • Template.vue
  • TemplateConfig.vue
• store
  • modules
    • material.js
    • template.js
  • index.js
• App.vue
• main.js
• router.js

Store Directory

• Vuex

  • 简介

    • vue.js项目中的数据集合，存储在store的数据任意时刻对组件公开，实时响应修改更新。

  • Concepts

    • State
      • 存放所有数据
    • Getters
      • 获取数据的句柄
    • Mutations
      • 修改数据的句柄（只支持同步操作）
    • Actions
      • 操作数据的句柄（可以支持异步操作）
    • Modules
      • 将store模块化为多个module分类管理

Components Directory

• Template.vue
  • 主页面组件，组件内负责结构排版以及“模板名称panel”与“画布配置panel”
  • 调用TemplateStage以及TemplateConfig
• TemplateConfig.vue
  • 侧边栏panel组件，组件内负责“模板框配置panel”以及“装饰配置panel”
  • 调用CommonSliderBar.vue绘制拖动条
• TemplateStage
  • 画板绘制组件，利用vue-konva绘制stage

未完待续…