canvas图形放大缩小鼠标拖拽

在网上找的都是放大缩小，或者鼠标拖拽，没有两者都满足的
一开始我天真的以为两个合并就可以了，但其实当鼠标松开和点击的时候，坐标原点是会变的，就是每次拖拽都是清除之前，放大缩小也是，所以那个原点很不好确定，
主要思路就是保存之前的原点坐标

过程比较麻烦，意会一下就好了，直接上代码

var that = this;var canvas = document.getElementById('myDiv')var ctx = canvas.getContext('2d')let obj = {fontX: 0,fontY: 0,fontZoom: 1,curZoom: 1,translateX: 0,translateY: 0,z:1,movex:0,movey:0,x:0,y:0,zoom(offsetX, offsetY, z) {console.log('zoom')ctx.clearRect(0,0,1300,640)ctx.save()ctx.translate(obj.x, obj.y)ctx.save()this.curZoom = this.fontZoom + obj.zconsole.log(this.curZoom,'缩放比例')this.translateX = offsetX - (offsetX - this.translateX) * this.curZoom / this.fontZoom  this.translateY = offsetY - (offsetY - this.translateY) * this.curZoom / this.fontZoom ctx.translate(this.translateX, this.translateY)ctx.scale(this.curZoom, this.curZoom);that.toDraw()ctx.restore()ctx.restore()this.fontY = offsetYthis.fontX = offsetXthis.fontZoom =this.fontZoom + obj.z},mou(offsetX, offsetY){//   console.log('mou')ctx.clearRect(0,0,1300,640)ctx.save()console.log(offsetX, offsetY,this.translateX,this.translateY)ctx.translate(offsetX+this.translateX, offsetY+this.translateY)ctx.scale(this.curZoom, this.curZoom);that.toDraw()// if(isDrop){ctx.restore()// }}}console.log(document.getElementById('myDiv'))document.getElementById('myDiv').addEventListener('mousewheel', (e) => {obj.z = e.deltaY > 0 ? -0.1 : 0.1obj.zoom(e.offsetX, e.offsetY, obj.z)})var isDrop = false;document.getElementById('myDiv').onmousedown = function(e){isDrop = truevar clientX = e.clientXvar clientY = e.clientYdocument.getElementById('myDiv').onmousemove=function(e){if(isDrop){obj.movex = e.clientX -clientX + obj.xobj.movey = e.clientY -clientY + obj.y// console.log(e.clientX -clientX,obj.x)obj.mou(obj.movex,obj.movey)}document.getElementById('myDiv').onmouseup = function(){isDrop = false; obj.x = obj.movexobj.y = obj.moveyconsole.log('停止了')}}}

toDraw的函数自己写一个随便画个圆圈啥的都行，看卡效果就好，上面就是关键代码

canvas图形放大缩小鼠标拖拽相关推荐

QWT--滚轮放大缩小和拖拽视窗
一.滚轮放大缩小 QWT中提供了QwtPlotMagnifier类,用于实现鼠标滚轮放大和缩小图形的效果,其实本质就是修改x轴和y轴的范围. 二.拖拽视窗 QWT中提供了QwtPlotPanner类, ...
jquery ui放大缩小_jQuery拖拽放大缩小插件idrag
插件描述:24行代码,让你的网页元素任意放大.缩小.拖拽.移动基于jQuery:$(document).mousemove(function(e) { if (!!this.move) { var ...
jtopo新增节点（拖拽节点到画布），＜画布放大缩小或拖拽后，新增节点还在鼠标松开得位置＞
效果图如下,具体我是参照在github上下载的源码写的,链接不记得了,如果原作者看到了,可以联系我删博代码如下:<但是此代码在画布拖拽,放大,缩小后,新增节点的位置不是鼠标松开时的位置> ...
Vue canvas图形放大缩小
1.第一种办法利用进度条标签来缩放 <template><div class="hello"><canvas width="1000&qu ...
VUE实现前台图片标注（添加矩形框）、放大、缩小、拖拽
需求:实现图片上自定义多个矩形选框,选框可移动缩放拖动,图片可以放大缩小.拖拽 ,选框内填充标注文字. 框内填充文字基本都会,不多赘述,后期可添加选框移除功能(思路右击选框弹出选项删除,获取当前点击选 ...
VUE实现前台图片标注（添加矩形框）、放大、缩小、拖拽 -----个人记录
VUE实现前台图片标注(添加矩形框).放大.缩小.拖拽需求:实现图片上自定义多个矩形选框,选框可移动缩放拖动,图片可以放大缩小.拖拽 ,选框内填充标注文字. 框内填充文字基本都会,不多赘述,后期可 ...
jquery图片查看插件，支持旋转、放大、缩小、拖拽、缩略图（仿qq图片查看）
最近做了一个jquery图片查看的插件,目的是能精确查看图片的详情,插件支持图片旋转.放大.缩小.拖拽.缩略图显示,界面效果是按照window的qq查看图片功能写的,当然不尽相同. 具体功能: 多张图 ...
3dmax java_Java3D读取3DMax模型并实现鼠标拖拽、旋转、滚轮缩放等功能
/**-------------------------------------------------代码区--------------------------------------------- ...
可拖拽，拉伸的盒子（类似我们的桌面应用框，可以拉伸放大，可以拖拽移动）
类似我们的桌面应用框,可以拉伸放大,可以拖拽移动基于上一篇,我们至于要加上另外两边和另外三个角只是剩下的拉伸,不仅仅要改变盒子的宽,还要改变left/top了原本以为很简单的加个left就好了, ...

canvas图形放大缩小鼠标拖拽

canvas图形放大缩小鼠标拖拽

canvas图形放大缩小鼠标拖拽相关推荐

最新文章

热门文章