关于自由拖拽完成的剪切区域(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) 自定义窗口的 ...
随机推荐
- Wolfycz的娱乐赛题解
现在不会放题解的!比赛完了我会把题解放上来的 祝大家玩的愉快~ 等会,cnblogs不会显示更新时间?我禁赛我自己 UPD:2018.12.15 欢迎大家爆踩标程- painting 我们考虑转化题意 ...
- 转 python 将一个文件中内容添加到另一个文件指定位置
http://blog.csdn.net/huguangshanse00/article/details/14624601
- 模拟ssh的远程网络传输
粘包产生的原因分析: 第一点:客户端向服务端发起命令请求,服务端接受命令请求,并返回对应的信息,如果信息过大,客户端一次接受不了,那么下一次请求依然返回 上一个命令的内容,就出现了粘包的情况. 第二点 ...
- XDroidMvp 轻量级的Android MVP快速开发框架
XDroidMvp是XDroidAndroid快速开发框架的MVP版本,其使用方式类似于XDroid,大部分源码也来自XDroid. XDroidMvp主要会有这些特性: 无需写Contract! 无 ...
- Kali部署openvas初探与实践
openvas安装 1.我用的清华大学的源,所以我把/etc/apt/source.list中下入如下源地址 #清华大学deb http://mirrors.tuna.tsinghua.edu.cn/ ...
- Kotlin学习的一些心得
1.工程manifest中的application节点有冲突时,添加 xmlns:tools="http://schemas.android.com/tools" tools:re ...
- Android中进程与线程及如何在子线程中操作UI线程
1. Android进程 一个应用程序被启动时,系统默认创建执行一个叫做"main"的线程.这个线程也是你的应用与界面工具包(android.widget和android.view ...
- 如何实现Windows宿主系统和虚拟机ubuntu系统文件互相访问
我的宿主操作系统是Windows 10,使用Oracle的Virtual Box安装了Ubuntu. 因为工作需要我经常得在两个系统之间互相拷贝一些数据,下面是具体步骤,可以实现Windows 10和 ...
- SQLite – LIMIT子句
SQLite - LIMIT子句 SQLite LIMIT子句是用来限制SELECT语句返回的数据量. 语法: SELECT语句.LIMIT子句的基本语法如下: SELECT column1, col ...
- gym 100947I (求因子)
What a Mess Alex is a very clever boy, after all he is the son of the greatest watchmaker in Odin. O ...