From ab7f76680c28535fbafc406fd5a6e8e72449af3a Mon Sep 17 00:00:00 2001
From: Lichun Dai <a546684355@qq.com>
Date: Thu, 16 Nov 2017 14:56:07 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0gulp?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 build/gulpfile.js          |  2 +-
 dist/image-process.css     | 94 ++++++++++++++++++++++++++++++++++++++
 dist/image-process.min.css |  2 +-
 package.json               |  2 +-
 src/styl/index.styl        |  4 +-
 5 files changed, 100 insertions(+), 4 deletions(-)

diff --git a/build/gulpfile.js b/build/gulpfile.js
index fe13559..bc86bed 100644
--- a/build/gulpfile.js
+++ b/build/gulpfile.js
@@ -155,7 +155,7 @@ gulp.task('default', (callback) => {
 gulp.task('watch', () => {
     gulp.watch([
         resolvePath(`${SOURCE_ROOT_PATH}/**/*.js`),
-        resolvePath(`${SOURCE_ROOT_PATH}/**/*.css`),
+        resolvePath(`${SOURCE_ROOT_PATH}/**/*.styl`),
         resolvePath('build/**/*.js'),
         resolvePath('test/**/*.js'),
     ], ['default']);
diff --git a/dist/image-process.css b/dist/image-process.css
index f4d336f..3599aab 100644
--- a/dist/image-process.css
+++ b/dist/image-process.css
@@ -1,3 +1,97 @@
 .hidden {
   display: none;
 }
+.img-clip {
+  position: relative;
+  width: 95%;
+  margin: 0 auto;
+  padding: 0;
+}
+.img-clip canvas {
+  display: block;
+}
+.img-clip .magnifier {
+  position: absolute;
+  top: -90px;
+  right: 0;
+/**
+         * 显示的值，真实的宽高内部会设置
+         */
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  border: 2px solid #fff;
+}
+.img-clip .clip-hidden {
+  display: none;
+}
+.img-clip .clip-rect {
+  position: absolute;
+  border: 1px dashed #de3c50;
+  top: 10px;
+  left: 10px;
+  width: 100px;
+  height: 100px;
+}
+.img-clip .clip-rect .clip-tips {
+  position: absolute;
+  top: -40px;
+  left: 0;
+  padding: 5px;
+  font-size: 13px;
+  background-color: #333;
+  border-radius: 5px;
+  color: #fff;
+}
+.img-clip .clip-rect-horn {
+  position: absolute;
+  display: block;
+  background-color: rgba(222,60,80,0.7);
+  border-radius: 50%;
+  width: 20px;
+  height: 20px;
+}
+.img-clip .horn-n {
+  top: -10px;
+  left: 50%;
+  margin-left: -10px;
+  cursor: n-resize;
+}
+.img-clip .horn-s {
+  bottom: -10px;
+  left: 50%;
+  margin-left: -10px;
+  cursor: s-resize;
+}
+.img-clip .horn-w {
+  top: 50%;
+  left: -10px;
+  margin-top: -10px;
+  cursor: w-resize;
+}
+.img-clip .horn-e {
+  top: 50%;
+  right: -10px;
+  margin-top: -10px;
+  cursor: e-resize;
+}
+.img-clip .horn-nw {
+  top: -10px;
+  left: -10px;
+  cursor: nw-resize;
+}
+.img-clip .horn-ne {
+  top: -10px;
+  right: -10px;
+  cursor: ne-resize;
+}
+.img-clip .horn-sw {
+  bottom: -10px;
+  left: -10px;
+  cursor: sw-resize;
+}
+.img-clip .horn-se {
+  bottom: -10px;
+  right: -10px;
+  cursor: se-resize;
+}
diff --git a/dist/image-process.min.css b/dist/image-process.min.css
index d596293..c34d87f 100644
--- a/dist/image-process.min.css
+++ b/dist/image-process.min.css
@@ -1 +1 @@
-.hidden{display:none}
\ No newline at end of file
+.hidden{display:none}.img-clip{position:relative;width:95%;margin:0 auto;padding:0}.img-clip canvas{display:block}.img-clip .magnifier{position:absolute;top:-90px;right:0;width:80px;height:80px;border-radius:50%;border:2px solid #fff}.img-clip .clip-hidden{display:none}.img-clip .clip-rect{position:absolute;border:1px dashed #de3c50;top:10px;left:10px;width:100px;height:100px}.img-clip .clip-rect .clip-tips{position:absolute;top:-40px;left:0;padding:5px;font-size:13px;background-color:#333;border-radius:5px;color:#fff}.img-clip .clip-rect-horn{position:absolute;display:block;background-color:rgba(222,60,80,.7);border-radius:50%;width:20px;height:20px}.img-clip .horn-n{top:-10px;left:50%;margin-left:-10px;cursor:n-resize}.img-clip .horn-s{bottom:-10px;left:50%;margin-left:-10px;cursor:s-resize}.img-clip .horn-w{top:50%;left:-10px;margin-top:-10px;cursor:w-resize}.img-clip .horn-e{top:50%;right:-10px;margin-top:-10px;cursor:e-resize}.img-clip .horn-nw{top:-10px;left:-10px;cursor:nw-resize}.img-clip .horn-ne{top:-10px;right:-10px;cursor:ne-resize}.img-clip .horn-sw{bottom:-10px;left:-10px;cursor:sw-resize}.img-clip .horn-se{bottom:-10px;right:-10px;cursor:se-resize}
\ No newline at end of file
diff --git a/package.json b/package.json
index fb74520..5d46673 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "image-process",
   "version": "0.0.1",
-  "description": "图像处理算法，包括缩放算法(最邻近插值，双线性差值，三次卷积插值)，图像处理（灰度，模糊，锐化，卡通），应用（边缘识别，水印）等",
+  "description": "图像裁剪，图像缩放(最邻近插值，双线性差值，三次卷积插值)，图像滤镜（灰度，模糊，锐化，卡通），应用（边缘识别，水印）等",
   "homepage": "https://github.com/dailc/image-process",
   "repository": {
     "type": "git",
diff --git a/src/styl/index.styl b/src/styl/index.styl
index bab4b69..129dd92 100644
--- a/src/styl/index.styl
+++ b/src/styl/index.styl
@@ -1 +1,3 @@
-@import "./common.styl"
\ No newline at end of file
+@import "./common.styl"
+
+@import "../clip/styl/index.styl"
\ No newline at end of file