Skip to content
Snippets Groups Projects
Commit bd7a7c8f authored by Jerome Chauveau's avatar Jerome Chauveau
Browse files

poignets de crop points cardinaux : N,S,E,W,NE,NW,SE,SW

parent bac75b41
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
src/components/editors/ImageResourceEditor.vue
+ 209
− 74
View file @ bd7a7c8f
...@@ -22,23 +22,42 @@ ...@@ -22,23 +22,42 @@
<div class="crop-box" :style="getCropBoxCSS"> <div class="crop-box" :style="getCropBoxCSS">
<!-- <img :src="scaledAndRotatedImageUrl"/>--> <!-- <img :src="scaledAndRotatedImageUrl"/>-->
<span class="crop-move-all" @mousedown="dragStart($event,dragDirections.all)"/> <span class="crop-move-all" @mousedown="dragStart($event,dragDirections.all)"/>
<!-- cropping lines -->
<span class="crop-line crop-line-n" @mousedown="dragStart($event,dragDirections.north)"/> <span class="crop-line crop-line-n" @mousedown="dragStart($event,dragDirections.north)"/>
<span class="crop-line crop-line-e" @mousedown="dragStart($event,dragDirections.east)"/> <span class="crop-line crop-line-e" @mousedown="dragStart($event,dragDirections.east)"/>
<span class="crop-line crop-line-s" @mousedown="dragStart($event,dragDirections.south)"/> <span class="crop-line crop-line-s" @mousedown="dragStart($event,dragDirections.south)"/>
<span class="crop-line crop-line-w" @mousedown="dragStart($event,dragDirections.west)"/> <span class="crop-line crop-line-w" @mousedown="dragStart($event,dragDirections.west)"/>
<!--cropping points -->
<span class="crop-point crop-point-n" :style="'background-color:'+this.color"
@mousedown="dragStart($event,dragDirections.north)"/>
<span class="crop-point crop-point-e" :style="'background-color:'+this.color"
@mousedown="dragStart($event,dragDirections.east)"/>
<span class="crop-point crop-point-s" :style="'background-color:'+this.color"
@mousedown="dragStart($event,dragDirections.south)"/>
<span class="crop-point crop-point-w" :style="'background-color:'+this.color"
@mousedown="dragStart($event,dragDirections.west)"/>
<span class="crop-point crop-point-se" :style="'background-color:'+this.color"
@mousedown="dragStart($event,dragDirections.southeast)"/>
<span class="crop-point crop-point-sw" :style="'background-color:'+this.color"
@mousedown="dragStart($event,dragDirections.southwest)"/>
<span class="crop-point crop-point-ne" :style="'background-color:'+this.color"
@mousedown="dragStart($event,dragDirections.northeast)"/>
<span class="crop-point crop-point-nw" :style="'background-color:'+this.color"
@mousedown="dragStart($event,dragDirections.northwest)"/>
</div> </div>
</div> </div>
</div> </div>
<!-- <div v-else id="img-preview" :style="getPreviewImageCSS"></div>--> <!-- <div v-else id="img-preview" :style="getPreviewImageCSS"></div>-->
<canvas v-else id="preview-canvas" class="mt-2"> <canvas v-else id="preview-canvas" class="mt-2"></canvas>
</canvas> <v-card v-if="!preview" id="form" class="d-flex flex-column caption" width="80px" color="#272727">
<v-card id="form" class="d-flex flex-column caption" width="80px" color="#272727">
<v-card-text> <v-card-text>
<input type="color" v-model="color" class="mb-2"/> <input type="color" v-model="color" class="mb-2"/>
<v-btn small @click="reset" class="mb-5" title="reset"><v-icon>mdi-reload</v-icon></v-btn> <v-btn small @click="reset" class="mb-5" title="reset">
<v-icon>mdi-reload</v-icon>
</v-btn>
<v-text-field dark class="caption" hide-details dense label="Gauche" step="1" type="number" min="0" <v-text-field dark class="caption" hide-details dense label="Gauche" step="1" type="number" min="0"
v-model="cropLeft"/> v-model="cropLeft"/>
<v-text-field dark hide-details dense class="mt-8 caption" label="Haut" step="1" type="number" min="0" <v-text-field dark hide-details dense class="mt-8 caption" label="Haut" step="1" type="number" min="0"
...@@ -47,7 +66,8 @@ ...@@ -47,7 +66,8 @@
v-model="cropRight"/> v-model="cropRight"/>
<v-text-field dark hide-details dense class="mt-8 caption" label="Bas" step="1" type="number" min="0" <v-text-field dark hide-details dense class="mt-8 caption" label="Bas" step="1" type="number" min="0"
v-model="cropBottom"/> v-model="cropBottom"/>
<v-text-field dark hide-details dense label="Rotation" class="mt-8 caption" step="0.01" type="number" min="-360" max="360" <v-text-field dark hide-details dense label="Rotation" class="mt-8 caption" step="0.01" type="number"
min="-360" max="360"
v-model="rotation"/> v-model="rotation"/>
<div class="mt-5 pa-0"> <div class="mt-5 pa-0">
<span class="mt-8 pt-5 grey--text">Zoom</span> <span class="mt-8 pt-5 grey--text">Zoom</span>
...@@ -77,6 +97,11 @@ const DRAG_E = 'E'; ...@@ -77,6 +97,11 @@ const DRAG_E = 'E';
const DRAG_S = 'S'; const DRAG_S = 'S';
const DRAG_W = 'W'; const DRAG_W = 'W';
const DRAG_ALL = 'A'; const DRAG_ALL = 'A';
const DRAG_SE = 'SE';
const DRAG_SW = 'SW';
const DRAG_NE = 'NE';
const DRAG_NW = 'NW';
const DEFAULT_CROP = 10;
export default { export default {
name: "ImageResourceEditor", name: "ImageResourceEditor",
...@@ -174,11 +199,11 @@ export default { ...@@ -174,11 +199,11 @@ export default {
maxHeight: null, maxHeight: null,
maxWidth: null, maxWidth: null,
imageDimensions: null, imageDimensions: null,
cropTop: 200, cropTop: DEFAULT_CROP,
cropRight: 50, cropRight: DEFAULT_CROP,
cropBottom: 20, cropBottom: DEFAULT_CROP,
cropLeft: 500, cropLeft: DEFAULT_CROP,
rotation: 0, rotation: DEFAULT_CROP,
margin: 100, margin: 100,
renderedImageDimensions: null, renderedImageDimensions: null,
dragPos: {}, dragPos: {},
...@@ -187,6 +212,10 @@ export default { ...@@ -187,6 +212,10 @@ export default {
east: DRAG_E, east: DRAG_E,
south: DRAG_S, south: DRAG_S,
west: DRAG_W, west: DRAG_W,
southeast: DRAG_SE,
southwest : DRAG_SW,
northeast : DRAG_NE,
northwest: DRAG_NW,
all: DRAG_ALL all: DRAG_ALL
}, },
preview: false, preview: false,
...@@ -255,6 +284,10 @@ export default { ...@@ -255,6 +284,10 @@ export default {
this.dragPos.lastX = evt.clientX / this.zoom; this.dragPos.lastX = evt.clientX / this.zoom;
break; break;
case DRAG_ALL: case DRAG_ALL:
case DRAG_SE:
case DRAG_SW:
case DRAG_NE :
case DRAG_NW :
this.dragPos.yStart = evt.clientY / this.zoom; this.dragPos.yStart = evt.clientY / this.zoom;
this.dragPos.lastY = evt.clientY / this.zoom; this.dragPos.lastY = evt.clientY / this.zoom;
this.dragPos.xStart = evt.clientX / this.zoom; this.dragPos.xStart = evt.clientX / this.zoom;
...@@ -278,6 +311,22 @@ export default { ...@@ -278,6 +311,22 @@ export default {
case DRAG_W : case DRAG_W :
this.cropLeft = Math.max(Math.floor(this.cropLeft), 0); this.cropLeft = Math.max(Math.floor(this.cropLeft), 0);
break; break;
case DRAG_SE:
this.cropRight = Math.max(Math.floor(this.cropRight), 0);
this.cropBottom = Math.max(Math.floor(this.cropBottom), 0);
break;
case DRAG_SW:
this.cropBottom = Math.max(Math.floor(this.cropBottom), 0);
this.cropLeft = Math.max(Math.floor(this.cropLeft), 0);
break;
case DRAG_NE :
this.cropTop = Math.max(Math.floor(this.cropTop), 0);
this.cropRight = Math.max(Math.floor(this.cropRight), 0);
break;
case DRAG_NW:
this.cropTop = Math.max(Math.floor(this.cropTop), 0);
this.cropLeft = Math.max(Math.floor(this.cropLeft), 0);
break;
case DRAG_ALL : case DRAG_ALL :
this.cropLeft = Math.max(Math.floor(this.cropLeft), 0); this.cropLeft = Math.max(Math.floor(this.cropLeft), 0);
this.cropRight = Math.max(Math.floor(this.cropRight), 0); this.cropRight = Math.max(Math.floor(this.cropRight), 0);
...@@ -308,6 +357,30 @@ export default { ...@@ -308,6 +357,30 @@ export default {
this.cropLeft += (evt.clientX / this.zoom - this.dragPos.lastX) / this.scale; this.cropLeft += (evt.clientX / this.zoom - this.dragPos.lastX) / this.scale;
this.dragPos.lastX = evt.clientX / this.zoom; this.dragPos.lastX = evt.clientX / this.zoom;
break; break;
case DRAG_SE:
this.cropBottom -= (evt.clientY / this.zoom - this.dragPos.lastY) / this.scale;
this.cropRight -= (evt.clientX / this.zoom - this.dragPos.lastX) / this.scale;
this.dragPos.lastY = evt.clientY / this.zoom;
this.dragPos.lastX = evt.clientX / this.zoom;
break;
case DRAG_SW:
this.cropBottom -= (evt.clientY / this.zoom - this.dragPos.lastY) / this.scale;
this.cropLeft += (evt.clientX / this.zoom - this.dragPos.lastX) / this.scale;
this.dragPos.lastY = evt.clientY / this.zoom;
this.dragPos.lastX = evt.clientX / this.zoom;
break;
case DRAG_NE :
this.cropRight -= (evt.clientX / this.zoom - this.dragPos.lastX) / this.scale;
this.cropTop += (evt.clientY / this.zoom - this.dragPos.lastY) / this.scale;
this.dragPos.lastY = evt.clientY / this.zoom;
this.dragPos.lastX = evt.clientX / this.zoom;
break;
case DRAG_NW :
this.cropLeft += (evt.clientX / this.zoom - this.dragPos.lastX) / this.scale;
this.cropTop += (evt.clientY / this.zoom - this.dragPos.lastY) / this.scale;
this.dragPos.lastY = evt.clientY / this.zoom;
this.dragPos.lastX = evt.clientX / this.zoom;
break;
case DRAG_ALL : case DRAG_ALL :
this.cropLeft += (evt.clientX / this.zoom - this.dragPos.lastX) / this.scale; this.cropLeft += (evt.clientX / this.zoom - this.dragPos.lastX) / this.scale;
this.cropRight -= (evt.clientX / this.zoom - this.dragPos.lastX) / this.scale; this.cropRight -= (evt.clientX / this.zoom - this.dragPos.lastX) / this.scale;
...@@ -362,7 +435,6 @@ export default { ...@@ -362,7 +435,6 @@ export default {
} }
} }
} }
</script> </script>
...@@ -374,6 +446,7 @@ export default { ...@@ -374,6 +446,7 @@ export default {
max-height: 100vh; max-height: 100vh;
overflow-x: hidden; overflow-x: hidden;
} }
#form { #form {
position: fixed; position: fixed;
top: 20px; top: 20px;
...@@ -442,4 +515,66 @@ input[type=color]{ ...@@ -442,4 +515,66 @@ input[type=color]{
left: 0; left: 0;
} }
.crop-point {
//background-color: #0000FF;
height: 5px;
opacity: 0.75;
width: 5px;
display: block;
position: absolute;
}
.crop-point-e {
cursor: e-resize;
margin-top: -3px;
right: -3px;
top: 50%;
}
.crop-point-n {
cursor: s-resize;
margin-left: -3px;
top: -3px;
left: 50%;
}
.crop-point-s {
bottom: -3px;
cursor: s-resize;
left: 50%;
margin-left: -3px;
}
.crop-point-w {
cursor: w-resize;
left: -3px;
margin-top: -3px;
top: 50%;
}
.crop-point-se {
//height: 5px;
//opacity: 0.75;
//width: 5px;
bottom: -3px;
cursor: nwse-resize;
right: -3px;
}
.crop-point-sw {
bottom: -3px;
cursor: nesw-resize;
left: -3px;
}
.crop-point-ne {
cursor: nesw-resize;
right: -3px;
top: -3px;
}
.crop-point-nw {
cursor: nwse-resize;
left: -3px;
top: -3px;
}
</style> </style>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment