求个鼠标交互移动画布的源码
有那个，，，鼠标交互的源码么？那个确实有点难啊 ，，，自己弄了下弄得有点乱0.0.0.0.0
4 回答
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>canvasImage</title>
</head>
<body style="background: black;">
<canvas id="canvas" width="800" height="800" style="border: 1px solid #aaa; display: block; margin: 50px auto;">
当前浏览器不支持Canvas，请更换浏览器后在试
</canvas>
<input type="range" id="scale-range" min="0.5" max="3.0" step="0.01" value="1.5" name="" style="display: block; margin: 20px auto; width: 800;" id="">
</body>
<script>
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var slider = document.getElementById('scale-range');
var image = new Image()
var oldX = 0, oldY = 0, offX = 0, offY = 0;
window.onload = function () {
canvas.width = 1152;
canvas.height = 768;
image.src = './images/img-lg.jpg';
var scale = slider.value;
image.onload = function () {
// context.drawImage(image, 0, 0, canvas.width, canvas.height);
drawImageByScale(scale);
slider.onmousemove = function () {
scale = slider.value;
if (scale <= 1) {
offX = 0;
offY = 0;
}
drawImageByScale(scale);
}
canvas.onmousedown = function (e) {
oldX = e.offsetX - offX;
oldY = e.offsetY - offY;
drawImageByScale(scale, e)
canvas.onmousemove = function (e) {
if (scale > 1) {
drawImageByScale(scale, e)
}
}
canvas.onmouseup = function () {
canvas.onmousemove = null;
}
}
}
}
function drawImageByScale (scale, e) {
context.clearRect(0, 0, canvas.width, canvas.height);
var imageWidth = canvas.width * scale;
var imageHeight = canvas.height * scale;
var dx = canvas.width * (1 - scale) / 2;
var dy = canvas.height * (1 - scale) / 2;
if (e) {
offX = e.offsetX - oldX;
offY = e.offsetY - oldY;
}
if (scale > 1) {
if (offX < dx) {
offX = dx
}
if (offX > -dx) {
offX = -dx
}
if (offY < dy) {
offY = dy
}
if (offY > -dy) {
offY = -dy
}
}
dx += offX;
dy += offY;
context.drawImage(image, dx, dy, imageWidth, imageHeight);
}
</script>
</html>
<!doctype html>
<html>
<head>
<meta charset="UTF-8"/>
<style>
body{
background-color:black;
}
#canvas{
display:block;
margin:0 auto;
border:1px solid #aaa;
}
input[type="range"]{
display:block;
width:800px;
margin:20px auto;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<input type="range" id="range" min="0.5" max="3.0" step="0.01" value="0.5"/>
<script type="text/javascript">
var canvas=document.getElementById("canvas");
var slider=document.getElementById('range');
var cxt=canvas.getContext('2d');
var img=new Image();
window.onload=function(){
canvas.width=1152;
canvas.height=768;
var scale=slider.value;
var oldoffx=0;
var oldoffy=0;//保存总的偏移
img.src="img.jpg";
img.onload=function(){
drawImageByScale(scale,0,0);
slider.onmousemove=function(){
scale=slider.value;
drawImageByScale(scale,0+oldoffx,0+oldoffy);
console.log("slide move");
}
var mouseStatus=0;
var ox,oy;
oldoffx=0;
oldoffy=0;
var line_x,line_y;
canvas.onmousedown=function(e){
var ev=window.event||e;
if(scale>1.0){
//alert("图片处于放大状态且被按下鼠标");
mouseStatus=1;
ox=ev.pageX;
oy=ev.pageY;
}
}
canvas.onmousemove=function(e){
var ev=window.event||e;
var _x,_y;
if(mouseStatus==1 && scale>1.0){
_x=ev.pageX;
_y=ev.pageY;
line_x=ox-_x;
line_y=oy-_y;
drawImageByScale(scale,oldoffx+line_x,oldoffy+line_y);
}
}
canvas.onmouseup=function(){
if(mouseStatus==1 && scale>1.0){
mouseStatus=0;
oldoffx+=line_x;
oldoffy+=line_y;
}
}
canvas.onmouseout=function(){
if(mouseStatus==1 && scale>1.0){
mouseStatus=0;
oldoffx+=line_x;
oldoffy+=line_y;
}
}
}
}
function drawImageByScale(scale,off_x,off_y){
var imgWidth=1152*scale;
var imgHeight=768*scale;
var dx=canvas.width/2-imgWidth/2;
var dy=canvas.height/2-imgHeight/2;
cxt.clearRect(0,0,canvas.width,canvas.height);
cxt.drawImage(img,dx-off_x,dy-off_y,imgWidth,imgHeight);
}
</script>
</body>
</html>
举报
0/150
提交
取消
