关于自由拖拽完成的剪切区域(UI组件之图片剪切器)
var x, y,areaWidth,areaHeight;
var down;//闪光的判断标准,很好
addEvent(canvas,'mousedown',function(e){
// console.log(e.offsetX + ' '+e.offsetY)
down = true;
x = e.offsetX;
y = e.offsetY;
clipArea(x, y,1,1); })
addEvent(canvas,'mousemove',function(e){
if(down){
areaWidth = e.offsetX - x;
areaHeight = e.offsetY - y;
clipArea(x, y,areaWidth,areaHeight);
} })
addEvent(canvas,'mouseup',function(e){
addEvent(canvas,'moumove',function(){});
down = false;
areaWidth = e.offsetX - x;
areaHeight = e.offsetY - y;
clipArea(x, y,areaWidth,areaHeight);
})
关于自由拖拽完成的剪切区域(UI组件之图片剪切器)的更多相关文章
- jquery插件-自由拖拽
最近工作不是很忙,学习之余想整理一些代码出来,首先想到的就是是js拖拽. 两年前去某公司面试的时候,曾经被问过这个问题,如何在页面上拖放元素,尽管现在看起来很简单,但当时的我半点思路都没有,面试想当然 ...
- 简洁的drag效果,自由拖拽div的实现及注意点
偶然间看到了以前做的一个简洁的div拖拽效果,修改了一下加点注释,经测试完美通过firefox/chrome/ie6-11,现拿来分享一下. 先说一下实现原理及要点,最主要的有三步.第一步是mouse ...
- Javascript自由拖拽类
基本拖拽配置 new Dragdrop({target 拖拽元素 HTMLElemnt 必选bridge 指定鼠标按下哪个元素时开始拖拽,实现模态对话框时用到 dragable 是否可拖拽 (true ...
- 自由拖拽DIV实现
最近在做的项目有个效果是要实现div随意拖拽改变大小,前端框架选择的是vue.js,UI用的是element,拖拽效果可以很简单的实现,但是在拖拽过程中发现会对其他元素实现全选效果,因此最后选择使用元 ...
- vue自由拖拽、缩放组件
github地址:https://github.com/kirillmurashov/vue-drag-resize 安装: npm i -s vue-drag-resize 使用: <temp ...
- JavaScript中上传文件为图片如何读取+JS中如何使用clip()剪切指定区域(UI组件之图片剪裁器)
File读取和FileReader() //获取上传的文件/图片 function getFile(){ var files,len; var reader = new FileReader(); v ...
- vue简单的自由拖拽
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- JQuery之拖拽插件
一直以来,都对JS获取元素的位置感到非常的困惑:一会client.一会offset.一会scroll. 再加上各大浏览器之间的不兼容,唉,搞得哥晕晕乎乎的. 而很多页面效果都要用到这些位置.不得已,得 ...
- WPF.UIShell UIFramework之自定义窗口的深度技术 - 模态闪动(Blink)、窗口四边拖拽支持(WmNCHitTest)、自定义最大化位置和大小(WmGetMinMaxInfo)
无论是在工作和学习中使用WPF时,我们通常都会接触到CustomControl,今天我们就CustomWindow之后的一些边角技术进行探讨和剖析. 窗口(对话框)模态闪动(Blink) 自定义窗口的 ...
随机推荐
- js实时获取并显示当前时间的方法
- 1051:A × B problem 大数相乘
给你两个整数,请你计算A × B. 输入 数据的第一行是整数T(1 ≤ T ≤ 20),代表测试数据的组数.接着有T组数据,每组数据只有一行,包括两个非负整数A和B.但A和B非常大,Redraimen ...
- [NOIP2018校模拟赛]T1聚会 party
题目链接: 聚会 分析: 设每个点到1号点的距离为dist_{i},每个点的权值为x_{i},目标点到1号点的距离为dist,权值为x,那么对于每一次查询,我们讨论三种情况: ① 目标家庭在区间左边( ...
- SpringMVC配置文件-web.xml的配置
SpringMVC配置文件(重点) @Web.xml @核心拦截器(必配) <!-- spring 核心转发器,拦截指定目录下的请求,分配到配置的拦截路径下处理 --> <servl ...
- Python: How to iterate list in reverse order
#1 for index, val in enumerate(reversed(list)): print len(list) - index - 1, val #2 def reverse_enum ...
- Vijos p1688 病毒传递 树形DP
https://vijos.org/p/1688 看了下别人讨论的题解才想到的,不过方法和他的不同,感觉它的是错的.(感觉.感觉) 首先N只有1000, 如果能做到暴力枚举每一个节点,然后O(N)算出 ...
- HBase备份恢复练习
一.冷备 1.创建测试表并插入测试数据 [root@weekend05 ~]# hbase shell hbase(main):005:0> create 'scores','grade','c ...
- MySQL优化步骤和my.cnf优化配置
1.查看机器配置,指三大件:cpu.内存.硬盘 2.查看mysql配置参数 3.查看mysql运行状态,可以用mysqlreport工具来查看 4.查看mysql的慢查询 依次解决了以上问题之后,再来 ...
- XML验证
合法的XML和形式良好的XML ? 拥有正确语法的 XML 被称为"形式良好"的 XML. 第一行是 XML 声明.它定义 XML 的版本 (1.0) 和所使用的编码 (ISO-8 ...
- java5增加对https的支持
jdk1.5不支持http协议,jdk1.8默认支持,比较好的解决方案是升级jdk,但是升级jdk风险极大.不能升级jdk的情况下,可以使用如下方式. 利用httpclient,进行封装,从而实现对h ...