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. AVL树(平衡二叉树)

    定义及性质 AVL树:AVL树是一颗自平衡的二叉搜索树. AVL树具有以下性质: 根的左右子树的高度只差的绝对值不能超过1 根的左右子树都是 平衡二叉树(AVL树) 百度百科: 平衡二叉搜索树(Sel ...

  2. ssh密钥分发之二:使用sshpass配合ssh-kopy-id编写脚本批量分发密钥:

    使用sshpass配合ssh-kopy-id编写脚本批量分发密钥: 首先sshpass是一个ssh连接时的免交互工具,首先要安装一下: yum install sshpass -y 接下来我们就可以使 ...

  3. 洛谷 P4585 [FJOI2015]火星商店问题

    (勿看,仅作笔记) bzoj权限题... https://www.luogu.org/problemnew/show/P4585 对于特殊商品,直接可持久化trie处理一下即可 剩下的,想了一段时间c ...

  4. 洛谷 P1892 团伙

    P1892 团伙 并查集 #include<cstdio> int fa[2500];//fa[i]表示i的朋友所在集合,fa[i+n]表示i的敌人所在集合 bool boo[2500]; ...

  5. iphone 开发Categories 、Extensions 区别 --转

    Category和Extension这两个概念,即便对于Java程序员,可能也会感到陌生.这是Objective C为程序员提供的两个强大的动态机制——简单地说,它们允许程序员为已有的对象添加新的方法 ...

  6. 142 Linked List Cycle II 环形链表 II

    给一个链表,返回链表开始入环的第一个节点. 如果链表无环,则返回 null.说明:不应修改给定的链表.补充:你是否可以不用额外空间解决此题?详见:https://leetcode.com/proble ...

  7. php使用json_decode返回NULL

    php5.2以后自带json_decode函数,但是对json文本串的格式要求非常严格. 很可能使用该函数得到的返回值是NULL 可以使用使用json_last_error()函数获取到的返回值来帮助 ...

  8. 必看的dockerfile禁忌与建议!

    直接上对照组(看第三个run) test1 FROM centos MAINTAINER ** ​ RUN yum -y update RUN yum -y install wget ​ RUN wg ...

  9. javajsp,Servlet:Property 'Id' not found

    avax.el.PropertyNotFoundException: Property 'Id' not found on type  org.androidpn.server.model.CarSo ...

  10. Smart SVN的使用

    最近项目使用了SVN,为管理代码起到了很好的作用!但是,对于很多初步使用着,还是非常不容易! 公司使用的是Smart SVN 客户端. Smart SVN 这个工具总体还是挺不错的! 在代码的提交和获 ...