关于自由拖拽完成的剪切区域(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) 自定义窗口的 ...
随机推荐
- python之小技巧积累
交换a和b的值:a=11b=22#引进第三个变量交换a和b的值# c=a#把a给c,现在c是11# a=b#把b给a,现在a是22# b=c#把c给b,现在b是11 #不引进第三个变量,交换a和b的值 ...
- centos7上使用locate命令-文件查找
centos7上使用locate命令 小贴士:在centOS7以上的系统中使用“locate”文件查找命令,发现该命令不可用. 检查了下,原来是centos7默认没有安装该命令,在联网状态运行“y ...
- python三行代码实现快速排序
def quick_sort(array): if len(array) < 2: return array return quick_sort([lt for lt in array[1:] ...
- PopupWindow(2)简单示例-自定义弹出菜单
本示例,用 popupWindow 自定义弹出菜单 public class CustomActionProvider extends ActionProvider implements OnMenu ...
- 阻止默认行为是配合passive使用
在使用lighthouse检测pwa应用时,发现提示下面有下面的警告 默认使用passive:true提高滚动性能并减少崩溃,passive即顺从的,是指它顺从浏览器的默认行为.设置该属性的目的主要是 ...
- CSS进阶:提高你前端水平的 4 个技巧
译者注:随着 Node.js .react-native 等技术的不断出现,和互联网行业的创业的层出不穷,了解些前端知识,成为全栈攻城师,快速的产出原型,展示你的创意,对程序员,尤其是在创业的程序员来 ...
- Java程序操作数据库SQLserver详解
数据库基本操作:增删改查(CRUD) crud介绍(增.删.改.查操作) CRUD是指在做计算处理时的增加(Create).查询(Retrieve)(重新得到数据).更新(Update)和删除(Del ...
- synchronize早已经没那么笨重
我发现一些同学在网络上有看不少synchronize的文章,可能有些同学没深入了解,只看了部分内容,就急急忙忙认为不能使用它,很笨重,因为是采用操作系统同步互斥信号量来实现的.关于这类的对于synch ...
- laravel核心思想
服务容器.依赖注入.门脸模式 服务容器 容器概念 用来装一个个实例的对象,比如邮件类. IOC控制反转 IOC(Inversion of Control)控制反转,面向对象,可降低代码之间的耦合度,借 ...
- js实现ctrl+v粘贴并上传图片
前端页面: <textarea class="scroll" id="text" placeholder="在此输入...">& ...