Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 （附转换公式）
|
副标题[/!--empirenews.page--]
哈哈哈俺又来啦，这次带来的是canvas实现一些画布功能的文章，希望大家喜欢！ 前言 因为也是大三了，最近俺也在找实习，之前有一个自己的小项目: https://github.com/zhcxk1998/School-Partners 面试官说可以往深层次思考一下，或许加一些新的功能来增加项目的难度，他提了几个建议，其中一个就是 试卷在线批阅，老师可以在上面对作业进行批注，圈圈点点等 俺当天晚上就开始研究这个东东哈哈哈，终于被我研究出来啦！ 采用的是 canvas 绘制画笔，由css3的 transform 属性来进行平移与缩放，之后再详细介绍介绍 （希望大家可以留下宝贵的赞与star嘻嘻） 效果预览 动图是放cdn的，如果访问不了，可以登录在线尝试尝试: 公式推导 如果不想看公式如何推导，可以直接跳过看后面的具体实现~ 1. 坐标转换公式 转换公式介绍 其实一开始也是想在网上找一下有没有相关的资料，但是可惜找不到，所以就自己慢慢的推出来了。我就举一下横坐标的例子吧！ 通用公式 这个公式是表示，通过公式来将鼠标按下的坐标转换为画布中的相对坐标，这一点尤为重要 (transformOrigin - downX) / scale * (scale-1) + downX - translateX = pointX 参数解释 transformOrigin: transform变化的基点（通过这个属性来控制元素以哪里进行变化） 推导过程 这个公式的话，其实就比较通用，可以用在别的利用到 transform 属性的场景，至于怎么推导的话，我是用的笨办法 具体的测试代码，放在文末，需要自取~ 1. 先做出两个相同的元素，然后标记上坐标，并且设置容器属性 overflow:hidden 来隐藏溢出内容 ok，现在就有两个一样的矩阵啦，我们为他标记上一些红点，然后我们对左边的进行css3的样式变化 transform 矩形的宽高是 360px * 360px 的，我们定义一下他的变化属性，变化基点选择正中心，放大3倍 // css transform-origin: 180px 180px; transform: scale(3, 3); 得到如下结果 ok，我们现在对比一下上面的结果，就会发现，放大3倍的时候，恰好是中间黑色方块占据了全部宽度。接下来我们就可以对这些点与原先没有进行变化（右边）的矩形进行对比就可以得到他们坐标的关系啦 2. 开始对两个坐标进行对比，然后推出公式 现在举一个简单的例子吧，例如我们算一下左上角的坐标（现在已经标记为黄色了） 其实我们其实就可以直接心算出来坐标的关系啦 （ 这里左边计算坐标的值是我们鼠标按下的坐标 ） （ 这里左边计算坐标的值是我们鼠标按下的坐标 ） （ 这里左边计算坐标的值是我们鼠标按下的坐标 ） 因为宽高是 360px ，所以分成3等份，每份宽度是 120px 因为变化之后容器的宽高是不变的，变化的只有矩形本身 我们可以得出左边的黄色标记坐标是 x:120 y:0 ，右边的黄色标记为 x:160 y:120 （这个其实肉眼看应该就能看出来了，实在不行可以用纸笔算一算） 这个坐标可能有点特殊，我们再换几个来计算计算（根据特殊推一般） 蓝色标记：左边： x:120 y:120 ，右边： x: 160 y:160 绿色标记：左边： x: 240 y:240 ，右边： x: 200: y:200 好了，我们差不多已经可以拿到坐标之间的关系了，我们可以列一个表 还觉得不放心？我们可以换一下，缩放倍数与容器宽高等进行计算 不知道大家有没有感觉呢，然后我们就可以慢慢根据坐标推出通用的公式啦 (transformOrigin - downX) / scale * (scale-1) + down - translateX = point 当然，我们或许还有这个 translateX 没有尝试，这个就比较简单一点了，脑内模拟一下，就知道我们可以减去位移的距离就ok啦。我们测试一下 我们先修改一下样式，新增一下位移的距离 transform-origin: 180px 180px; transform: scale(3, 3) translate(-40px,-40px); 还是我们上面的状态，ok，我们现在蓝色跟绿色的标记还是一一对应的，那我们看看现在的坐标情况 蓝色：左边： x:0 y:0 ，右边： x:160 y:160 绿色：左边： x:120 y:120 ，右边： x:200 y:200 我们分别运用公式算一下出来的坐标是怎么样的 （以下为经过坐标换算） 蓝色：左边： x:120 y:120 ，右边： x:160 y:160 绿色：左边： x:160 y:160 ，右边： x:200 y:200 不难发现，我们其实就相差了与位移距离 translateX/translateY 的差值，所以，我们只需要减去位移的距离就可以完美的进行坐标转换啦 测试公式 根据上面的公式，我们可以简单测试一下！这个公式到底能不能生效！！！ 我们直接沿用上面的demo，测试一下如果元素进行了变化，我们鼠标点下的地方生成一个标记，位置是否显示正确。看起来很ok啊（手动滑稽） （编辑：衡阳站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
