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. 【loj10061】最短母串

    #10061. 「一本通 2.4 练习 4」最短母串 内存限制:512 MiB 时间限制:1000 ms 标准输入输出 题目类型:传统 评测方式:文本比较 上传者: 1bentong 提交    提交 ...

  2. _bzoj1029 [JSOI2007]建筑抢修【贪心 堆】

    传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=1029 经典的贪心问题,不解释. #include <cstdio> #inclu ...

  3. set有关的函数的用法(The SetStack Computer UVA - 12096)

    #include<bits/stdc++.h> using namespace std; typedef set<int> Set; map<Set,int> ID ...

  4. 题解报告:hdu1201(18岁生日)

    2018-02-24题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1201 Problem Description Gardon的18岁生日就要到了,他 ...

  5. nginx缓存配置及开启gzip压缩

    阅读目录 一:nginx缓存配置 二:nginx开启gzip 回到顶部 一:nginx缓存配置 在前一篇文章,我们理解过http缓存相关的知识点, 请看这篇文章. 今天我们来学习下使用nginx服务来 ...

  6. PHP在不同页面间传递Json数据示例代码

    gettest.php文件: <?php $value["name"]= urlencode("我的姓名"); $value["pass&quo ...

  7. get log

    C:\Users\wb_changxiang.chen\Desktop\get_log_adb.py #! /usr/bin/env pythonimport osimport sysimport t ...

  8. ABAP的HTTP_GET和Linux的curl

    curl是利用URL语法在命令行方式下工作的开源文件传输工具,广泛应用在Unix,多种Linux发行版中. 在Windows系统下也有移植版. curl尤其被广泛应用在github上众多开源软件和框架 ...

  9. Linux OpenGL 实践篇-10-framebuffer

    在之前的实践中我们都是在当前的窗口中渲染,即使用的缓存都是由glutCreateWindow时创建的缓存,我们可称之为默认缓存.它是唯一一个可以被图形服务器的显示系统识别的帧缓存,我们在屏幕上看到的只 ...

  10. G7或变G6+1?特朗普七国峰会箱友军开炮

    今日导读 G7 峰会刚召开完毕,德国总理默克尔发的一张照片就迅速火遍全球.照片中她身体前倾,像是在质问特朗普,而后者则双手交叉胸前,我自岿然不动,这张火药味十足的照片不禁让人脑补当时剑拔弩张的气氛.到 ...