python canvas画移动物体_如何实现Canvas图像的拖拽、点击等操作

上一篇Canvas的博文写完后,有位朋友希望能对Canvas绘制出来的图像进行点击、拖拽等操作,因为Canvas绘制出的图像能很好的美化。好像是想做炉石什么的游戏,我也没玩过。

Canvas在我的理解中就好像在一张画布上绘制图像,它只能看到却“摸”不到,那要如何进行操作呢。我不知道网上是怎么做的,这里用自己的想法做了个DEMO分享给大家。

思路:

虽然Canvas不能拖拽,但div可以拖拽,那怎么把二者结合起来呢。初步想法是将一个与Canvas图像大小差不多的div覆盖在其上,在拖拽div时将获取的光标坐标修正后传给Canvas绘制函数并刷新图像的位置。

既然要覆盖,先做些准备工作:

1.将div与Canvas画布均position:absolute,否则无法重叠。

2.将div的z-index值设置大点,保证其在Canvas画面之上。

准备工作完成后,我们先来看div的拖拽:

var divObj=document.getElementById("cover");var moveFlag=false;

divObj.οnmοusedοwn=function(e){

moveFlag=true;var clickEvent=window.event||e;var mwidth=clickEvent.clientX-divObj.offsetLeft;var mheight=clickEvent.clientY-divObj.offsetTop;

document.οnmοusemοve=function(e){var moveEvent=window.event||e;if(moveFlag){

divObj.style.left=moveEvent.clientX-mwidth+"px";

divObj.style.top=moveEvent.clientY-mheight+"px";

divObj.οnmοuseup=function(){

moveFlag=false;

}

}

}

};

来解读下这段代码:首先获取div对象,设置拖拽标志moveFlage,当onmousedown时为true表示可以拖动,当onmouseup时为false表示不能拖动了。

var clickEvent=window.event||e;var mwidth=clickEvent.clientX-divObj.offsetLeft;var mheight=clickEvent.clientY-divObj.offsetTop;

这三行代码是为了修正光标位置。当点击时,记录下光标在div上的位置。mwidth和mheight表示光标落点相对于div左边和上边的距离。如果不加修正:

628eb2d5c2c3e29d4aacfedfda921cb4.gif

这就是不加修正的结果,当光标点下时,div的坐标即左上角会与光标坐标一致。

修正后:

d2a310a2e93fb679a14c62800288b639.gif

点击时光标总会“粘”在div某点上。

接下来绘制图片:

首先定义全局变量X和Y,它们是为了实时更新图像的绘制坐标。

var ctx=document.getElementById("myCanvas").getContext("2d");var img=document.getElementById("myImg");functiondrawImg(){

ctx.clearRect(0,0,1000,500);

ctx.beginPath();

ctx.drawImage(img,X,Y);

ctx.closePath();

ctx.stroke();

}

window.οnlοad=function(){

setInterval(drawImg,1);

}

获取“画笔”,获取图片对象。这里setInterval循环执行绘制图片的函数,以刷新图片的位置,setInterval的间隔值越小,拖拽起来越“流畅”。

同时别忘了clearRect,当图片移动到下一个位置时,清除上一个位置的图片,参数为Canvas画布的坐标和尺寸。

在拖拽时将修正后的光标坐标传给X、Y:

X=moveEvent.clientX-mwidth;

Y=moveEvent.clientY-mheight;

c797afd5ddb73a944554f8b5a1c2c517.gif

最后加上div和图像的活动范围:

if(moveEvent.clientX<=mwidth){

divObj.style.left=0+"px";

X=0;

}if(parseInt(divObj.style.left)+divObj.offsetWidth >=1000){

divObj.style.left=1000 - divObj.offsetWidth+"px";

X=1000 -divObj.offsetWidth;

}if(moveEvent.clientY<=mheight){

divObj.style.top=0+"px";

Y=0;

}if(parseInt(divObj.style.top)+divObj.offsetHeight>=500){

divObj.style.top=500-divObj.offsetHeight+"px";

Y=500-divObj.offsetHeight;

}

这个就看个人的要求了,注意是要同时限定div和图片的活动范围。1000与500为本例的画布大小,如果是在整个页面里活动就换成innerWidth或innerHeight。

彻底隐藏div看看效果:

e33a60b22d56ea5d00a6a79ed814e832.gif

最后说下点击事件,这里要注意的是在拖拽的过程中onmousedown与onmouseup二者就构成了一个click过程,但我们不希望在拖拽结束后触发点击事件。

这里有个比较简单的办法,定义一个clickFlag默认为false,当onmousedown时设为true,若进行了onmousemove事件时设为false。

在最后onmouseup时判断clickFlag的值,为true时才触发点击事件。也就是说当你按下鼠标时,只有不发现移动,松开鼠标时才会触发点击事件。

8a14224fc591c629b85848ef16bb8f4d.gif

