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组件之图片剪切器)的更多相关文章

  1. jquery插件-自由拖拽

    最近工作不是很忙,学习之余想整理一些代码出来,首先想到的就是是js拖拽. 两年前去某公司面试的时候,曾经被问过这个问题,如何在页面上拖放元素,尽管现在看起来很简单,但当时的我半点思路都没有,面试想当然 ...

  2. 简洁的drag效果,自由拖拽div的实现及注意点

    偶然间看到了以前做的一个简洁的div拖拽效果,修改了一下加点注释,经测试完美通过firefox/chrome/ie6-11,现拿来分享一下. 先说一下实现原理及要点,最主要的有三步.第一步是mouse ...

  3. Javascript自由拖拽类

    基本拖拽配置 new Dragdrop({target 拖拽元素 HTMLElemnt 必选bridge 指定鼠标按下哪个元素时开始拖拽,实现模态对话框时用到 dragable 是否可拖拽 (true ...

  4. 自由拖拽DIV实现

    最近在做的项目有个效果是要实现div随意拖拽改变大小,前端框架选择的是vue.js,UI用的是element,拖拽效果可以很简单的实现,但是在拖拽过程中发现会对其他元素实现全选效果,因此最后选择使用元 ...

  5. vue自由拖拽、缩放组件

    github地址:https://github.com/kirillmurashov/vue-drag-resize 安装: npm i -s vue-drag-resize 使用: <temp ...

  6. JavaScript中上传文件为图片如何读取+JS中如何使用clip()剪切指定区域(UI组件之图片剪裁器)

    File读取和FileReader() //获取上传的文件/图片 function getFile(){ var files,len; var reader = new FileReader(); v ...

  7. vue简单的自由拖拽

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. JQuery之拖拽插件

    一直以来,都对JS获取元素的位置感到非常的困惑:一会client.一会offset.一会scroll. 再加上各大浏览器之间的不兼容,唉,搞得哥晕晕乎乎的. 而很多页面效果都要用到这些位置.不得已,得 ...

  9. WPF.UIShell UIFramework之自定义窗口的深度技术 - 模态闪动(Blink)、窗口四边拖拽支持(WmNCHitTest)、自定义最大化位置和大小(WmGetMinMaxInfo)

    无论是在工作和学习中使用WPF时,我们通常都会接触到CustomControl,今天我们就CustomWindow之后的一些边角技术进行探讨和剖析. 窗口(对话框)模态闪动(Blink) 自定义窗口的 ...

随机推荐

  1. JAVA学习笔记(一)配置环境

    java语言的两种机制: Java 的虚拟机机制(JVM):虚拟机机制保证Java程序的跨平台特性. Java 的垃圾回收机制:垃圾回收机制保证Java程序更安全.更高效. 环境搭配:安装JDK和JR ...

  2. 【SCOI2016】Day1 模拟

    2018.8.16 8:00~11:06 先看t1,成功读错题... 以为是一个字符串的所有后缀都得在计划表里,否则权值就得是$n^2$ 然后花了一个小时多一点写了一个错误的做法 然后没有分 才发现看 ...

  3. Codeforces Round #408 (Div. 2) B

    Description Zane the wizard is going to perform a magic show shuffling the cups. There are n cups, n ...

  4. h5-15-svg格式图片

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. JDBC全部分析

    2.1.搭建实验环境 1.在mysql中创建一个库,并创建user表和插入表的数据. SQL脚本如下: 1 create database jdbcStudy character set utf8 c ...

  6. salt-stack系列报错

    master启动报错 实验环境为: [root@master salt]# cat /proc/version Linux version 3.10.0-327.el7.x86_64 (mockbui ...

  7. RHEL 7.2 源码安装Python 3.6.2报错

    报错代码:zipimport.ZipImportError: can't decompress data; zlib not available 一条命令解决:yum install zlib-dev ...

  8. 分层开发之C#分层

    假如没有用分层开发,仔细分析三人的开发过程,很容易发现其中的问题: >三人排队式的轮番工作,花费的时间是三人工作时间之和. >后面开发的人基本都是要先花费时间熟悉前面人的代码,否则开发难以 ...

  9. 洛谷P1251 餐巾计划问题(最小费用最大流)

    题意 一家餐厅,第$i$天需要$r_i$块餐巾,每天获取餐巾有三种途径 1.以$p$的费用买 2.以$f$的费用送到快洗部,并在$m$天后取出 3.以$s$的费用送到慢洗部,并在$n$天后取出 问满足 ...

  10. 成为Android高手必须掌握的8项基本要求

    [1] Android操作系统概述 1. Android系统架构. 2. Android利用设计理念. 3. Android 开源知识. 4. Android 参考网站与权威信息.[2] Androi ...