github/PPTist
1
0
Fork 0
mirror of https://github.com/pipipi-pikachu/PPTist.git synced 2025-04-15 02:20:00 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: 增加图片裁剪的宽高比锁定

Browse Source
This commit is contained in:
pipipi-pikachu 2021-02-10 17:45:46 +08:00
parent 1b16514984
commit ea1c37017c
1 changed files with 18 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/views/components/element/ImageElement/ImageClipHandler.vue
View File

@ -39,7 +39,7 @@
:key="point" :key="point"
@mousedown.stop="$event => scaleClipRange($event, point)" @mousedown.stop="$event => scaleClipRange($event, point)"
> >
<SvgWrapper width="12" height="12" fill="#fff" stroke="#333"> <SvgWrapper width="16" height="16" fill="#fff" stroke="#333">
<path <path
stroke-width="0.3" stroke-width="0.3"
shape-rendering="crispEdges" shape-rendering="crispEdges"
@ -93,6 +93,7 @@ export default defineComponent({
setup(props, { emit }) { setup(props, { emit }) {
const store = useStore() const store = useStore()
const canvasScale = computed(() => store.state.canvasScale) const canvasScale = computed(() => store.state.canvasScale)
const ctrlOrShiftKeyActive = computed<boolean>(() => store.getters.ctrlOrShiftKeyActive)
const topImgWrapperPosition = reactive({ const topImgWrapperPosition = reactive({
top: 0, top: 0,
@ -198,17 +199,17 @@ export default defineComponent({
emit('clip', clipedEmitData) emit('clip', clipedEmitData)
} }
const keyboardClip = (e: KeyboardEvent) => { const keyboardListener = (e: KeyboardEvent) => {
const key = e.key.toUpperCase() const key = e.key.toUpperCase()
if (key === KEYS.ENTER) handleClip() if (key === KEYS.ENTER) handleClip()
} }
onMounted(() => { onMounted(() => {
initClipPosition() initClipPosition()
document.addEventListener('keydown', keyboardClip) document.addEventListener('keydown', keyboardListener)
}) })
onUnmounted(() => { onUnmounted(() => {
document.removeEventListener('keydown', keyboardClip) document.removeEventListener('keydown', keyboardListener)
}) })
const getRange = () => { const getRange = () => {
@ -304,6 +305,8 @@ export default defineComponent({
height: topImgWrapperPosition.height, height: topImgWrapperPosition.height,
} }
const aspectRatio = topImgWrapperPosition.width / topImgWrapperPosition.height
document.onmousemove = e => { document.onmousemove = e => {
if (!isMouseDown) return if (!isMouseDown) return
@ -313,6 +316,11 @@ export default defineComponent({
let moveX = (currentPageX - startPageX) / canvasScale.value / props.width * 100 let moveX = (currentPageX - startPageX) / canvasScale.value / props.width * 100
let moveY = (currentPageY - startPageY) / canvasScale.value / props.height * 100 let moveY = (currentPageY - startPageY) / canvasScale.value / props.height * 100
if (ctrlOrShiftKeyActive.value) {
if (type === 'b-r' || type === 't-l') moveY = moveX / aspectRatio
if (type === 'b-l' || type === 't-r') moveY = -moveX / aspectRatio
}
let targetLeft, targetTop, targetWidth, targetHeight let targetLeft, targetTop, targetWidth, targetHeight
// 根据不同缩放点，计算目标大小和位置，同时做大小和范围的限制 // 根据不同缩放点，计算目标大小和位置，同时做大小和范围的限制
@ -459,8 +467,8 @@ export default defineComponent({
.clip-point { .clip-point {
position: absolute; position: absolute;
width: 12px; width: 16px;
height: 12px; height: 16px;
left: 0; left: 0;
top: 0; top: 0;
transform-origin: 0 0; transform-origin: 0 0;
@ -473,27 +481,27 @@ export default defineComponent({
} }
&.t-l { &.t-l {
cursor: nwse-resize;
left: 0; left: 0;
top: 0; top: 0;
cursor: nwse-resize;
} }
&.t-r { &.t-r {
cursor: nesw-resize;
left: 100%; left: 100%;
top: 0; top: 0;
transform: rotate(90deg); transform: rotate(90deg);
cursor: nesw-resize;
} }
&.b-l { &.b-l {
cursor: nesw-resize;
left: 0; left: 0;
top: 100%; top: 100%;
transform: rotate(-90deg); transform: rotate(-90deg);
cursor: nesw-resize;
} }
&.b-r { &.b-r {
cursor: nwse-resize;
left: 100%; left: 100%;
top: 100%; top: 100%;
transform: rotate(180deg); transform: rotate(180deg);
cursor: nwse-resize;
} }
} }
</style> </style>