Skip to content

Commit

Permalink
update
Browse files Browse the repository at this point in the history
  • Loading branch information
@legeneek
legeneek committed Apr 21, 2017
1 parent 9293299 commit 5ae7c19
Show file tree
Hide file tree
Showing 3 changed files with 29 additions and 24 deletions.
7 changes: 6 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,9 @@ npm run build

## Usage

Just add CustomCropper.vue and SelectBox.vue to your project, then use it like this:
Just add CustomCropper.vue and SelectBox.vue to your project.

CustomCropper.vue require SelectBox.vue, you need to put them in the same directory

```
<template>
Expand All @@ -40,3 +42,6 @@ Just add CustomCropper.vue and SelectBox.vue to your project, then use it like t
</script>
```

## License
MIT
12 changes: 6 additions & 6 deletions src/components/CustomCropper.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
<div class="img-container">
<img id="clip_src_img" @load="srcImgLoaded" :src="img">
<div class="shadow-box"></div>
<Select-Box ref="box" :srcSize="imgSize" :radio="radio" :img="img" @selectEnd="selectEnd"
<Select-Box ref="box" :srcSize="imgSize" :ratio="ratio" :img="img" @selectEnd="selectEnd"
@selectChange="selectChange"></Select-Box>
</div>
</div>
Expand Down Expand Up @@ -53,7 +53,7 @@
nw: 0,
nh: 0,
clipData: null,
radio: 16 / 10, // equal to container's width / height
ratio: 16 / 10, // equal to container's width / height
imgSize: {w: 0, h: 0},
containerTop: 0
}
Expand Down Expand Up @@ -103,23 +103,23 @@
this.clipData = null
},
setImgSize () {
// image's naturalWidth naturalHeight radio
// image's naturalWidth naturalHeight ratio
const nr = this.nw / this.nh
const scw = this.$containerBox.offsetWidth
const sch = this.$containerBox.offsetHeight
let rw = 0 // select box width
let rh = 0 // select box height
if (nr >= this.radio) {
if (nr >= this.ratio) {
this.imgSize.w = scw
this.imgSize.h = scw / nr
this.containerTop = (sch - this.imgSize.h) / 2
rh = this.imgSize.h
rw = rh * this.radio
rw = rh * this.ratio
} else {
this.imgSize.h = sch
this.imgSize.w = sch * nr
rw = this.imgSize.w
rh = rw / this.radio
rh = rw / this.ratio
}
this.$srcImg.setAttribute('style', `width:${this.imgSize.w}px;height:${this.imgSize.h}px;`)
this.$imgContainer.setAttribute('style',
Expand Down
34 changes: 17 additions & 17 deletions src/components/SelectBox.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
<script>
export default {
props: {
radio: {},
ratio: {},
img: {},
srcSize: {}
},
Expand Down Expand Up @@ -161,33 +161,33 @@
} else if (this.action === 'cross') {
if (dx > 0 && dy > 0) {
w = dx + this.rec.l >= elWidth ? elWidth - this.rec.l : dx
h = w / this.radio
h = w / this.ratio
if (h + this.rec.t > elHeight) {
h = elHeight - this.rec.t
w = h * this.radio
w = h * this.ratio
}
this.rec.w = w
this.rec.h = h
} else if (dx > 0 && dy < 0) {
w = dx + this.referPoint.x >= elWidth ? elWidth - this.referPoint.x : dx
h = w / this.radio
h = w / this.ratio
if (h >= this.referPoint.y) {
h = this.referPoint.y
w = h * this.radio
w = h * this.ratio
}
this.rec.t = this.referPoint.y - h
this.rec.w = w
this.rec.h = h
} else if (dx < 0 && dy < 0) {
w = dx + this.referPoint.x <= 0 ? this.referPoint.x : -dx
h = w / this.radio
h = w / this.ratio
if (h >= this.referPoint.y) {
h = this.referPoint.y
w = h * this.radio
w = h * this.ratio
}
this.rec.t = this.referPoint.y - h
Expand All @@ -196,11 +196,11 @@
this.rec.h = h
} else if (dx < 0 && dy > 0) {
w = dx + this.referPoint.x <= 0 ? this.referPoint.x : -dx
h = w / this.radio
h = w / this.ratio
if (h + this.referPoint.y >= elHeight) {
h = elHeight - this.referPoint.y
w = h * this.radio
w = h * this.ratio
}
this.rec.l = this.referPoint.x - w
Expand All @@ -213,41 +213,41 @@
h = y - (this.referPoint.y + this.pt)
if (w < 0 && h < 0) {
w = w * -1 >= this.referPoint.x ? this.referPoint.x : w * -1
h = w / this.radio
h = w / this.ratio
if (h >= this.referPoint.y) {
h = this.referPoint.y
w = h * this.radio
w = h * this.ratio
}
this.rec.l = this.referPoint.x - w
this.rec.t = this.referPoint.y - h
} else if (w < 0 && h > 0) {
w = w * -1 >= this.referPoint.x ? this.referPoint.x : w * -1
h = w / this.radio
h = w / this.ratio
if (h >= elHeight - this.referPoint.y) {
h = elHeight - this.referPoint.y
w = h * this.radio
w = h * this.ratio
}
this.rec.l = this.referPoint.x - w
this.rec.t = this.referPoint.y
} else if (w > 0 && h < 0) {
w = w >= elWidth - this.referPoint.x ? elWidth - this.referPoint.x : w
h = w / this.radio
h = w / this.ratio
if (h >= this.referPoint.y) {
h = this.referPoint.y
w = h * this.radio
w = h * this.ratio
}
this.rec.l = this.referPoint.x
this.rec.t = this.referPoint.y - h
} else if (w > 0 && h > 0) {
w = w >= elWidth - this.referPoint.x ? elWidth - this.referPoint.x : w
h = w / this.radio
h = w / this.ratio
if (h >= elHeight - this.referPoint.y) {
h = elHeight - this.referPoint.y
w = h * this.radio
w = h * this.ratio
}
this.rec.l = this.referPoint.x
this.rec.t = this.referPoint.y
Expand Down

0 comments on commit 5ae7c19

Please sign in to comment.