第二张图中画向量上面波浪线代表什么的地方，为什么说这四个三维向量线性相关呢？

来源：蜘蛛抓取(WebSpider) 时间：2022-11-14 11:34 标签： 向量上面波浪线代表什么


PC端的项目啦，需要在电脑上看哦,而且最好用Chrome打开

这是今年三月份帮学长做的一个项目，陪我度过了两个月的春招生活，整个项目做下来也是学到了很多东西，下面就开始我的分享啦，包括一些知识点总结和遇到的坑，dalao莫笑哈。

主要功能如上图，左边是图形工具栏，右边是canvas，上面是清除、删除、旋转、切换格子背景、保存并下载图片的操作。

代码是基于vue-cli码的，所以路由、vuex这些都不用讲啦，我们把重点放在canvas上面吧。

这里的拖拽是指把左边工具栏里的图形图形拖拽到右边画布里，三步完成：

  1. 被拖拽元素还有三个相应的事件dragstart drag dragend，分别对应拖拽开始、拖拽中和拖拽结束，如果你希望在这些过程加上特效，可以试试，但更多的还是用作响应数据，比如让画布知道具体是哪个元素被拖拽进来了；

  2. 在实现保存图片功能的时候，我希望能截取一段DOM的内容，而不仅仅是canvas的内容，所以找到了这个插件html2canvas，它可以把dom转换成canvas，然后我们就能canvas.toDataURL()把它转换成图片了。

    转换并保存成图片下载的代码如下：

    但是出现了一个bug，就是下载下来的图片不清晰，左上角一大片空白。
    于是我尝试了网上的很多方法，都行不通，最后只能把项目从零开始慢慢加东西，最后发现是我画虚线的时候改了CanvasRenderingContext2D的原型，我滴妈耶，做梦也没想到会是这里出问题，用插件有风险啊。

    上传到gh-pages时的路径错误

    如果上传到https://XXX.github.io/（GitHub的个人博客）上，则跟上传到服务器上操作一致，但如果是传到某个仓库的gh-pages，那么一堆问题都来了，解决步骤如下：

    1. 把.gitignore文件里的/dist删掉，忽略了的话，还怎么上传打包文件到master分支呢；

    2. 相对应的，如果使用了history模式，请改成hash模式，不然github可能会把前端路由识别成后端api；

    3. 还有一些static里的图片，使用了绝对路径，可能上传后显示不出来；

    上面提到，我们的画布每次更新时，总是要全部清除，然后重新再画一遍，对于那些背景图片等不变的内容来说，是不是可以优化呢？Emmm，好尬的设问句。

    我们用多个同样大小层叠的canvas来完成，层级低的下层canvas用来画背景图片等静态图形，层级高的上层canvas用来画动态变化的图形，这样就可以每次渲染都优化一点啦。

    当我们在画布上拖拽图形时，一般做法是随着鼠标移动mousemove，重新绘制所有图形，但其实这个过程中，要绘制的可以分为两部分，一个是被拖拽移动的图形，另一个就是其他图形；我们可以分别动态创建两个canvas，把两部分画在两个离屏画布上，mousemove时只要调用两次drawImage(离屏canvas)即可，这样是不是性能又花了很多呢


    虽然代码质量差，我自己都不忍直视，但还是放出来吧，万一哪里看不懂了还可以翻翻源码嘛

我要回帖

更多关于 向量上面波浪线代表什么 的文章

 

随机推荐