整理后的JS代码:

//绘制图片坐标

var X=0;var Y=0;//js部分

var divObj=document.getElementById("cover");var moveFlag=false;//区别moueseup与click的标志

var clickFlag=false;//拖拽函数

divObj.οnmοusedοwn=function(e){

moveFlag=true;

clickFlag=true;var clickEvent=window.event||e;var mwidth=clickEvent.clientX-divObj.offsetLeft;var mheight=clickEvent.clientY-divObj.offsetTop;

document.οnmοusemοve=function(e){

clickFlag=false;var moveEvent=window.event||e;if(moveFlag){

divObj.style.left=moveEvent.clientX-mwidth+"px";

divObj.style.top=moveEvent.clientY-mheight+"px"; 将鼠标坐标传给Canvas中的图像

X=moveEvent.clientX-mwidth;

Y=moveEvent.clientY-mheight; 下面四个条件为限制div以及图像的活动边界

if(moveEvent.clientX<=mwidth){

divObj.style.left=0+"px";

X=0;

}if(parseInt(divObj.style.left)+divObj.offsetWidth >=1000){

divObj.style.left=1000 - divObj.offsetWidth+"px";

X=1000 -divObj.offsetWidth;

}if(moveEvent.clientY<=mheight){

divObj.style.top=0+"px";

Y=0;

}if(parseInt(divObj.style.top)+divObj.offsetHeight>=500){

divObj.style.top=500-divObj.offsetHeight+"px";

Y=500-divObj.offsetHeight;

}

divObj.οnmοuseup=function(){

moveFlag=false;if(clickFlag){

alert("点击生效");

}

}

}

}

};

本例到此结束,更多功能大家有兴趣可以自己开发,感谢您的浏览,也感谢每个对我这菜鸟提意见的人。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/536864.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Git基础知识教程整理(Git基本操作)

Git简介 Git是目前世界上最先进的分布式版本控制系统&#xff08;没有之一&#xff09;。Linux之父Linux用C语言写了Git分布式版本控制系统。 分布式版本控制系统与集中式版本控制系统的区别 区别分布式集中式中央服务器有&#xff0c;版本库集中存放在中央服务器&#xff0c;工…

python plot map_使用matplotlibbasemap在边界打印

我在绘制多边形时遇到了困难&#xff0c;例如&#xff0c;在使用matplotlib basemap生成的地图边界上绘制多边形。在下面的示例中&#xff0c;地图边界由日期线指定。我试图通过指定三角形顶点的坐标来绘制一个跨越日期线的三角形。当所有的坐标都在地图内时&#xff0c;这种方…

SQL查询语句 group by后, 字符串合并

合并列值 --******************************************************************************************* 表结构&#xff0c;数据如下&#xff1a; id value ----- ------ aa bb aaa bbb ccc 需要得到结果&#xff1a; id values ------ ----------- aa,bb aaa…

Git 基础 —— 常用命令

Git 基础学习系列 Git 基础 —— 安装 配置 别名 对象Git 基础 —— 常用命令Git 基础 —— 常见使用场景Git基础 —— Github 的使用git init 创建 Git 本地仓库 远端无仓库&#xff0c;本地无仓库&#xff0c;本地新建一个仓库 git init git_learning 远端有仓库&#xff0c;…

python安装caffe_Linux下caffe的安装

下载caffe并保存到一个目录下(推荐放到 /home 目录)安装依赖项&#xff1a;sudo apt-get install libprotobuf-dev libleveldb-dev libsnappy-dev libopencv-dev libhdf5-serial-dev protobuf-compilersudo apt-get install --no-install-recommends libboost-all-devsudo apt-…

linux 访问Windows 共享文件的方法

2019独角兽企业重金招聘Python工程师标准>>> 1 安装Samba服务 2 启动 samba服务 /etc/init.d/smb restart 3 安装插件 cifs解决只读挂载&#xff1a;yum install cifs-utils.x86_64 4 在windows下共享一个可以用的文件夹 5 将 windows 共享文件夹挂载到linux上 命令…

基于Blink构建亲听项目以及全链路debug项目实时响应能力

案例与解决方案汇总页&#xff1a;阿里云实时计算产品案例&解决方案汇总 本文全面总结了大数据项目组在亲听项目以及全链路debug项目上进行的实时流处理需求梳理&#xff0c;架构选型&#xff0c;以及达成效果 一、背景介绍 1.1亲听项目 亲听项目专注于帮助用户收集、展示、…

python的重点_python知识点

"""author:lei"""import os#os.path.join() 将分离的部分合成一个整体filenameos.path.join(/home/ubuntu/python_coding,split_func)print filename#输出为&#xff1a;/home/ubuntu/python_coding/split_func#os.path.splitext()将文件名和扩展…

在既有系统中打通Apache Ignite、MySQL和Node.js

