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啊（手动有趣） （编辑：河北网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
