Canvas绘画项目遇到的坑与解决方法（beta）

首先以前都是一开始做项目做用git，没有试过开发到一半进行上传，因此有些git的问题

上传已经git项目

进入你的文件
git init //初始化git
git remote add origin (你的ssh地址)
git add . 
git commit -m"你的项目注释"  //提交到了电脑的缓冲区
git push -u origin master 


问题就来了，这时候容易报叫你写一句git push --set-upstream origin master的错误
解决方法，你要把远程的项目与你本地的项目有所关联
git pull origin master //把master分支的代码更新到你本地

这个时候重新
git add . 
git commit -m"你的项目注释"  //提交到了电脑的缓冲区
git push -u origin master 

这时候就可以了提交成功了

https://gitee.com/JimmyLLin/JimmyNotes

这是项目的地址

遇到第一个问题：

进行绘图的时候，屏幕是会上下进行滚动的，禁止这一行为

比如你div里面有一个canvas，那么div进行滑动监听，在开始触摸那一瞬间开始的时候，处理的函数你就可以加上下面这两句

e.preventDefault && e.preventDefault(); //禁止默认事件
e.stopPropagation && e.stopPropagation(); //禁止触摸事件冒泡

canvas定位触摸坐标

你可以在handle滑动函数的时候，通过默认参数e， e.touches[0].clientX   获得你的x坐标，同理clientY就是y坐标，但是这个坐标是全局的，获得canvas区域内坐标的方法

x = (x - (canvas的dom).getBoundingClientRect().left) * ((canvas的dom).width / (canvas的dom).getBoundingClientRect().width);
y = (y - (canvas的dom).getBoundingClientRect().top) * ((canvas的dom).height / (canvas的dom).getBoundingClientRect().height);

getBoundingClientRect()是官方提供的一个方法，我们可以通过上面两句话进行获取正确的坐标

 

在线调试

如果每次我们做项目的时候我们build后再在手机测试显然是不现实的，我们可以更改配置项，让手机实时可以看到调试的结果，

打开config/index.js

下面dev环境，host：’localhost‘改为host:'0.0.0.0'；

然后我们查看本地的ip地址，终端输入ifconfig，我们可以看到输出了很多东西，在en0上面的inet就是我们的ip地址

然后我们平时localhost:8080是最经典的嘛，我们在手机上输入你的ip地址，后面跟项目的端口号（例如8080），记得要开启服务，查看ip地址可能有些朋友把服务关掉了，要重启下服务，然后手机上就可以实时浏览了

npm run build后打开html白屏问题

同样在config/index.js上面进行修改，在build下面的

assetsPublicPath: '/'参数改为assetsPublicPath: './',

这是一个打包后路径改变的问题

项目地址

www.jinmylam.xin/JimmyNotes