为什么80%的码农都做不了架构师&#xff1f;>>> 介绍 在本系列的第一篇文章中&#xff0c;安装了Node.js、Ignite的Node.js瘦客户端包&#xff0c;并且测试了一个示例应用。在本文中&#xff0c;可以看一下Ignite在处理其它数据源&#xff08;比如关系数据库&#…

java hashmap 的api_JAVA基础--JAVA API集合框架(ArrayList、HashSet、HashMap使用)

一、集合Collection1. 集合介绍变量&#xff1a;表示的内存中的一个空间&#xff0c;只能保存确定类型的单个数据数组&#xff1a;表示的是内存中的多个连续的空间&#xff0c;这些空间中可以存储多个同类型的数据。后期继续学习面向对象技术&#xff0c;我们在程序中开始创建对…

Vue进阶知识笔记

利用v-for循环出的多个li标签&#xff0c;点击不同的li变换颜色 方法一 <ul v-for"(item,index) in list" :key"index" class"details"><li ref"lisd" click"faillist(index)" :class"{active:ind index}&qu…

teamcity mysql 配置_CentOS 7 上 TeamCity 安装

CentOS 7 上 TeamCity 安装非入门教程, 初次接触centos/docker的朋友需要谨慎一. 安装 MySQL为了后续的需要, 这里安装了 Docker, 当然如果你已经有了 MySQL 或者其它推荐的数据库[MySQL, PostgreSQL, Oracle, MS SQL], 则可忽略1. 安装 Docker补充:# 启动dockersudo systemctl…

Python网络请求库Requests,妈妈再也不会担心我的网络请求了(二)

本文同步发表于我的微信公众号&#xff0c;扫一扫文章底部的二维码或在微信搜索 极客导航 即可关注&#xff0c;每个工作日都有文章更新。 一、概况 接着上篇说&#xff0c;如果你真以为Requests网络请求库只有Get请求和Post请求&#xff0c;那就大错特错了。它还一些其他用法&…

dbunit java_java - 错误地抛出了Java DBUnit AmbiguousTableNameException - 堆栈内存溢出

我正在尝试DBUnit(2.6.0)&#xff0c;我正在尝试导出我的完整数据库(PostgreSQL)。 但是抛出以下异常&#xff1a;线程“main”中的异常org.dbunit.database.AmbiguousTableNameException&#xff1a;FLYWAY_SCHEMA_HISTORY这是正确的行为&#xff0c;因为我有两个具有相同名称…

Docker 命令详解(run篇)

参考&#xff1a;https://www.cnblogs.com/yfalcon/p/9044246.html 命令格式&#xff1a;docker run [OPTIONS] IMAGE [COMMAND] [ARG...]Usage: Run a command in a new container中文意思为&#xff1a;通过run命令创建一个新的容器&#xff08;container&#xff09; 常用选…

java 同步 lock_关于java:同步是否像Lock.lock()一样驻留并发线程?

当我们调用lock.lock()或尝试输入synchronized块时&#xff0c;如果其他某个线程已经获得了该锁&#xff0c;则我们的线程将阻塞。 现在我的问题是&#xff0c;当我们查看lock.lock()的实现时&#xff0c;它会将获取锁委托给AQS&#xff0c;而AQS实际将当前线程驻留在该线程中(…

Idea项目中常见错误及笔记(Old)

1、Idea基础设置&#xff1a; File-->settings--> 1>修改字体&#xff1a;Font 2>修改编码格式&#xff1a;File Encodings(全部UTF-8,右下方复选框勾中--防止程序中的汉字转为ASCII码) 3>修改行号&#xff1a;Appearance&#xff1a;show line numbers show me…

java接口服务编排_GOKU API Gateway CE V3.1.0 发布:新增服务编排、配置版本管理等...

Goku API Gateway (中文名&#xff1a;悟空 API 网关)是一个基于 Golang 开发的微服务网关&#xff0c;能够实现高性能 HTTP API 转发、服务编排、多租户管理、API 访问权限控制等目的&#xff0c;拥有强大的自定义插件系统可以自行扩展&#xff0c;并且提供友好的图形化配置界…

maxcompute 2.0复杂数据类型之array

2019独角兽企业重金招聘Python工程师标准>>> 1. 含义 类似于Java中的array。有序、可重复。 2. 场景 什么样的数据&#xff0c;适合使用array类型来存储呢&#xff1f;这里列举了几个我在开发中实际用到的场景。 2.1 标签类的数据 为什么说标签类数据适合使用array类…

java中匿名数组_Swagger UI:数组中的多个匿名对象

对象数组的定义如下&#xff1a;type: arrayitems:type: objectproperties:prop1:type: stringprop2:type: integer# etc.在您的示例中&#xff0c;响应包含具有属性 balanceDisplaySettings 的对象&#xff0c;并且此属性包含对象数组 . 这可以定义如下&#xff1a;paths:/Pat…