github/poster-design
1
0
Fork 0
mirror of https://github.com/palxiao/poster-design.git synced 2025-07-15 16:02:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #93 from JeremyYu-cn/feat-upgrade-vue3

Browse Source 
Feat: Convert wImage component to composition API
This commit is contained in:
Jeremy Yu 2024-03-21 12:39:14 +00:00 committed by GitHub
commit 9ec82f59cd
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
21 changed files with 786 additions and 2974 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
README.md
View File

@ -1,19 +1,21 @@
**[在线体验网址](https://design.palxp.cn/)** | **[中文文档](https://xp.palxp.cn/)** | [常见问题](https://xp.palxp.cn/#/articles/1689323321667) | [架构说明](https://xp.palxp.cn/#/articles/1689321259854)
**[在线体验网站](https://design.palxp.cn/)** | **[在线文档](https://xp.palxp.cn/)** | [常见问题](https://xp.palxp.cn/#/articles/1689323321667)
---
## Poster Design
## 迅排设计
迅排设计是一款漂亮易用且功能强大的开源创意图片编辑器，是对标稿定设计、创客贴、Canva 等商业产品的免费在线设计工具。
一款漂亮易用且功能强大的创意图片编辑器，对标稿定设计、创客贴、Canva 等商业产品。
适用于多种场景：海报图片生成、电商分享图、文章长图、视频/公众号封面等，无需下载软件即可轻松实现云端编辑、迅速完成图文排版。
[![](https://xp.palxp.cn/images/2023-7-16-1689500112694.gif)](https://design.palxp.cn/)
适用于多种场景：海报图片生成、电商分享图、文章长图、视频/公众号封面等，无需下载软件即可轻松实现云端编辑、迅速完成图文排版。
### 特点
- 丝滑的页面操作体验，丰富的交互细节，基础功能完善
- 采用服务端生成图片，能确保多端出图统一性，支持各种 CSS 特性
- 简易 AI 抠图工具，上传图片一键去除背景
- 技术栈：Vue3 、Vite2 、Vuex 、ElementPlus，开发体验畅快
- 技术栈：Vue3 、Vite5 、Vuex 、ElementPlus，开发体验畅快
- 图片生成：Puppeteer、Express
### 支持功能
@ -35,25 +37,35 @@
git clone https://github.com/palxiao/poster-design.git
cd poster-design
npm run prepared
npm run serve
npm run dev
cd screreenshot
npm run dev
```
![](https://xp.palxp.cn/images/2023-7-16-1689498291322.png)
访问 http://127.0.0.1:5173/ 查看网页。点此查看[完整说明文档](https://xp.palxp.cn/#/articles/1689319644311)。
访问 http://127.0.0.1:5173/ 查看网页。点此查看[更多说明文档](https://xp.palxp.cn/#/articles/1689319644311)。
### 图片生成服务
代码位于根目录 [/screenshot](https://github.com/palxiao/poster-design/tree/main/screenshot)，接口API文档点此查看：[接口 API 文档](https://xp.palxp.cn/apidoc/screenshot.html)。
> 更多相关事项请进入该目录下查看 [README.md](https://github.com/palxiao/poster-design/blob/main/screenshot/README.md) 文件。 Docker 部署：[参考说明](https://xp.palxp.cn/#/articles/1689319644311?id=docker%e5%ae%b9%e5%99%a8)。
### 服务端
目前本项目演示 Demo 中的后端接口参考：[接口 API 文档](https://xp.palxp.cn/apidoc/index.html)。
后端需要自己开发，目前本项目演示 Demo 中的后端接口参考：[接口 API 文档](https://xp.palxp.cn/apidoc/index.html)。
## 其它
我们尝试沉淀一个高质量内容社区，形成可持续学习的平台，同时解决开发者在项目中遇到的疑难和困惑，帮大家少走一些弯路。
<img style="width: 380px;" src="https://github.com/palxiao/poster-design/assets/21021314/643dcc8b-ef73-4c76-a78c-a7c377b5f268" />
也欢迎关注公众号：品味前端，回复“加群”进行交流。
<img style="width: 380px;" src="https://xp.palxp.cn/images/2024-3-1-1709306365949.png" />
-----
本项目最早使用 Vue2 开发，现改用 Vue3 重构中。[一些迭代计划记录](https://xp.palxp.cn/#/articles/1689319986889?id=%e8%bf%ad%e4%bb%a3%e8%ae%a1%e5%88%92).
目前开源版仍在持续迭代中，还有很多的不足，可以将你遇到的问题在 Issues 中提出，或者提交 Pull Request 帮助完善。
@ -67,13 +79,7 @@ npm run serve
- [qr-code-styling](https://qr-code-styling.com/): 风格化二维码
- [rembg](https://github.com/danielgatis/rembg): 图片抠图，使用 u2net 预训练模型
### 交流群
| 作者微信：备注加群 | 关注公众号 |
| --- | --- |
| <img style="width: 240px;" src="https://xp.palxp.cn/images/2024-3-1-1709306328344.png" /> | <img style="width: 320px;" src="https://xp.palxp.cn/images/2024-3-1-1709306365949.png" /> |
开源不易，别忘了给本项目点个 **Star** ~
开源不易，最后别忘了给本项目点个 **Star** ~
[![Star History Chart](https://api.star-history.com/svg?repos=palxiao/poster-design&type=Date)](https://star-history.com/#palxiao/poster-design&Date)

9
src/assets/data/LayerIconList.ts
View File

@ -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[]

6
src/common/methods/DesignFeatures/setWidgetData.ts
View File

@ -9,7 +9,8 @@
// import { getImage } from '../getImgDetail'
import setImageData from '@/common/methods/DesignFeatures/setImage'
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 wSvg from '@/components/modules/widgets/wSvg/wSvg.vue'
export default async function(type: string, item: TCommonItemData, data: Record<string, any>) {
@ -22,11 +23,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

2
src/components/business/picture-selector/index.vue
View File

@ -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)

4
src/components/modules/layout/designBoard/index.vue
View File

@ -1,5 +1,6 @@
<template>
<div id="page-design" ref="page_design" :style="{ paddingTop: dPaddingTop + 'px' }">
<!-- <el-scrollbar> -->
<div
id="out-page"
class="out-page"
@ -54,6 +55,7 @@
<!-- <size-control v-if="dSelectWidgets.length === 0" /> -->
</div>
</div>
<!-- </el-scrollbar> -->
</div>
</template>
@ -61,7 +63,7 @@
import { nextTick, onMounted, ref } from 'vue'
import { mapGetters, mapActions, useStore } from 'vuex'
import { getTarget } from '@/common/methods/target'
// import { ElScrollbar } from 'element-plus'
import setWidgetData from '@/common/methods/DesignFeatures/setWidgetData'
import PointImg from '@/utils/plugins/pointImg'
import getComponentsData from '@/common/methods/DesignFeatures/setComponents'

5
src/components/modules/panel/wrap/GraphListWrap.vue
View File

@ -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

5
src/components/modules/panel/wrap/PhotoListWrap.vue
View File

@ -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)

5
src/components/modules/panel/wrap/UserWrap.vue
View File

@ -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'
@ -158,7 +159,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)

16
src/components/modules/settings/iconItemSelect.vue
View File

@ -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
}

2
src/components/modules/settings/numberSlider.vue
View File

@ -49,7 +49,7 @@ const props = withDefaults(defineProps<TProps>(), {
})
const emit = defineEmits<TEmits>()
const innerValue = ref<number>(0)
const innerValue = ref<number>(1)
watch(
() => innerValue.value,

9
src/components/modules/settings/valueSelect.vue
View File

@ -3,7 +3,7 @@
* @Date: 2021-08-02 19:10:06
* @Description: 选项选择（未拆分字体选择器）
* @LastEditors: ShawnPhang <https://m.palxp.cn>
* @LastEditTime: 2023-11-20 18:21:55
* @LastEditTime: 2024-03-15 17:34:00
-->
<template>
<div ref="select" class="value-select" :style="{ width: inputWidth }">
@ -65,7 +65,7 @@ import { computed, onMounted, reactive, ref, watch } from 'vue';
type TProps = {
label?: string
modelValue?: Record<string, any>
modelValue?: Record<string, any> | string | number
suffix?: string
data: Record<string, any>
disable?: boolean
@ -189,9 +189,8 @@ function down() {
</style>
<style lang="less" scoped>
// Color variables (appears count calculates by raw css)
@color0: #e1e1e1; // Appears 2 times
@color1: #d1d1d1; // Appears 2 times
@color0: #e1e1e1;
@color1: #d1d1d1;
.value-select {
// height: 60px;

547
src/components/modules/widgets/wImage/wImage.vue
View File

@ -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
View 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

498
src/components/modules/widgets/wImage/wImageStyle.vue
View File

@ -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>

19
src/mixins/methods/dealWithCtrl.ts
View File

@ -3,7 +3,7 @@
* @Date: 2022-03-09 16:29:54
* @Description: 处理和ctrl建相关的操作
* @LastEditors: ShawnPhang <https://m.palxp.cn>
* @LastEditTime: 2023-10-09 09:49:54
* @LastEditTime: 2024-03-15 17:34:51
*/
import store from '@/store'
import handlePaste from './handlePaste'
@ -50,7 +50,7 @@ function checkGroupChild(pid: number | string, key: any) {
return itHas
}
/**
* 复制
* 复制元素
*/
function copy() {
if (store.getters.dActiveElement.uuid === '-1') {
@ -64,13 +64,14 @@ function copy() {
* 粘贴
*/
function paste() {
handlePaste()
if (store.getters.dCopyElement.length === 0) {
return
} else if (store.getters.dActiveElement.isContainer && checkGroupChild(store.getters.dActiveElement.uuid, 'editable')) {
return
}
!store.getters.dActiveElement.editable && store.dispatch('pasteWidget')
handlePaste().then(() => {
if (store.getters.dCopyElement.length === 0) {
return
} else if (store.getters.dActiveElement.isContainer && checkGroupChild(store.getters.dActiveElement.uuid, 'editable')) {
return
}
!store.getters.dActiveElement.editable && store.dispatch('pasteWidget')
})
}
/**
* 撤销

92
src/mixins/methods/handlePaste.ts
View File

@ -3,7 +3,7 @@
* @Date: 2023-10-09 09:47:40
* @Description: 处理剪贴板
* @LastEditors: ShawnPhang <https://m.palxp.cn>
* @LastEditTime: 2023-10-09 10:35:21
* @LastEditTime: 2024-03-15 17:35:18
*/
// window.addEventListener('paste', (e: any) => {
@ -16,46 +16,58 @@ 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 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'
import wImageSetting from '@/components/modules/widgets/wImage/wImageSetting'
import wText from '@/components/modules/widgets/wText/wText.vue'
export default () => {
navigator.clipboard
.read()
.then(async (dataTransfer: any) => {
for (let i = 0; i < dataTransfer.length; i++) {
const item = dataTransfer[i]
if (item.types.toString().indexOf('image') !== -1) {
const imageBlob = await item.getType(item.types[0])
const file = new File([imageBlob], 'screenshot.png', { type: 'image/png' })
// 上传图片
const qnOptions = { bucket: 'xp-design', prePath: 'user' }
const result: any = await Qiniu.upload(file, qnOptions)
const { width, height }: any = await getImage(file)
const url = _config.IMG_URL + result.key
await api.material.addMyPhoto({ width, height, url })
// 添加图片到画布中
store.commit('setShowMoveable', false) // 清理掉上一次的选择
const setting = JSON.parse(JSON.stringify(wImage.setting))
setting.width = width
setting.height = height
setting.imgUrl = url
const { width: pW, height: pH } = store.getters.dPage
setting.left = pW / 2 - width / 2
setting.top = pH / 2 - height / 2
store.dispatch('addWidget', setting)
break
} else if (item.types.toString().indexOf('text') !== -1) {
store.commit('setShowMoveable', false) // 清理掉上一次的选择
const setting = JSON.parse(JSON.stringify(wTextSetting))
setting.text = await navigator.clipboard.readText()
store.dispatch('addWidget', setting)
break
return new Promise<void>((resolve) => {
navigator.clipboard
.read()
.then(async (dataTransfer: any) => {
if (store.getters.dActiveElement.editable) {
return
}
}
})
.catch((error) => {
console.error('无法读取剪贴板内容：', error)
})
for (let i = 0; i < dataTransfer.length; i++) {
const item = dataTransfer[i]
if (item.types.toString().indexOf('image') !== -1) {
const imageBlob = await item.getType(item.types[0])
const file = new File([imageBlob], 'screenshot.png', { type: 'image/png' })
// 上传图片
const qnOptions = { bucket: 'xp-design', prePath: 'user' }
const result: any = await Qiniu.upload(file, qnOptions)
const { width, height }: any = await getImage(file)
const url = _config.IMG_URL + result.key
await api.material.addMyPhoto({ width, height, url })
// 添加图片到画布中
store.commit('setShowMoveable', false) // 清理掉上一次的选择
const setting = JSON.parse(JSON.stringify(wImageSetting))
setting.width = width
setting.height = height
setting.imgUrl = url
const { width: pW, height: pH } = store.getters.dPage
setting.left = pW / 2 - width / 2
setting.top = pH / 2 - height / 2
store.dispatch('addWidget', setting)
// 清空剪贴板，防止多次上传图片
navigator.clipboard.write([
new ClipboardItem({
'text/plain': new Blob([''], {type: 'text/plain'})
})
])
break
} else if (item.types.toString().indexOf('text') !== -1) {
store.commit('setShowMoveable', false) // 清理掉上一次的选择
const setting = JSON.parse(JSON.stringify(wText.setting))
setting.text = await navigator.clipboard.readText()
store.dispatch('addWidget', setting)
break
}
}
})
.catch((error) => {
// 剪贴板内容为空
resolve()
})
})
}

2
src/store/modules/design/actions.ts
View File

@ -237,7 +237,7 @@ export default {
if (activeElement.type === 'page') {
return
}
navigator.clipboard.writeText('') // 清空系统剪贴板内容
const container = []
const selectWidgets = store.state.dSelectWidgets
if (selectWidgets.length === 0) {

1
src/store/modules/design/index.ts
View File

@ -29,7 +29,6 @@ const all = {
dDraging: false, // 是否正在抓取组件
dResizeing: false, // 是否正在调整组件宽高
dShowRefLine: true, // 是否显示参考线
dResizeWH: {
// 初始化调整大小时组件的宽高
width: 0,

5
src/views/Psd.vue
View File

@ -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]

1
vite.config.ts
View File

@ -58,6 +58,7 @@ export default defineConfig({
},
server: {
hmr: { overlay: false },
host: '127.0.0.1'
// proxy: {
// '/api': {
// target: '',

2424
yarn.lock
View File

File diff suppressed because it is too large Load Diff