本系列教程是教大家如何根据开源js绘图库,打造一个属于自己的在线绘图软件。当然,也可以看着是这个绘图库的开发教程。如果你觉得好,欢迎点个赞,让我们更有动力去做好!

本系列教程重点介绍如何开发自己的绘图软件,因此,react基础和框架不在此介绍。可以推荐react官网学习,或《React全家桶免费视频》。

本系列教程源码地址:Github

前面教程一,搭建了一个基础框架,现在我们来实现顶部导航菜单栏功能。

一、react组件间通信 - 菜单事件

这里,我们通过redux方式来实现组件间消息通信。UmiJS做了一点封装,使用更简单。

1. 新建store - model

我们在src/models文件夹下新建event.ts文件,专门用于消息事件的store处理。 主要包含:

  • namespace - 命名空间
  • state - 数据
  • reducers - 数据搬运工

给没有接触过redux的同学简单介绍下,会的请自动跳过: models是数据存储的地方。用namespace来进行模块划分或避免命名冲突;state:类似于react的state,专门用于存放数据;reducers:接收更新命令,根据命令参数(state :原数据;action:新行为参数数据),然后加上自己的业务逻辑,去实现如何更新数据。比如下面,只是简单的赋值,没有额外的业务逻辑。 注意,有个硬性规定就是,reducers要返回一个新数据副本,而不是直接修改models里面的state。因此,这里return下面的第一行(...state)就是先拷贝原始state所有属性,然后第二、三行,赋值新数据。

reducers: {
emit(state, action) {
return {
...state,
event: action.payload.event,
data: action.payload.data,
};
},
},
复制代码

2. 在onMenuClick里,用dispatch发送修改数据命令

UmiJs + DvaJS已经自动封装dispatch到react的props里了,我们直接拿来使用。 目前为止,我们的菜单事件很简单,没有额外数据,我们就直接dispatch发生菜单命令(key值)就好。 其中,type表示在store的所有reducers(不仅仅是上面的model,还包含其他所有model)中查找用哪个函数处理数据,格式:命名空间(event)/reducers函数(emit)。payload,更新数据用的参数。

this.props.dispatch({
type: 'event/emit',
payload: {
event: key
}
});
复制代码

3. 在需要接收菜单消息的page页面,connect连接绑定数据

  1. 导入连接函数:import { connect } from 'dva';
  2. 绑定connect:在pages/index.tsx底部添加:
export default connect((state: any) => ({ event: state.event }))(Index);
复制代码

上面,state:any是指整个store,我们这里暂时只用到event,故只返回event加入到pages/index的props。

4. 在page页面componentDidUpdate,接收消息

componentDidUpdate() {
if (this.props.event !== this.state.event) {
this.setState({ event: this.props.event });
if (this['handle_' + this.props.event.event]) {
this['handle_' + this.props.event.event](this.props.event.data);
}
}
}
复制代码

我们先判断消息是否已经处理过,避免无限循环。然后交给具体函数处理。

5. 最后,画布接口参考开发文档

www.yuque.com/alsmile/top…

二、react组件间通信 - 右上角状态栏

1. 新建store - model

还是先新建一个store用于通信,src/models/canvas.data.ts。这个model用于全局canvas的数据保存。

2. 监听画布canvas消息,dispatch最新状态

在src/pages/index.ts里,前面已经设置监听了canvas的消息onMessage函数。 现在我们添加‘resize’,‘scale’,‘locked’等事件的处理:

      case 'resize':
case 'scale':
case 'locked':
if (this.canvas) {
this.props.dispatch({
type: 'canvas/update',
payload: {
data: this.canvas.data
}
});
}
break;
复制代码

3. 在layouts/headers.tsx页面,connect连接绑定数据

import { connect } from 'dva';

export default connect((state: any) => ({ canvasData: state.canvas }))(Headers);
复制代码

4. render函数显示即可

render(): React.ReactNode {
const { data } = this.props.canvasData;
const scale = Math.floor(data.scale);
......
}
复制代码

这里,我们没有特别业务处理,直接格式化显示即可。

三、本篇最后

顶部菜单导航栏基础功能完成。还是欢迎大家补充并提交GitHub的pr: 0. 阅读开发文档,了解相关属性。

  1. fork仓库到自己名下
  2. 本地修改并提交到自己的git仓库
  3. 在自己的fork仓库找到 “Pull request” 按钮,提交

其他

右键菜单和其他功能页面待续。

开源项目不易,欢迎大家一起参与,或资助服务器:

