mirror of
https://github.com/palxiao/poster-design.git
synced 2025-07-28 04:10:31 +08:00
Merge pull request #97 from palxiao/feature-vue3
fix: image crop for Feature vue3
This commit is contained in:
ShawnPhang
GitHub
commit
6888d85708
@ -6,12 +6,7 @@
|
||||
* @LastEditTime: 2024-03-01 20:55:51
|
||||
*/
|
||||
|
||||
export type LayerIconList = {
|
||||
key: string
|
||||
icon: string
|
||||
tip: string
|
||||
value: number
|
||||
}
|
||||
import { TIconItemSelectData } from "@/components/modules/settings/iconItemSelect.vue"
|
||||
|
||||
export default [
|
||||
{
|
||||
@ -26,4 +21,4 @@ export default [
|
||||
tip: '下一层',
|
||||
value: -1,
|
||||
},
|
||||
] as LayerIconList[]
|
||||
] as TIconItemSelectData[]
|
||||
|
||||
@ -8,6 +8,8 @@
|
||||
// import store from '@/store'
|
||||
// import { getImage } from '../getImgDetail'
|
||||
import setImageData from '@/common/methods/DesignFeatures/setImage'
|
||||
// import wImage from '@/components/modules/widgets/wImage/wImage.vue'
|
||||
import wImageSetting from '@/components/modules/widgets/wImage/wImageSetting'
|
||||
// import wText from '@/components/modules/widgets/wText/wText.vue'
|
||||
import { wTextSetting } from '@/components/modules/widgets/wText/wTextSetting'
|
||||
import wImage from '@/components/modules/widgets/wImage/wImage.vue'
|
||||
@ -23,11 +25,12 @@ export default async function(type: string, item: TCommonItemData, data: Record<
|
||||
setting.fontWeight = item.fontWeight
|
||||
}
|
||||
if (type === 'image' || type === 'mask') {
|
||||
setting = JSON.parse(JSON.stringify(wImage.setting))
|
||||
setting = JSON.parse(JSON.stringify(wImageSetting))
|
||||
const img = await setImageData(item.value)
|
||||
setting.width = img.width
|
||||
setting.height = img.height // parseInt(100 / item.value.ratio, 10)
|
||||
setting.imgUrl = item.value.url
|
||||
console.log("setting", setting)
|
||||
}
|
||||
if (type === 'mask') {
|
||||
setting.mask = item.value.url
|
||||
|
||||
@ -74,7 +74,7 @@ const load = async (init?: boolean) => {
|
||||
loading = true
|
||||
page += 1
|
||||
api.material.getMyPhoto({ page }).then(({ list }) => {
|
||||
list.length <= 0 ? (state.isDone = true) : (state.imgList = state.imgList.concat(list))
|
||||
list.length <= 0 ? (state.isDone = true) : (state.imgList = state.imgList.concat(list as TGetImageListResult[]))
|
||||
setTimeout(() => {
|
||||
loading = false
|
||||
}, 100)
|
||||
|
||||
@ -41,7 +41,8 @@
|
||||
<script lang="ts">
|
||||
import { defineComponent, reactive, toRefs, onMounted, watch } from 'vue'
|
||||
import api from '@/api'
|
||||
import wImage from '../../widgets/wImage/wImage.vue'
|
||||
// import wImage from '../../widgets/wImage/wImage.vue'
|
||||
import wImageSetting from '../../widgets/wImage/wImageSetting'
|
||||
import wSvg from '../../widgets/wSvg/wSvg.vue'
|
||||
import { mapActions, mapGetters } from 'vuex'
|
||||
import setImageData from '@/common/methods/DesignFeatures/setImage'
|
||||
@ -159,7 +160,7 @@ export default defineComponent({
|
||||
return
|
||||
}
|
||||
this.$store.commit('setShowMoveable', false) // 清理掉上一次的选择
|
||||
let setting = item.type === 'svg' ? JSON.parse(JSON.stringify(wSvg.setting)) : JSON.parse(JSON.stringify(wImage.setting))
|
||||
let setting = item.type === 'svg' ? JSON.parse(JSON.stringify(wSvg.setting)) : JSON.parse(JSON.stringify(wImageSetting))
|
||||
const img: any = await setImageData(item)
|
||||
|
||||
setting.width = img.width
|
||||
|
||||
@ -28,7 +28,8 @@
|
||||
// 图片列表
|
||||
const NAME = 'img-list-wrap'
|
||||
import { toRefs, reactive, computed, onMounted } from 'vue'
|
||||
import wImage from '../../widgets/wImage/wImage.vue'
|
||||
// import wImage from '../../widgets/wImage/wImage.vue'
|
||||
import wImageSetting from '../../widgets/wImage/wImageSetting'
|
||||
import api from '@/api'
|
||||
import { useStore } from 'vuex'
|
||||
import setImageData from '@/common/methods/DesignFeatures/setImage'
|
||||
@ -64,7 +65,7 @@ export default {
|
||||
const selectImg = async (index, list) => {
|
||||
const item = list ? list[index] : state.recommendImgList[index]
|
||||
store.commit('setShowMoveable', false) // 清理掉上一次的选择
|
||||
let setting = JSON.parse(JSON.stringify(wImage.setting))
|
||||
let setting = JSON.parse(JSON.stringify(wImageSetting))
|
||||
const img = await setImageData(item) // await getImage(item.url)
|
||||
setting.width = img.width
|
||||
setting.height = img.height // parseInt(100 / item.value.ratio, 10)
|
||||
|
||||
@ -42,7 +42,8 @@ import { useRouter } from 'vue-router'
|
||||
import { useStore } from 'vuex'
|
||||
import uploader from '@/components/common/Uploader'
|
||||
import api from '@/api'
|
||||
import wImage from '../../widgets/wImage/wImage.vue'
|
||||
// import wImage from '../../widgets/wImage/wImage.vue'
|
||||
import wImageSetting from '../../widgets/wImage/wImageSetting'
|
||||
import setImageData, { TItem2DataParam } from '@/common/methods/DesignFeatures/setImage'
|
||||
import useConfirm from '@/common/methods/confirm'
|
||||
import { TGetImageListResult, TMyPhotoResult } from '@/api/material'
|
||||
@ -159,7 +160,7 @@ onMounted(() => {
|
||||
const selectImg = async (index: number) => {
|
||||
const item = state.imgList[index]
|
||||
store.commit('setShowMoveable', false) // 清理掉上一次的选择
|
||||
let setting = JSON.parse(JSON.stringify(wImage.setting))
|
||||
let setting = JSON.parse(JSON.stringify(wImageSetting))
|
||||
const img = await setImageData(item)
|
||||
setting.width = img.width
|
||||
setting.height = img.height // parseInt(100 / item.value.ratio, 10)
|
||||
|
||||
@ -22,20 +22,22 @@
|
||||
// 图标按钮选择组件
|
||||
// const NAME = 'icon-item-select'
|
||||
|
||||
type TPropData = {
|
||||
select: boolean,
|
||||
extraIcon: boolean,
|
||||
tip: string
|
||||
export type TIconItemSelectData = {
|
||||
key?: string
|
||||
select?: boolean,
|
||||
extraIcon?: boolean,
|
||||
tip?: string
|
||||
icon?: string
|
||||
value?: string | number
|
||||
}
|
||||
|
||||
type TProps = {
|
||||
label?: string
|
||||
data: TPropData[]
|
||||
data: TIconItemSelectData[]
|
||||
}
|
||||
|
||||
type TEmits = {
|
||||
(event: 'finish', data: TPropData): void
|
||||
(event: 'finish', data: TIconItemSelectData): void
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<TProps>(), {
|
||||
@ -45,7 +47,7 @@ const props = withDefaults(defineProps<TProps>(), {
|
||||
const emit = defineEmits<TEmits>()
|
||||
|
||||
|
||||
function selectItem(item: TPropData) {
|
||||
function selectItem(item: TIconItemSelectData) {
|
||||
if (typeof item.select !== 'undefined') {
|
||||
item.select = !item.select
|
||||
}
|
||||
|
||||
@ -49,7 +49,7 @@ const props = withDefaults(defineProps<TProps>(), {
|
||||
})
|
||||
const emit = defineEmits<TEmits>()
|
||||
|
||||
const innerValue = ref<number>(0)
|
||||
const innerValue = ref<number>(props.minValue)
|
||||
|
||||
watch(
|
||||
() => innerValue.value,
|
||||
|
||||
@ -7,19 +7,19 @@
|
||||
-->
|
||||
<template>
|
||||
<div id="w-group-style">
|
||||
<el-collapse v-model="activeNames">
|
||||
<el-collapse v-model="state.activeNames">
|
||||
<el-collapse-item title="位置尺寸" name="1">
|
||||
<div class="line-layout">
|
||||
<number-input v-model="innerElement.left" label="X" @finish="(value) => finish('left', value)" />
|
||||
<number-input v-model="innerElement.top" label="Y" @finish="(value) => finish('top', value)" />
|
||||
<number-input v-model="innerElement.width" style="margin-top: 0.5rem" label="宽" @finish="(value) => finish('width', value)" />
|
||||
<number-input v-model="innerElement.height" style="margin-top: 0.5rem" label="高" @finish="(value) => finish('height', value)" />
|
||||
<number-input v-model="state.innerElement.left" label="X" @finish="(value) => finish('left', value)" />
|
||||
<number-input v-model="state.innerElement.top" label="Y" @finish="(value) => finish('top', value)" />
|
||||
<number-input v-model="state.innerElement.width" style="margin-top: 0.5rem" label="宽" @finish="(value) => finish('width', value)" />
|
||||
<number-input v-model="state.innerElement.height" style="margin-top: 0.5rem" label="高" @finish="(value) => finish('height', value)" />
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="样式设置" name="2">
|
||||
<el-button plain type="primary" class="block-btn" @click="ungroup(innerElement.uuid)">取消组合</el-button>
|
||||
<el-button plain type="primary" class="block-btn" @click="store.dispatch('ungroup', state.innerElement.uuid)">取消组合</el-button>
|
||||
<!-- <div class="ungroup style-item" @click="ungroup(innerElement.uuid)">取消组合</div> -->
|
||||
<number-slider v-model="innerElement.opacity" class="style-item" label="不透明" :step="0.05" :maxValue="1" @finish="(value) => finish('opacity', value)" />
|
||||
<number-slider v-model="state.innerElement.opacity" class="style-item" label="不透明" :step="0.05" :maxValue="1" @finish="(value) => finish('opacity', value)" />
|
||||
<br />
|
||||
<icon-item-select class="style-item" label="" :data="layerIconList" @finish="layerAction" />
|
||||
<icon-item-select label="" :data="alignIconList" @finish="alignAction" />
|
||||
@ -28,98 +28,137 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script lang="ts" setup>
|
||||
// 组合组件样式
|
||||
const NAME = 'w-group-style'
|
||||
import { mapGetters, mapActions } from 'vuex'
|
||||
// const NAME = 'w-group-style'
|
||||
import { reactive, watch } from 'vue'
|
||||
import { mapGetters, mapActions, useStore } from 'vuex'
|
||||
import numberInput from '../../settings/numberInput.vue'
|
||||
import iconItemSelect from '../../settings/iconItemSelect.vue'
|
||||
import iconItemSelect, { TIconItemSelectData } from '../../settings/iconItemSelect.vue'
|
||||
import numberSlider from '../../settings/numberSlider.vue'
|
||||
import layerIconList from '@/assets/data/LayerIconList'
|
||||
import alignIconList from '@/assets/data/AlignListData'
|
||||
import { wGroupSetting } from './groupSetting'
|
||||
import { useSetupMapGetters } from '@/common/hooks/mapGetters'
|
||||
|
||||
export default {
|
||||
name: NAME,
|
||||
components: { numberInput, iconItemSelect, numberSlider },
|
||||
data() {
|
||||
return {
|
||||
activeNames: ['1', '2', '3', '4'],
|
||||
// defaultValue: 0,
|
||||
innerElement: {},
|
||||
tag: false,
|
||||
ingoreKeys: ['name', 'width', 'height'],
|
||||
layerIconList,
|
||||
alignIconList,
|
||||
}
|
||||
type TState = {
|
||||
activeNames: string[],
|
||||
// defaultValue: 0,
|
||||
innerElement: typeof wGroupSetting,
|
||||
tag: boolean,
|
||||
ingoreKeys: string[],
|
||||
layerIconList: TIconItemSelectData[],
|
||||
alignIconList: TIconItemSelectData[],
|
||||
}
|
||||
|
||||
const state = reactive<TState>({
|
||||
activeNames: ['1', '2', '3', '4'],
|
||||
// defaultValue: 0,
|
||||
innerElement: JSON.parse(JSON.stringify(wGroupSetting)),
|
||||
tag: false,
|
||||
ingoreKeys: ['name', 'width', 'height'],
|
||||
layerIconList,
|
||||
alignIconList,
|
||||
})
|
||||
const store = useStore()
|
||||
const { dActiveElement } = useSetupMapGetters(['dActiveElement'])
|
||||
|
||||
let dMoving = false
|
||||
|
||||
// computed: {
|
||||
// ...mapGetters(['dActiveElement']),
|
||||
// },
|
||||
|
||||
watch(
|
||||
() => dActiveElement.value,
|
||||
(newValue, oldValue) => {
|
||||
change()
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['dActiveElement']),
|
||||
{ deep: true }
|
||||
)
|
||||
|
||||
watch(
|
||||
() => state.innerElement,
|
||||
(newValue, oldValue) => {
|
||||
changeValue()
|
||||
},
|
||||
watch: {
|
||||
dActiveElement: {
|
||||
handler(newValue, oldValue) {
|
||||
this.change()
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
innerElement: {
|
||||
handler(newValue, oldValue) {
|
||||
this.changeValue()
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.change()
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['updateWidgetData', 'updateAlign', 'updateLayerIndex', 'ungroup']),
|
||||
change() {
|
||||
this.tag = true
|
||||
this.innerElement = JSON.parse(JSON.stringify(this.dActiveElement))
|
||||
},
|
||||
changeValue() {
|
||||
if (this.tag) {
|
||||
this.tag = false
|
||||
return
|
||||
}
|
||||
if (this.dMoving) {
|
||||
return
|
||||
}
|
||||
for (let key in this.innerElement) {
|
||||
if (this.ingoreKeys.indexOf(key) !== -1) {
|
||||
this.dActiveElement[key] = this.innerElement[key]
|
||||
} else if (key !== 'setting' && key !== 'record' && this.innerElement[key] !== this.dActiveElement[key]) {
|
||||
this.updateWidgetData({
|
||||
uuid: this.dActiveElement.uuid,
|
||||
key: key,
|
||||
value: this.innerElement[key],
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
finish(key, value) {
|
||||
this.updateWidgetData({
|
||||
uuid: this.dActiveElement.uuid,
|
||||
{ deep: true }
|
||||
)
|
||||
|
||||
function created() {
|
||||
change()
|
||||
}
|
||||
|
||||
created()
|
||||
|
||||
// ...mapActions(['updateWidgetData', 'updateAlign', 'updateLayerIndex', 'ungroup']),
|
||||
|
||||
function change() {
|
||||
state.tag = true
|
||||
state.innerElement = JSON.parse(JSON.stringify(dActiveElement.value))
|
||||
}
|
||||
|
||||
function changeValue() {
|
||||
if (state.tag) {
|
||||
state.tag = false
|
||||
return
|
||||
}
|
||||
if (dMoving) {
|
||||
return
|
||||
}
|
||||
for (let key in state.innerElement) {
|
||||
const itemKey = key as keyof typeof wGroupSetting
|
||||
if (state.ingoreKeys.indexOf(itemKey) !== -1) {
|
||||
dActiveElement.value[itemKey] = state.innerElement[itemKey]
|
||||
} else if (key !== 'setting' && key !== 'record' && state.innerElement[itemKey] !== dActiveElement.value[itemKey]) {
|
||||
store.dispatch("updateWidgetData", {
|
||||
uuid: dActiveElement.value.uuid,
|
||||
key: key,
|
||||
value: value,
|
||||
pushHistory: true,
|
||||
value: state.innerElement[itemKey],
|
||||
})
|
||||
},
|
||||
layerAction(item) {
|
||||
this.updateLayerIndex({
|
||||
uuid: this.dActiveElement.uuid,
|
||||
value: item.value,
|
||||
isGroup: true,
|
||||
})
|
||||
},
|
||||
alignAction(item) {
|
||||
this.updateAlign({
|
||||
align: item.value,
|
||||
uuid: this.dActiveElement.uuid,
|
||||
})
|
||||
},
|
||||
},
|
||||
// this.updateWidgetData({
|
||||
// uuid: this.dActiveElement.uuid,
|
||||
// key: key,
|
||||
// value: this.innerElement[key],
|
||||
// })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function finish(key: string, value: string | number | number[]) {
|
||||
store.dispatch("updateWidgetData", {
|
||||
uuid: dActiveElement.value.uuid,
|
||||
key: key,
|
||||
value: value,
|
||||
pushHistory: true,
|
||||
})
|
||||
// this.updateWidgetData({
|
||||
// uuid: this.dActiveElement.uuid,
|
||||
// key: key,
|
||||
// value: value,
|
||||
// pushHistory: true,
|
||||
// })
|
||||
}
|
||||
|
||||
function layerAction(item: TIconItemSelectData) {
|
||||
store.dispatch("updateLayerIndex", {
|
||||
uuid: dActiveElement.value.uuid,
|
||||
value: item.value,
|
||||
isGroup: true,
|
||||
})
|
||||
// this.updateLayerIndex({
|
||||
// uuid: this.dActiveElement.uuid,
|
||||
// value: item.value,
|
||||
// isGroup: true,
|
||||
// })
|
||||
}
|
||||
|
||||
function alignAction(item: TIconItemSelectData) {
|
||||
store.dispatch("updateAlign", {
|
||||
align: item.value,
|
||||
uuid: dActiveElement.value.uuid,
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<div
|
||||
:id="params.uuid"
|
||||
ref="widget"
|
||||
ref="widgetRef"
|
||||
:class="['w-image', { 'layer-lock': params.lock }]"
|
||||
:style="{
|
||||
position,
|
||||
position: state.position,
|
||||
left: params.left - parent.left + 'px',
|
||||
top: params.top - parent.top + 'px',
|
||||
width: params.width + 'px',
|
||||
@ -12,12 +12,18 @@
|
||||
opacity: params.opacity,
|
||||
}"
|
||||
>
|
||||
<div v-if="cropEdit" :ref="params.uuid + '_ebox'" :style="editBoxStyle" class="svg__edit__wrap">
|
||||
<div
|
||||
v-if="cropEdit"
|
||||
:id="params.uuid + '_ebox'"
|
||||
:ref="params.uuid + '_ebox'"
|
||||
:style="state.editBoxStyle"
|
||||
class="svg__edit__wrap"
|
||||
>
|
||||
<img class="edit__model" :src="params.imgUrl" />
|
||||
</div>
|
||||
<div :style="{ transform: params.flip ? `rotate${params.flip}(180deg)` : undefined, borderRadius: params.radius + 'px', '-webkit-mask-image': `${params.mask ? `url('${params.mask}')` : undefined}` }" :class="['img__box', { mask: params.mask }]">
|
||||
<div v-if="params.isNinePatch" ref="target" class="target" :style="{ border: `${(params.height * params.sliceData.ratio) / 2}px solid transparent`, borderImage: `url('${params.imgUrl}') ${params.sliceData.left} round` }"></div>
|
||||
<img v-else ref="target" class="target" style="transform-origin: center" :src="params.imgUrl" />
|
||||
<div v-if="params.isNinePatch" ref="targetRef" class="target" :style="{ border: `${(params.height * params.sliceData.ratio) / 2}px solid transparent`, borderImage: `url('${params.imgUrl}') ${params.sliceData.left} round` }"></div>
|
||||
<img v-else ref="targetRef" class="target" style="transform-origin: center" :src="params.imgUrl" />
|
||||
</div>
|
||||
<div v-if="isMask" class="drop__mask">
|
||||
<div putIn="true" :style="{ fontSize: params.width / 12 + 'px' }" class="drop__btn">拖入</div>
|
||||
@ -25,254 +31,305 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script lang="ts" setup>
|
||||
// 图片组件
|
||||
const NAME = 'w-image'
|
||||
|
||||
import { mapGetters, mapActions } from 'vuex'
|
||||
// const NAME = 'w-image'
|
||||
import { CSSProperties, StyleValue, computed, nextTick, onBeforeUnmount, onMounted, onUpdated, reactive, ref, watch } from 'vue'
|
||||
import { mapGetters, mapActions, useStore } from 'vuex'
|
||||
import { getMatrix } from '@/common/methods/handleTransform'
|
||||
import setting from "./wImageSetting"
|
||||
import PointImg from '@/utils/plugins/pointImg'
|
||||
import { useSetupMapGetters } from '@/common/hooks/mapGetters'
|
||||
import { useRoute } from 'vue-router'
|
||||
// import { storeToRefs } from 'pinia'
|
||||
// import { useCanvasStore } from '@/pinia'
|
||||
|
||||
export default {
|
||||
name: NAME,
|
||||
setting: {
|
||||
name: '图片',
|
||||
type: NAME,
|
||||
uuid: -1,
|
||||
width: 300,
|
||||
height: 300,
|
||||
type TProps = {
|
||||
params: typeof setting
|
||||
parent: {
|
||||
left: number
|
||||
top: number
|
||||
}
|
||||
}
|
||||
|
||||
type TState = {
|
||||
position: 'absolute' | 'relative', // 'absolute'relative
|
||||
editBoxStyle: CSSProperties,
|
||||
cropWidgetXY: {
|
||||
x: number
|
||||
y: number
|
||||
}
|
||||
holdPosition: {
|
||||
left: number
|
||||
top: number
|
||||
}
|
||||
}
|
||||
|
||||
const props = defineProps<TProps>()
|
||||
const state = reactive<TState>({
|
||||
position: 'absolute', // 'absolute'relative
|
||||
editBoxStyle: {
|
||||
transformOrigin: 'center',
|
||||
transform: '',
|
||||
},
|
||||
cropWidgetXY: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
},
|
||||
holdPosition: {
|
||||
left: 0,
|
||||
top: 0,
|
||||
zoom: 1,
|
||||
transform: '',
|
||||
radius: 0,
|
||||
opacity: 1,
|
||||
parent: '-1',
|
||||
imgUrl: '',
|
||||
mask: '',
|
||||
setting: [],
|
||||
record: {
|
||||
width: 0,
|
||||
height: 0,
|
||||
minWidth: 10,
|
||||
minHeight: 10,
|
||||
dir: 'all',
|
||||
},
|
||||
},
|
||||
props: ['params', 'parent'],
|
||||
data() {
|
||||
return {
|
||||
position: 'absolute', // 'absolute'relative
|
||||
editBoxStyle: {
|
||||
transformOrigin: 'center',
|
||||
transform: '',
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['dActiveElement', 'dWidgets', 'dZoom', 'dMouseXY', 'dDropOverUuid', 'dCropUuid']),
|
||||
cropEdit() {
|
||||
return this.params.uuid === this.dCropUuid
|
||||
},
|
||||
tZoom() {
|
||||
return this.params.zoom
|
||||
},
|
||||
isMask() {
|
||||
return this.params.mask && this.dDropOverUuid === this.params.uuid
|
||||
},
|
||||
isDraw() {
|
||||
return this.$route.name === 'Draw'
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
cropEdit(val) {
|
||||
// TODO 移动事件绑定
|
||||
if (val) {
|
||||
document.getElementById(this.params.uuid).addEventListener('mousedown', this.touchstart, false)
|
||||
} else {
|
||||
document.getElementById(this.params.uuid).removeEventListener('mousedown', this.touchstart, false)
|
||||
}
|
||||
this.fixRotate()
|
||||
this.lockOthers()
|
||||
},
|
||||
async tZoom() {
|
||||
await this.$nextTick()
|
||||
this.updateRecord()
|
||||
},
|
||||
},
|
||||
updated() {
|
||||
this.updateRecord()
|
||||
this.$store.commit('updateRect')
|
||||
},
|
||||
}
|
||||
})
|
||||
const route = useRoute()
|
||||
const store = useStore()
|
||||
const widgetRef = ref<HTMLElement | null>(null)
|
||||
const targetRef = ref<HTMLImageElement | null>(null)
|
||||
|
||||
async mounted() {
|
||||
this.updateRecord()
|
||||
await this.$nextTick()
|
||||
document.addEventListener('mouseup', this.touchend, false)
|
||||
// if (this.params.transformData) {
|
||||
// // this.$refs.widget.style.transform += `scale(${this.params.transformData.a}, ${this.params.transformData.d})`
|
||||
// this.$refs.widget.style.transform += `matrix(${String(getMatrix(this.params.transformData))})`
|
||||
// } else {
|
||||
// // this.$refs.widget.style.transform += `scale(${this.params.transformData.a}, ${this.params.transformData.d})`
|
||||
// this.params.rotate && (this.$refs.widget.style.transform += `rotate(${this.params.rotate})`)
|
||||
// }
|
||||
// console.log(this.params, this.params.filter)
|
||||
// this.$refs.widget.style.filter = 'hue-rotate(100deg) blur(50px)'
|
||||
this.$refs.widget.style.transform += this.params.rotate && (this.$refs.widget.style.transform += `rotate(${this.params.rotate})`)
|
||||
},
|
||||
beforeUnmount() {
|
||||
document.removeEventListener('mouseup', this.touchend, false)
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['updateWidgetData']),
|
||||
touchstart(e) {
|
||||
const editBox = this.$refs[this.params.uuid + '_ebox']
|
||||
this.cropWidgetXY = {
|
||||
x: Number(editBox.style.left.replace('px', '')) || 0,
|
||||
y: Number(editBox.style.top.replace('px', '')) || 0,
|
||||
}
|
||||
// 绑定鼠标移动事件
|
||||
document.addEventListener('mousemove', this.handlemousemove, true)
|
||||
},
|
||||
touchend() {
|
||||
// 取消鼠标移动事件
|
||||
document.removeEventListener('mousemove', this.handlemousemove, true)
|
||||
// const left = Number(this.editBoxStyle.left.replace('px', ''))
|
||||
// const flow = (this.params.width * (1 - this.tZoom)) / 2
|
||||
// if (left + flow < 0) {
|
||||
// }
|
||||
},
|
||||
handlemousemove(e) {
|
||||
if (!this.move(e)) {
|
||||
return
|
||||
}
|
||||
e && e.stopPropagation()
|
||||
e && e.preventDefault()
|
||||
const { left, top } = this.move(e)
|
||||
// TODO 触发位置刷新
|
||||
this.holdPosition = { left, top }
|
||||
this.editBoxStyle.left = left + 'px'
|
||||
this.editBoxStyle.top = top + 'px'
|
||||
this.changeFinish(left / this.params.zoom, top / this.params.zoom)
|
||||
},
|
||||
changeFinish(x, y) {
|
||||
this.setTransform('translate', `${x}px, ${y}px`)
|
||||
},
|
||||
move(payload) {
|
||||
if (payload) {
|
||||
const widgetXY = { x: this.cropWidgetXY.x, y: this.cropWidgetXY.y }
|
||||
const dx = Number(payload.pageX) - this.dMouseXY.x
|
||||
const dy = Number(payload.pageY) - this.dMouseXY.y
|
||||
let left = Number(widgetXY.x) + Math.floor((dx * 100) / this.dZoom)
|
||||
let top = Number(widgetXY.y) + Math.floor((dy * 100) / this.dZoom)
|
||||
// TODO: 旋转后计算坐标
|
||||
// const rotate = Number(this.params.rotate.replace('deg', ''))
|
||||
// console.log(Math.sin(rotate), Math.cos(rotate))
|
||||
return { left, top }
|
||||
} else {
|
||||
return this.holdPosition
|
||||
}
|
||||
},
|
||||
updateRecord() {
|
||||
if (this.dActiveElement.uuid === this.params.uuid) {
|
||||
let record = this.dActiveElement.record
|
||||
record.width = this.$refs.widget.offsetWidth
|
||||
record.height = this.$refs.widget.offsetHeight
|
||||
}
|
||||
this.updateZoom()
|
||||
// 获取点位
|
||||
if (!this.isDraw) {
|
||||
const read = new PointImg(this.$refs.target)
|
||||
}
|
||||
},
|
||||
setTransform(attrName, value) {
|
||||
const iof = this.params.transform.indexOf(attrName)
|
||||
let setValue = ''
|
||||
if (iof != -1) {
|
||||
const index = iof + attrName.length
|
||||
const tf = this.params.transform
|
||||
const FRONT = tf.slice(0, index + 1)
|
||||
const half = tf.substring(index + 1)
|
||||
const END = half.substring(half.indexOf(')'))
|
||||
setValue = FRONT + value + END
|
||||
} else {
|
||||
setValue = this.params.transform + ` ${attrName}(${value})`
|
||||
}
|
||||
this.updateWidgetData({
|
||||
uuid: this.params.uuid,
|
||||
key: 'transform',
|
||||
value: setValue,
|
||||
pushHistory: false,
|
||||
})
|
||||
this.params.transform && (this.$refs.target.style.transform = this.params.transform)
|
||||
},
|
||||
setEditBox(attrName, value) {
|
||||
const iof = this.editBoxStyle.transform.indexOf(attrName)
|
||||
let setValue = ''
|
||||
if (iof != -1) {
|
||||
const index = iof + attrName.length
|
||||
const tf = this.editBoxStyle.transform
|
||||
const FRONT = tf.slice(0, index + 1)
|
||||
const half = tf.substring(index + 1)
|
||||
const END = half.substring(half.indexOf(')'))
|
||||
setValue = FRONT + value + END
|
||||
} else {
|
||||
setValue = this.editBoxStyle.transform + ` ${attrName}(${value})`
|
||||
}
|
||||
this.editBoxStyle.transform = setValue
|
||||
},
|
||||
updateZoom() {
|
||||
this.setEditBox('scale', this.params.zoom)
|
||||
this.setTransform('scale', this.params.zoom)
|
||||
// this.$refs.target.style.transform = this.params.transform
|
||||
this.handlemousemove()
|
||||
},
|
||||
fixRotate() {
|
||||
// 裁切时修正角度
|
||||
if (this.rotateTemp) {
|
||||
this.$refs.widget.style.transform = `rotate(${this.rotateTemp})`
|
||||
this.params.flip = this.flipTemp
|
||||
this.rotateTemp = null
|
||||
} else {
|
||||
this.rotateTemp = this.params.rotate
|
||||
this.$refs.widget.style.transform = `rotate(0deg)`
|
||||
this.flipTemp = this.params.flip
|
||||
this.params.flip = null
|
||||
}
|
||||
this.$store.commit('setShowMoveable', false)
|
||||
setTimeout(() => {
|
||||
this.$store.commit('setShowMoveable', true)
|
||||
}, 100)
|
||||
},
|
||||
lockOthers() {
|
||||
// 裁剪时锁定其他图层
|
||||
if (this.locksTemp && this.locksTemp.length > 0) {
|
||||
for (let i = 0; i < this.locksTemp.length; i++) {
|
||||
this.dWidgets[i].lock = this.locksTemp[i]
|
||||
}
|
||||
this.locksTemp = []
|
||||
} else {
|
||||
this.locksTemp = []
|
||||
for (const widget of this.dWidgets) {
|
||||
this.locksTemp.push(widget.lock)
|
||||
}
|
||||
this.dWidgets.forEach((widget) => {
|
||||
widget.uuid != this.params.uuid && (widget.lock = true)
|
||||
})
|
||||
}
|
||||
},
|
||||
// cropDone(e) {
|
||||
// e.stopPropagation()
|
||||
// e.preventDefault()
|
||||
// this.updateWidgetData({
|
||||
// uuid: this.params.uuid,
|
||||
// key: 'cropEdit',
|
||||
// value: false,
|
||||
// pushHistory: false,
|
||||
// })
|
||||
// },
|
||||
},
|
||||
let rotateTemp: number | null = null
|
||||
let flipTemp: string | null = null
|
||||
let locksTemp: string[] | null = null
|
||||
|
||||
const {
|
||||
dZoom,
|
||||
dActiveElement, dWidgets, dMouseXY, dDropOverUuid, dCropUuid
|
||||
} = useSetupMapGetters(['dZoom', 'dActiveElement', 'dWidgets', 'dMouseXY', 'dDropOverUuid', 'dCropUuid'])
|
||||
// const { dZoom } = storeToRefs(useCanvasStore())
|
||||
|
||||
// ...mapGetters(['dActiveElement', 'dWidgets', 'dZoom', 'dMouseXY', 'dDropOverUuid', 'dCropUuid']),
|
||||
const cropEdit = computed(() => {
|
||||
return props.params.uuid === dCropUuid.value
|
||||
})
|
||||
const tZoom = computed(() => {
|
||||
return props.params.zoom
|
||||
})
|
||||
const isMask = computed(() => {
|
||||
return props.params.mask && dDropOverUuid.value === props.params.uuid
|
||||
})
|
||||
const isDraw = computed(() => {
|
||||
return route.name === 'Draw'
|
||||
})
|
||||
|
||||
watch(
|
||||
() => cropEdit.value,
|
||||
(val) => {
|
||||
// TODO 移动事件绑定
|
||||
const el = document.getElementById(`${props.params.uuid}`)
|
||||
if (val) {
|
||||
el?.addEventListener('mousedown', touchstart, false)
|
||||
} else {
|
||||
el?.removeEventListener('mousedown', touchstart, false)
|
||||
}
|
||||
fixRotate()
|
||||
lockOthers()
|
||||
}
|
||||
)
|
||||
|
||||
watch(
|
||||
() => tZoom.value,
|
||||
async () => {
|
||||
await nextTick()
|
||||
updateRecord()
|
||||
}
|
||||
)
|
||||
|
||||
onUpdated(() => {
|
||||
updateRecord()
|
||||
store.commit('updateRect')
|
||||
})
|
||||
|
||||
onMounted(async () => {
|
||||
updateRecord()
|
||||
await nextTick()
|
||||
document.addEventListener('mouseup', touchend, false)
|
||||
// if (this.params.transformData) {
|
||||
// // this.$refs.widget.style.transform += `scale(${this.params.transformData.a}, ${this.params.transformData.d})`
|
||||
// this.$refs.widget.style.transform += `matrix(${String(getMatrix(this.params.transformData))})`
|
||||
// } else {
|
||||
// // this.$refs.widget.style.transform += `scale(${this.params.transformData.a}, ${this.params.transformData.d})`
|
||||
// this.params.rotate && (this.$refs.widget.style.transform += `rotate(${this.params.rotate})`)
|
||||
// }
|
||||
// console.log(this.params, this.params.filter)
|
||||
// this.$refs.widget.style.filter = 'hue-rotate(100deg) blur(50px)'
|
||||
if (widgetRef.value) {
|
||||
widgetRef.value.style.transform += props.params.rotate && (widgetRef.value.style.transform += `rotate(${props.params.rotate})`)
|
||||
}
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
document.removeEventListener('mouseup', touchend, false)
|
||||
})
|
||||
|
||||
// ...mapActions(['updateWidgetData']),
|
||||
function touchstart(e: MouseEvent) {
|
||||
// const editBox = this.$refs[props.params.uuid + '_ebox']
|
||||
const editBox = document.getElementById(props.params.uuid + '_ebox')
|
||||
state.cropWidgetXY = {
|
||||
x: Number(editBox?.style.left.replace('px', '')) || 0,
|
||||
y: Number(editBox?.style.top.replace('px', '')) || 0,
|
||||
}
|
||||
// 绑定鼠标移动事件
|
||||
document.addEventListener('mousemove', handlemousemove, true)
|
||||
}
|
||||
|
||||
/** 取消鼠标移动事件 */
|
||||
function touchend() {
|
||||
document.removeEventListener('mousemove', handlemousemove, true)
|
||||
// const left = Number(this.editBoxStyle.left.replace('px', ''))
|
||||
// const flow = (this.params.width * (1 - this.tZoom)) / 2
|
||||
// if (left + flow < 0) {
|
||||
// }
|
||||
}
|
||||
|
||||
function handlemousemove(e?: MouseEvent) {
|
||||
if (!move(e)) {
|
||||
return
|
||||
}
|
||||
e && e.stopPropagation()
|
||||
e && e.preventDefault()
|
||||
const { left, top } = move(e)
|
||||
// TODO 触发位置刷新
|
||||
state.holdPosition = { left, top }
|
||||
state.editBoxStyle.left = left + 'px'
|
||||
state.editBoxStyle.top = top + 'px'
|
||||
changeFinish(left / props.params.zoom, top / props.params.zoom)
|
||||
}
|
||||
|
||||
function changeFinish(x: number, y: number) {
|
||||
setTransform('translate', `${x}px, ${y}px`)
|
||||
}
|
||||
|
||||
function move(payload?: MouseEvent) {
|
||||
if (payload) {
|
||||
const widgetXY = { x: state.cropWidgetXY.x, y: state.cropWidgetXY.y }
|
||||
const dx = Number(payload.pageX) - dMouseXY.value.x
|
||||
const dy = Number(payload.pageY) - dMouseXY.value.y
|
||||
let left = Number(widgetXY.x) + Math.floor((dx * 100) / dZoom.value)
|
||||
let top = Number(widgetXY.y) + Math.floor((dy * 100) / dZoom.value)
|
||||
// TODO: 旋转后计算坐标
|
||||
// const rotate = Number(this.params.rotate.replace('deg', ''))
|
||||
// console.log(Math.sin(rotate), Math.cos(rotate))
|
||||
return { left, top }
|
||||
} else {
|
||||
return state.holdPosition
|
||||
}
|
||||
}
|
||||
|
||||
function updateRecord() {
|
||||
if (dActiveElement.value.uuid === props.params.uuid) {
|
||||
let record = dActiveElement.value.record
|
||||
if (widgetRef.value) {
|
||||
record.width = widgetRef.value.offsetWidth
|
||||
record.height = widgetRef.value.offsetHeight
|
||||
}
|
||||
}
|
||||
updateZoom()
|
||||
// 获取点位
|
||||
if (!isDraw.value) {
|
||||
if (targetRef.value) {
|
||||
const read = new PointImg(targetRef.value)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function setTransform(attrName: string, value: string | number) {
|
||||
const iof = props.params.transform.indexOf(attrName)
|
||||
let setValue = ''
|
||||
if (iof != -1) {
|
||||
const index = iof + attrName.length
|
||||
const tf = props.params.transform
|
||||
const FRONT = tf.slice(0, index + 1)
|
||||
const half = tf.substring(index + 1)
|
||||
const END = half.substring(half.indexOf(')'))
|
||||
setValue = FRONT + value + END
|
||||
} else {
|
||||
setValue = props.params.transform + ` ${attrName}(${value})`
|
||||
}
|
||||
store.dispatch("updateWidgetData", {
|
||||
uuid: props.params.uuid,
|
||||
key: 'transform',
|
||||
value: setValue,
|
||||
pushHistory: false,
|
||||
})
|
||||
// updateWidgetData({
|
||||
// uuid: this.params.uuid,
|
||||
// key: 'transform',
|
||||
// value: setValue,
|
||||
// pushHistory: false,
|
||||
// })
|
||||
if (props.params.transform && targetRef.value) {
|
||||
targetRef.value.style.transform = props.params.transform
|
||||
}
|
||||
}
|
||||
|
||||
function setEditBox(attrName: string, value: string | number) {
|
||||
const iof = state.editBoxStyle.transform?.indexOf(attrName)
|
||||
let setValue = ''
|
||||
if (iof != -1 && iof != undefined) {
|
||||
const index = iof + attrName.length
|
||||
const tf = state.editBoxStyle.transform ?? ''
|
||||
const FRONT = tf.slice(0, index + 1)
|
||||
const half = tf.substring(index + 1)
|
||||
const END = half.substring(half.indexOf(')'))
|
||||
setValue = FRONT + value + END
|
||||
} else {
|
||||
setValue = state.editBoxStyle.transform + ` ${attrName}(${value})`
|
||||
}
|
||||
state.editBoxStyle.transform = setValue
|
||||
}
|
||||
|
||||
function updateZoom() {
|
||||
setEditBox('scale', props.params.zoom)
|
||||
setTransform('scale', props.params.zoom)
|
||||
// this.$refs.target.style.transform = this.params.transform
|
||||
handlemousemove()
|
||||
}
|
||||
|
||||
function fixRotate() {
|
||||
// 裁切时修正角度
|
||||
if (rotateTemp) {
|
||||
widgetRef.value && (widgetRef.value.style.transform = `rotate(${rotateTemp})`)
|
||||
props.params.flip = flipTemp
|
||||
rotateTemp = null
|
||||
} else {
|
||||
rotateTemp = props.params.rotate
|
||||
widgetRef.value && (widgetRef.value.style.transform = `rotate(0deg)`)
|
||||
flipTemp = props.params.flip
|
||||
props.params.flip = null
|
||||
}
|
||||
store.commit('setShowMoveable', false)
|
||||
setTimeout(() => {
|
||||
store.commit('setShowMoveable', true)
|
||||
}, 100)
|
||||
}
|
||||
|
||||
function lockOthers() {
|
||||
// 裁剪时锁定其他图层
|
||||
if (locksTemp && locksTemp.length > 0) {
|
||||
for (let i = 0; i < locksTemp.length; i++) {
|
||||
dWidgets.value[i].lock = locksTemp[i]
|
||||
}
|
||||
locksTemp = []
|
||||
} else {
|
||||
locksTemp = []
|
||||
for (const widget of dWidgets.value) {
|
||||
locksTemp.push(widget.lock)
|
||||
}
|
||||
dWidgets.value.forEach((widget: any) => {
|
||||
widget.uuid != props.params.uuid && (widget.lock = true)
|
||||
})
|
||||
}
|
||||
}
|
||||
// cropDone(e) {
|
||||
// e.stopPropagation()
|
||||
// e.preventDefault()
|
||||
// this.updateWidgetData({
|
||||
// uuid: this.params.uuid,
|
||||
// key: 'cropEdit',
|
||||
// value: false,
|
||||
// pushHistory: false,
|
||||
// })
|
||||
// },
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
||||
68
src/components/modules/widgets/wImage/wImageSetting.ts
Normal file
68
src/components/modules/widgets/wImage/wImageSetting.ts
Normal file
@ -0,0 +1,68 @@
|
||||
export type TImageSetting = {
|
||||
name: string
|
||||
type: string
|
||||
uuid: string
|
||||
width: number
|
||||
height: number
|
||||
left: number
|
||||
top: number
|
||||
zoom: number
|
||||
transform: string
|
||||
radius: number
|
||||
opacity: number
|
||||
parent: string
|
||||
imgUrl: string
|
||||
mask: string
|
||||
setting: [],
|
||||
rotate: number
|
||||
record: {
|
||||
width: number
|
||||
height: number
|
||||
minWidth: number
|
||||
minHeight: number
|
||||
dir: string
|
||||
},
|
||||
lock: false,
|
||||
isNinePatch: false,
|
||||
flip: string | null
|
||||
sliceData: {
|
||||
ratio: number
|
||||
left: number
|
||||
}
|
||||
cropEdit?: boolean
|
||||
}
|
||||
|
||||
const setting: TImageSetting = {
|
||||
name: '图片',
|
||||
type: 'w-image',
|
||||
uuid: '-1',
|
||||
width: 300,
|
||||
height: 300,
|
||||
left: 0,
|
||||
top: 0,
|
||||
zoom: 1,
|
||||
transform: '',
|
||||
radius: 0,
|
||||
opacity: 1,
|
||||
parent: '-1',
|
||||
imgUrl: '',
|
||||
mask: '',
|
||||
setting: [],
|
||||
rotate: 0,
|
||||
record: {
|
||||
width: 0,
|
||||
height: 0,
|
||||
minWidth: 10,
|
||||
minHeight: 10,
|
||||
dir: 'all',
|
||||
},
|
||||
lock: false,
|
||||
isNinePatch: false,
|
||||
flip: '',
|
||||
sliceData: {
|
||||
ratio: 0,
|
||||
left: 0,
|
||||
}
|
||||
}
|
||||
|
||||
export default setting
|
||||
@ -7,20 +7,20 @@
|
||||
-->
|
||||
<template>
|
||||
<div id="w-image-style">
|
||||
<el-collapse v-model="activeNames">
|
||||
<el-collapse v-model="state.activeNames">
|
||||
<el-collapse-item title="位置尺寸" name="1">
|
||||
<div class="line-layout">
|
||||
<number-input v-model="innerElement.left" label="X" @finish="(value) => finish('left', value)" />
|
||||
<number-input v-model="innerElement.top" label="Y" @finish="(value) => finish('top', value)" />
|
||||
<number-input v-model="innerElement.width" style="margin-top: 0.5rem" label="宽" @finish="(value) => finish('width', value)" />
|
||||
<number-input v-model="innerElement.height" style="margin-top: 0.5rem" label="高" @finish="(value) => finish('height', value)" />
|
||||
<number-input v-model="state.innerElement.left" label="X" @finish="(value) => finish('left', value)" />
|
||||
<number-input v-model="state.innerElement.top" label="Y" @finish="(value) => finish('top', value)" />
|
||||
<number-input v-model="state.innerElement.width" style="margin-top: 0.5rem" label="宽" @finish="(value) => finish('width', value)" />
|
||||
<number-input v-model="state.innerElement.height" style="margin-top: 0.5rem" label="高" @finish="(value) => finish('height', value)" />
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="设置" name="2">
|
||||
<!-- <el-button size="mini" style="width: 100%; margin-top: 0.5rem" plain @click="openCropper">替换图片</el-button> -->
|
||||
<el-button style="width: 100%; margin-bottom: 12px" plain @click="openPicBox">替换图片</el-button>
|
||||
<div class="options">
|
||||
<el-button v-if="innerElement.cropEdit" plain type="primary" @click="imgCrop(false)">完成</el-button>
|
||||
<el-button v-if="state.innerElement.cropEdit" plain type="primary" @click="imgCrop(false)">完成</el-button>
|
||||
<el-button v-else plain type="primary" @click="imgCrop(true)"><i class="icon sd-caijian" /> 裁剪</el-button>
|
||||
<el-button plain @click="openImageCutout"><i class="icon sd-AIkoutu" /> 抠图</el-button>
|
||||
<!-- <uploader class="options__upload" @done="uploadImgDone">
|
||||
@ -31,15 +31,23 @@
|
||||
<!-- <container-wrap @change="changeContainer" />
|
||||
<br /> -->
|
||||
<div class="slide-wrap">
|
||||
<number-slider v-model="innerElement.opacity" style="font-size: 14px" label="不透明" :step="0.05" :maxValue="1" @finish="(value) => finish('opacity', value)" />
|
||||
<number-slider v-model="innerElement.radius" style="font-size: 14px" label="圆角" :maxValue="Math.min(innerElement.record.width, innerElement.record.height)" @finish="(value) => finish('radius', value)" />
|
||||
<number-slider v-model="state.innerElement.opacity" style="font-size: 14px" label="不透明" :step="0.05" :maxValue="1" @finish="(value) => finish('opacity', value)" />
|
||||
<number-slider v-model="state.innerElement.radius" style="font-size: 14px" label="圆角" :maxValue="Math.min(Number(state.innerElement.record?.width), Number(state.innerElement.record?.height))" @finish="(value) => finish('radius', value)" />
|
||||
<!-- <number-slider v-model="innerElement.letterSpacing" style="font-size: 14px" label="字距" labelWidth="40px" :step="0.05" :minValue="-50" :maxValue="innerElement.fontSize" @finish="(value) => finish('letterSpacing', value)" />
|
||||
<number-slider v-model="innerElement.lineHeight" style="font-size: 14px" label="行距" labelWidth="40px" :step="0.05" :minValue="0" :maxValue="2.5" @finish="(value) => finish('lineHeight', value)" /> -->
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item v-if="innerElement.isNinePatch" title="点九图设置" name="3">
|
||||
<number-slider v-model="innerElement.sliceData.ratio" :step="0.01" label="比率" :maxValue="10" @finish="(value) => finishSliceData('ratio', value)" />
|
||||
<number-slider v-model="innerElement.sliceData.left" :step="0.5" label="大小" @finish="(value) => finishSliceData('left', value)" />
|
||||
<el-collapse-item v-if="state.innerElement.isNinePatch" title="点九图设置" name="3">
|
||||
<number-slider
|
||||
v-model="state.innerElement.sliceData.ratio"
|
||||
:step="0.01" label="比率" :maxValue="10"
|
||||
@finish="(value) => finishSliceData('ratio', value)"
|
||||
/>
|
||||
<number-slider
|
||||
v-model="state.innerElement.sliceData.left"
|
||||
:step="0.5" label="大小"
|
||||
@finish="(value) => finishSliceData('left', value)"
|
||||
/>
|
||||
</el-collapse-item>
|
||||
<br />
|
||||
<icon-item-select class="style-item" label="" :data="layerIconList" @finish="layerAction" />
|
||||
@ -47,21 +55,26 @@
|
||||
<br />
|
||||
</el-collapse>
|
||||
<!-- <CropImage ref="crop" @done="cropDone" /> -->
|
||||
<inner-tool-bar v-show="innerElement.cropEdit" :style="toolBarStyle">
|
||||
<number-slider v-model="innerElement.zoom" class="inner-bar" label="缩放" labelWidth="40px" :step="0.01" :minValue="1" :maxValue="3" />
|
||||
<inner-tool-bar v-show="state.innerElement.cropEdit" :style="toolBarStyle">
|
||||
<number-slider
|
||||
v-model="state.innerElement.zoom"
|
||||
class="inner-bar" label="缩放" labelWidth="40px"
|
||||
:step="0.01" :minValue="1" :maxValue="3"
|
||||
/>
|
||||
<i style="padding: 0 8px; cursor: pointer" class="icon sd-queren" @click="imgCrop(false)" />
|
||||
</inner-tool-bar>
|
||||
<picBox ref="picBox" @select="selectDone" />
|
||||
<imageCutout ref="imageCutout" @done="cutImageDone" />
|
||||
<picBox ref="picBoxRef" @select="selectDone" />
|
||||
<imageCutout ref="imageCutoutRef" @done="cutImageDone" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script lang="ts" setup>
|
||||
// 图片组件样式
|
||||
const NAME = 'w-image-style'
|
||||
import { mapGetters, mapActions } from 'vuex'
|
||||
// const NAME = 'w-image-style'
|
||||
import { nextTick, reactive, ref, watch } from 'vue'
|
||||
import { useStore } from 'vuex'
|
||||
import numberInput from '../../settings/numberInput.vue'
|
||||
import iconItemSelect from '../../settings/iconItemSelect.vue'
|
||||
import iconItemSelect, { TIconItemSelectData } from '../../settings/iconItemSelect.vue'
|
||||
import numberSlider from '../../settings/numberSlider.vue'
|
||||
// import textInput from '../../settings/textInput.vue'
|
||||
// import CropImage from '@/components/business/cropper/CropImage.vue'
|
||||
@ -73,194 +86,269 @@ import layerIconList from '@/assets/data/LayerIconList'
|
||||
import alignIconList from '@/assets/data/AlignListData'
|
||||
import picBox from '@/components/business/picture-selector'
|
||||
import imageCutout from '@/components/business/image-cutout'
|
||||
import { useSetupMapGetters } from '@/common/hooks/mapGetters'
|
||||
import wImageSetting, { TImageSetting } from './wImageSetting'
|
||||
import { TGetImageListResult } from '@/api/material'
|
||||
|
||||
export default {
|
||||
name: NAME,
|
||||
components: { numberInput, numberSlider, iconItemSelect, picBox, imageCutout },
|
||||
data() {
|
||||
return {
|
||||
picBoxShow: false,
|
||||
activeNames: ['2', '3', '4'],
|
||||
innerElement: {},
|
||||
tag: false,
|
||||
ingoreKeys: ['left', 'top', 'name', 'width', 'height', 'radiusTopLeft', 'radiusTopRight', 'radiusBottomLeft', 'radiusBottomRight'],
|
||||
layerIconList: layerIconList.concat([
|
||||
{
|
||||
key: 'flip',
|
||||
icon: 'sd-zuoyoufanzhuan',
|
||||
extraIcon: true,
|
||||
tip: '水平翻转',
|
||||
value: 'Y',
|
||||
},
|
||||
{
|
||||
key: 'flip',
|
||||
icon: 'sd-shangxiafanzhuan',
|
||||
extraIcon: true,
|
||||
tip: '垂直翻转',
|
||||
value: 'X',
|
||||
},
|
||||
]),
|
||||
alignIconList,
|
||||
toolBarStyle: {},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['dActiveElement', 'dMoving', 'dWidgets']),
|
||||
},
|
||||
watch: {
|
||||
dActiveElement: {
|
||||
handler(newValue, oldValue) {
|
||||
this.change()
|
||||
// 失焦取消编辑模式
|
||||
if (newValue.uuid != this.lastUuid && typeof this.lastUuid !== 'undefined') {
|
||||
this.innerElement.cropEdit = false
|
||||
this.$store.commit('setShowRotatable', true) // 失焦会导致大小变化锁定的错误
|
||||
}
|
||||
this.lastUuid = newValue.uuid
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
innerElement: {
|
||||
handler(newValue, oldValue) {
|
||||
this.changeValue()
|
||||
this.cropHandle()
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.change()
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['updateWidgetData', 'updateAlign', 'updateLayerIndex', 'addWidget']),
|
||||
change() {
|
||||
this.tag = true
|
||||
this.innerElement = JSON.parse(JSON.stringify({ ...this.innerElement, ...this.dActiveElement }))
|
||||
},
|
||||
changeValue() {
|
||||
if (this.tag) {
|
||||
this.tag = false
|
||||
return
|
||||
}
|
||||
if (this.dMoving) {
|
||||
return
|
||||
}
|
||||
for (let key in this.innerElement) {
|
||||
if (this.ingoreKeys.indexOf(key) !== -1) {
|
||||
this.dActiveElement[key] = this.innerElement[key]
|
||||
} else if (key !== 'cropEdit' && key !== 'record' && this.innerElement[key] !== this.dActiveElement[key]) {
|
||||
this.updateWidgetData({
|
||||
uuid: this.dActiveElement.uuid,
|
||||
key: key,
|
||||
value: this.innerElement[key],
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
finishSliceData(key, value) {
|
||||
const data = this.dActiveElement.sliceData
|
||||
if (data) {
|
||||
data[key] = value
|
||||
this.updateWidgetData({
|
||||
uuid: this.dActiveElement.uuid,
|
||||
key: 'sliceData',
|
||||
value: data,
|
||||
pushHistory: true,
|
||||
})
|
||||
}
|
||||
},
|
||||
finish(key, value) {
|
||||
this.updateWidgetData({
|
||||
uuid: this.dActiveElement.uuid,
|
||||
key: key,
|
||||
value: value,
|
||||
pushHistory: true,
|
||||
})
|
||||
},
|
||||
layerAction(item) {
|
||||
if (item.key === 'zIndex') {
|
||||
this.updateLayerIndex({
|
||||
uuid: this.dActiveElement.uuid,
|
||||
value: item.value,
|
||||
})
|
||||
} else {
|
||||
this.finish(item.key, item.value === this.dActiveElement.flip ? null : item.value)
|
||||
}
|
||||
},
|
||||
async alignAction(item) {
|
||||
this.updateAlign({
|
||||
align: item.value,
|
||||
uuid: this.dActiveElement.uuid,
|
||||
})
|
||||
await this.$nextTick()
|
||||
this.$store.commit('updateRect')
|
||||
},
|
||||
openCropper() {
|
||||
this.$refs.crop.open(this.innerElement, this.innerElement.cropData)
|
||||
},
|
||||
cropDone({ newImg, data, width, height }) {
|
||||
this.innerElement.imgUrl = newImg
|
||||
this.innerElement.cropData = data
|
||||
this.innerElement.width = width.toFixed(0)
|
||||
this.innerElement.height = height.toFixed(0)
|
||||
},
|
||||
async changeContainer(setting) {
|
||||
const index = this.dWidgets.findIndex((x) => x.uuid == this.innerElement.uuid)
|
||||
const img = await getImage(setting.svgUrl)
|
||||
setting.width = this.innerElement.width
|
||||
setting.height = img.height * (this.innerElement.width / img.width)
|
||||
setting.left = this.innerElement.left
|
||||
setting.top = this.innerElement.top
|
||||
setting.imgUrl = this.innerElement.imgUrl
|
||||
this.dWidgets.splice(index, 1)
|
||||
this.addWidget(setting)
|
||||
},
|
||||
async uploadImgDone(img) {
|
||||
this.$store.commit('setShowMoveable', false)
|
||||
await api.material.addMyPhoto(img)
|
||||
// this.innerElement.width = img.width
|
||||
this.innerElement.height = img.height * (this.innerElement.width / img.width)
|
||||
this.innerElement.imgUrl = img.url
|
||||
this.$store.commit('setShowMoveable', true)
|
||||
},
|
||||
selectDone(img) {
|
||||
this.innerElement.imgUrl = img.url
|
||||
// this.imgCrop(true)
|
||||
},
|
||||
imgCrop(val) {
|
||||
// TODO: 画布内图像裁剪
|
||||
const { left, top } = document.getElementById(this.innerElement.uuid).getBoundingClientRect()
|
||||
this.toolBarStyle = { left: left + 'px', top: top + 'px' }
|
||||
this.innerElement.cropEdit = val
|
||||
this.$store.commit('setShowRotatable', !val)
|
||||
},
|
||||
cropHandle() {
|
||||
this.$store.commit('setCropUuid', this.innerElement.cropEdit ? this.innerElement.uuid : -1)
|
||||
},
|
||||
// 图库选择器
|
||||
openPicBox() {
|
||||
this.$refs.picBox.open()
|
||||
},
|
||||
// 打开抠图
|
||||
openImageCutout() {
|
||||
fetch(this.innerElement.imgUrl)
|
||||
.then((response) => response.blob())
|
||||
.then((blob) => {
|
||||
const file = new File([blob], `image_${Math.random()}.jpg`, { type: 'image/jpeg' })
|
||||
this.$refs.imageCutout.open(file)
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('获取图片失败:', error)
|
||||
})
|
||||
},
|
||||
// 完成抠图
|
||||
async cutImageDone(url) {
|
||||
setTimeout(() => {
|
||||
this.innerElement.imgUrl = url
|
||||
}, 300)
|
||||
},
|
||||
},
|
||||
type TState = {
|
||||
picBoxShow: boolean
|
||||
activeNames: string[]
|
||||
innerElement: TImageSetting
|
||||
tag: boolean
|
||||
ingoreKeys: string[]
|
||||
layerIconList: TIconItemSelectData[]
|
||||
alignIconList: TIconItemSelectData[]
|
||||
toolBarStyle: Record<string, any>
|
||||
}
|
||||
|
||||
const state = reactive<TState>({
|
||||
picBoxShow: false,
|
||||
activeNames: ['2', '3', '4'],
|
||||
innerElement: JSON.parse(JSON.stringify(wImageSetting)),
|
||||
tag: false,
|
||||
ingoreKeys: ['left', 'top', 'name', 'width', 'height', 'radiusTopLeft', 'radiusTopRight', 'radiusBottomLeft', 'radiusBottomRight'],
|
||||
layerIconList: layerIconList.concat([
|
||||
{
|
||||
key: 'flip',
|
||||
icon: 'sd-zuoyoufanzhuan',
|
||||
extraIcon: true,
|
||||
tip: '水平翻转',
|
||||
value: 'Y',
|
||||
},
|
||||
{
|
||||
key: 'flip',
|
||||
icon: 'sd-shangxiafanzhuan',
|
||||
extraIcon: true,
|
||||
tip: '垂直翻转',
|
||||
value: 'X',
|
||||
},
|
||||
]),
|
||||
alignIconList,
|
||||
toolBarStyle: {},
|
||||
})
|
||||
|
||||
const picBoxRef = ref<typeof picBox | null>(null)
|
||||
const imageCutoutRef = ref<typeof imageCutout | null>(null)
|
||||
|
||||
const store = useStore()
|
||||
const {
|
||||
dActiveElement, dMoving, dWidgets
|
||||
} = useSetupMapGetters(['dActiveElement', 'dMoving', 'dWidgets'])
|
||||
// computed: {
|
||||
// ...mapGetters(['dActiveElement', 'dMoving', 'dWidgets']),
|
||||
// },
|
||||
|
||||
let lastUuid: string | undefined = undefined
|
||||
let tag: boolean
|
||||
let toolBarStyle: { left: string, top: string } | null = null
|
||||
|
||||
watch(
|
||||
() => dActiveElement.value,
|
||||
(newValue, oldValue) => {
|
||||
change()
|
||||
// 失焦取消编辑模式
|
||||
if (newValue.uuid != lastUuid && typeof lastUuid !== 'undefined') {
|
||||
state.innerElement.cropEdit = false
|
||||
store.commit('setShowRotatable', true) // 失焦会导致大小变化锁定的错误
|
||||
}
|
||||
lastUuid = newValue.uuid
|
||||
},
|
||||
{ deep: true }
|
||||
)
|
||||
|
||||
watch(
|
||||
() => state.innerElement,
|
||||
(newValue, oldValue) => {
|
||||
changeValue()
|
||||
cropHandle()
|
||||
},
|
||||
{ deep: true }
|
||||
)
|
||||
|
||||
function created() {
|
||||
change()
|
||||
}
|
||||
|
||||
created()
|
||||
|
||||
// ...mapActions(['updateWidgetData', 'updateAlign', 'updateLayerIndex', 'addWidget']),
|
||||
|
||||
function change() {
|
||||
tag = true
|
||||
state.innerElement = JSON.parse(JSON.stringify({ ...state.innerElement, ...dActiveElement.value }))
|
||||
}
|
||||
|
||||
function changeValue() {
|
||||
if (tag) {
|
||||
tag = false
|
||||
return
|
||||
}
|
||||
if (dMoving.value) {
|
||||
return
|
||||
}
|
||||
for (let key in state.innerElement) {
|
||||
if (state.ingoreKeys.indexOf(key) !== -1) {
|
||||
dActiveElement.value[key] = state.innerElement[(key as keyof TImageSetting)]
|
||||
} else if (key !== 'cropEdit' && key !== 'record' && state.innerElement[(key as keyof TImageSetting)] !== dActiveElement.value[key]) {
|
||||
store.dispatch('updateWidgetData', {
|
||||
uuid: dActiveElement.value.uuid,
|
||||
key: key,
|
||||
value: state.innerElement[(key as keyof TImageSetting)],
|
||||
})
|
||||
// updateWidgetData({
|
||||
// uuid: this.dActiveElement.uuid,
|
||||
// key: key,
|
||||
// value: this.innerElement[key],
|
||||
// })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function finishSliceData(key: string, value: number | number[]) {
|
||||
const data = dActiveElement.value.sliceData
|
||||
if (data) {
|
||||
data[key] = value
|
||||
store.dispatch('updateWidgetData', {
|
||||
uuid: dActiveElement.value.uuid,
|
||||
key: 'sliceData',
|
||||
value: data,
|
||||
pushHistory: true,
|
||||
})
|
||||
// updateWidgetData({
|
||||
// uuid: dActiveElement.uuid,
|
||||
// key: 'sliceData',
|
||||
// value: data,
|
||||
// pushHistory: true,
|
||||
// })
|
||||
}
|
||||
}
|
||||
|
||||
function finish(key: string = "", value: number | number[] | string | null = "") {
|
||||
store.dispatch('updateWidgetData', {
|
||||
uuid: dActiveElement.value.uuid,
|
||||
key: key,
|
||||
value: value,
|
||||
pushHistory: true,
|
||||
})
|
||||
// this.updateWidgetData({
|
||||
// uuid: this.dActiveElement.uuid,
|
||||
// key: key,
|
||||
// value: value,
|
||||
// pushHistory: true,
|
||||
// })
|
||||
}
|
||||
|
||||
function layerAction(item: TIconItemSelectData) {
|
||||
if (item.key === 'zIndex') {
|
||||
store.dispatch("updateLayerIndex", {
|
||||
uuid: dActiveElement.value.uuid,
|
||||
value: item.value,
|
||||
})
|
||||
// this.updateLayerIndex({
|
||||
// uuid: this.dActiveElement.uuid,
|
||||
// value: item.value,
|
||||
// })
|
||||
} else {
|
||||
finish(item.key || "", item.value === dActiveElement.value.flip ? null : item.value)
|
||||
}
|
||||
}
|
||||
|
||||
async function alignAction(item: TIconItemSelectData) {
|
||||
store.dispatch("updateAlign", {
|
||||
align: item.value,
|
||||
uuid: dActiveElement.value.uuid,
|
||||
})
|
||||
// this.updateAlign({
|
||||
// align: item.value,
|
||||
// uuid: this.dActiveElement.uuid,
|
||||
// })
|
||||
await nextTick()
|
||||
store.commit('updateRect')
|
||||
}
|
||||
|
||||
function openCropper() {
|
||||
// this.$refs.crop.open(this.innerElement, this.innerElement.cropData)
|
||||
}
|
||||
|
||||
// function cropDone({ newImg, data, width, height }) {
|
||||
// this.innerElement.imgUrl = newImg
|
||||
// this.innerElement.cropData = data
|
||||
// this.innerElement.width = width.toFixed(0)
|
||||
// this.innerElement.height = height.toFixed(0)
|
||||
// }
|
||||
|
||||
|
||||
// async function changeContainer(setting) {
|
||||
// const index = this.dWidgets.findIndex((x) => x.uuid == this.innerElement.uuid)
|
||||
// const img = await getImage(setting.svgUrl)
|
||||
// setting.width = this.innerElement.width
|
||||
// setting.height = img.height * (this.innerElement.width / img.width)
|
||||
// setting.left = this.innerElement.left
|
||||
// setting.top = this.innerElement.top
|
||||
// setting.imgUrl = this.innerElement.imgUrl
|
||||
// this.dWidgets.splice(index, 1)
|
||||
// this.addWidget(setting)
|
||||
// }
|
||||
|
||||
// async function uploadImgDone(img) {
|
||||
// this.$store.commit('setShowMoveable', false)
|
||||
// await api.material.addMyPhoto(img)
|
||||
// // this.innerElement.width = img.width
|
||||
// this.innerElement.height = img.height * (this.innerElement.width / img.width)
|
||||
// this.innerElement.imgUrl = img.url
|
||||
// this.$store.commit('setShowMoveable', true)
|
||||
// }
|
||||
|
||||
|
||||
function selectDone(img: TGetImageListResult) {
|
||||
state.innerElement.imgUrl = img.url
|
||||
// this.imgCrop(true)
|
||||
}
|
||||
|
||||
function imgCrop(val: boolean) {
|
||||
// TODO: 画布内图像裁剪
|
||||
const el = document.getElementById(state.innerElement.uuid || "")
|
||||
if (!el) return
|
||||
const { left, top } = el.getBoundingClientRect()
|
||||
toolBarStyle = { left: left + 'px', top: top + 'px' }
|
||||
state.innerElement.cropEdit = val
|
||||
store.commit('setShowRotatable', !val)
|
||||
}
|
||||
|
||||
|
||||
function cropHandle() {
|
||||
store.commit('setCropUuid', state.innerElement.cropEdit ? state.innerElement.uuid : -1)
|
||||
}
|
||||
|
||||
// 图库选择器
|
||||
function openPicBox() {
|
||||
if (picBoxRef.value) {
|
||||
picBoxRef.value.open()
|
||||
}
|
||||
}
|
||||
|
||||
// 打开抠图
|
||||
function openImageCutout() {
|
||||
fetch(state.innerElement.imgUrl || "")
|
||||
.then((response) => response.blob())
|
||||
.then((blob) => {
|
||||
const file = new File([blob], `image_${Math.random()}.jpg`, { type: 'image/jpeg' })
|
||||
if (imageCutoutRef.value) {
|
||||
imageCutoutRef.value.open(file)
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('获取图片失败:', error)
|
||||
})
|
||||
}
|
||||
|
||||
// 完成抠图
|
||||
async function cutImageDone(url: string) {
|
||||
setTimeout(() => {
|
||||
state.innerElement.imgUrl = url
|
||||
}, 300)
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
||||
@ -16,7 +16,9 @@ import api from '@/api'
|
||||
import Qiniu from '@/common/methods/QiNiu'
|
||||
import _config from '@/config'
|
||||
import { getImage } from '@/common/methods/getImgDetail'
|
||||
import wImage from '@/components/modules/widgets/wImage/wImage.vue'
|
||||
// import wImage from '@/components/modules/widgets/wImage/wImage.vue'
|
||||
import wImageSetting from '@/components/modules/widgets/wImage/wImageSetting'
|
||||
// import wText from '@/components/modules/widgets/wText/wText.vue'
|
||||
import { wTextSetting } from '@/components/modules/widgets/wText/wTextSetting'
|
||||
import eventBus from '@/utils/plugins/eventBus'
|
||||
|
||||
@ -43,7 +45,7 @@ export default () => {
|
||||
eventBus.emit('refreshUserImages')
|
||||
// 添加图片到画布中
|
||||
store.commit('setShowMoveable', false) // 清理掉上一次的选择
|
||||
const setting = JSON.parse(JSON.stringify(wImage.setting))
|
||||
const setting = JSON.parse(JSON.stringify(wImageSetting))
|
||||
setting.width = width
|
||||
setting.height = height
|
||||
setting.imgUrl = url
|
||||
|
||||
@ -61,7 +61,8 @@ import RightClickMenu from '@/components/business/right-click-menu/RcMenu.vue'
|
||||
import Moveable from '@/components/business/moveable/Moveable.vue'
|
||||
import shortcuts from '@/mixins/shortcuts'
|
||||
// import wText from '@/components/modules/widgets/wText/wText.vue'
|
||||
import wImage from '@/components/modules/widgets/wImage/wImage.vue'
|
||||
// import wImage from '@/components/modules/widgets/wImage/wImage.vue'
|
||||
import wImageSetting from '@/components/modules/widgets/wImage/wImageSetting'
|
||||
import useLoading from '@/common/methods/loading'
|
||||
import uploader from '@/components/common/Uploader/index.vue'
|
||||
import designBoard from '@/components/modules/layout/designBoard/index.vue'
|
||||
@ -126,7 +127,7 @@ async function loadPSD(file: File) {
|
||||
setTimeout(async () => {
|
||||
const types: any = {
|
||||
text: wTextSetting,
|
||||
image: wImage.setting,
|
||||
image: wImageSetting,
|
||||
}
|
||||
for (let i = 0; i < data.clouds.length; i++) {
|
||||
const x: any = data.clouds[i]
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user