【前端新手也能做大项目】:跟我一起,从零打造一个属于自己的在线Visio项目实战【ReactJS + UmiJS + DvaJS】(二)的更多相关文章

  1. Netty+MUI从零打造一个仿微信的高性能聊天项目,兼容iPhone/iPad/安卓

    要说到微信,我相信是个人都应该知道,几乎人人都会安装这款社交APP吧,它已经成为了我们生活中不可缺少的一份子. 我记得我上大学那会刚接触Java,做的第一个小项目就是基于J2SE的聊天室,使用Java ...

  2. 【前端vue进阶实战】:从零打造一个流程图、拓扑图项目【Nuxt.js + Element + Vuex】 (一)

    本系列教程是用Vue.js + Nuxt.js + Element + Vuex + 开源js绘图库,打造一个属于自己的在线绘图软件,最终效果:topology.le5le.com .如果你觉得好,欢 ...

  3. 打造一个高逼格的android开源项目——小白全攻略 (转)

    转自:打造一个高逼格的android开源项目 小引子 在平时的开发过程中,我们经常会查阅很多的资料,最常参考的是 github 的开源项目.通常在项目的主页面能看到项目的简介和基本使用,并且时不时能看 ...

  4. Struts2SpringHibernate整合示例,一个HelloWorld版的在线书店(项目源码+详尽注释+单元测试)

    Struts2,Spring,Hibernate是Java Web开发中最为常见的3种框架,掌握这3种框架是每个Java Web开发人员的基本功. 然而,很多初学者在集成这3个框架的时候,总是会遇到各 ...

  5. git 自己创建了一个项目A,我的同事fork一个B,当我的项目更新的时候,怎么样在他fork的repo上进行相应的更新?

    先把B clone到本地 git clone B_REPOSITORY_URL 再cd到本地B的目录,把A作为一个remote加到本地的B中(一般命名为upstream) git remote add ...

  6. 如何保证前端项目上线后的安全?webfunny已总结前端最关键的12大指标

    实时监控大屏   众所周知:实时流量大屏,是用来监控前端项目上线质量的. 如大家所知,监控系统会监控线上应用的各项指标,如:错误.白屏.耗时等等,但是仔细一想,即使有这些监控,我们也不一定能够保证线上 ...

  7. Web前端新手经典学习路线

    做前端开发八九年的时间,到2015年的时候,Web前端因为HTML5技术的高速发展,成为IT行业中最受欢迎和未来需求人才发展最好的职业,各个行业都想转行做前端开发,包括一些在校的学生,土木工程,一些不 ...

  8. 如何打造一个"逼格"的web前端项目

    最近利用空余的时间(坐公交车看教程视频),重新了解了前后端分离,前端工程化等概念学习,思考如何打造一个“逼格”的web前端项目. 前端准备篇 前端代码规范:制定前端开发代码规范文档. PS:重中之中, ...

  9. BAT、网易、京东等如何做大数据风控的?

    大数据风控目前应该是前沿技术在金融领域的最成熟应用,相对于智能投顾.区块链等还在初期的金融科技应用,大数据风控目前已经在业界逐步普及,从BATJ这样的大企业,到交易规模比较大的网贷平台,再到做现金贷. ...

随机推荐

  1. [Abp vNext 源码分析] - 11. 用户的自定义参数与配置

    一.简要说明 文章信息: 基于的 ABP vNext 版本:1.0.0 创作日期:2019 年 10 月 23 日晚 更新日期:暂无 ABP vNext 针对用户可编辑的配置,提供了单独的 Volo. ...

  2. opencv实践::对象计数

    问题描述 真实案例,农业领域经常需要计算对象个数 或者在其它领域拍照自动计数,可以提供效率,减低成本 解决思路 通过二值分割+形态学处理+距离变换+连通区域计算 #include <opencv ...

  3. std::this_thread::yield/sleep_for

    std::this_thread::yield(): 当前线程放弃执行,操作系统调度另一线程继续执行.. std::this_thread::sleep_for(): 表示当前线程休眠一段时间,休眠期 ...

  4. 概念理解:boost::asio::定时器1

    同步定时器 #include <cstdio> #include <iostream> #include <boost/asio.hpp> #include < ...

  5. photometric_stereo halcon光度立体法三维表面重建

    官方文档翻译 名称: photometric_stereo -- 通过光度立体技术重建表面. 签名: photometric_stereo(Images : HeightField, Gradient ...

  6. 盘点那些适配Linux的国产常用软件

    前几天,10月24日,在这个程序员的节日里,腾讯时隔十一年,更新了QQ for Linux.瞬间,各大技术论坛,群聊,关于Linux的新QQ的话题不断.为什么QQ这么多年不更新QQ for Linux ...

  7. JVM 启动调优总结

    启动命令 格式: java -jar 命令行参数 jar包路径 .示例如下 java -Dfile.encoding=utf-8 -jar -XX:MetaspaceSize=128m -XX:Max ...

  8. The usage of Markdown---引用

    目录 1. 序言 2. 引用与嵌套引用 3. 列表中的引用 更新时间:209.09.14 1. 序言   在本篇,我们来仔细谈一下Markdown的引用. 2. 引用与嵌套引用   在Markdown ...

  9. MYSQL DATE_FORMAT参数列表及用法

    MYSQL DATE_FORMAT参数列表及用法 主要涉及用法 DATE_SUB(DATE, INTERVAL EXPR TYPE) DATE_FORMAT(DATE,FORMAT) REPLACE( ...

  10. codeforce -14A A. Letter

    A. Letter time limit per test 1 second memory limit per test 64 megabytes input standard input outpu ...