diff --git a/src/assets/iconfont2/demo_index.html b/src/assets/iconfont2/demo_index.html index 4b8dda54..86fd4fdc 100644 --- a/src/assets/iconfont2/demo_index.html +++ b/src/assets/iconfont2/demo_index.html @@ -54,6 +54,12 @@
@@ -82,6 +88,7 @@ import { useI18n } from "vue-i18n"; import { ToolCommand } from "../commands/ToolCommands"; import { OperationType } from "../utils/layerHelper"; + import { loadImageUrlToLayer } from "../utils/imageHelper"; import { TransformCommand } from "../commands/StateCommands"; const props = defineProps({ canvas: { @@ -262,6 +269,21 @@ finalState.flipY = !finalState.flipY; transformObject(obj, initialState, finalState); }; + // 裁剪图片 + const cropImage = inject("cropImage"); + const clickCropImage = async (obj) => { + const base64 = await props.layerManager.getLayerToBase64(obj.layerId); + if(base64) cropImage(base64).then((res) => { + loadImageUrlToLayer({ + imageUrl: res, + layerManager: props.layerManager, + canvas: props.canvas, + toolManager: props.toolManager, + }).then(res=>{ + console.log("========",res); + }); + }); + }; const updateActiveObjects = (arrs, keys) => { arrs.forEach((v) => { diff --git a/src/component/Canvas/CanvasEditor/index.vue b/src/component/Canvas/CanvasEditor/index.vue index 33ccd3f1..31c01762 100644 --- a/src/component/Canvas/CanvasEditor/index.vue +++ b/src/component/Canvas/CanvasEditor/index.vue @@ -23,6 +23,7 @@ import { BrushStore } from "./store/BrushStore"; import cuowuImg from "@/assets/images/homePage/cuowu.svg"; import { Https } from "@/tool/https"; import SelectImages from "@/component/common/SelectImages.vue"; +import CropImage from "./components/CropImage.vue"; import { UrlToFile } from "@/tool/util"; // import { MinimapManager } from "./managers/minimap/MinimapManager"; @@ -907,6 +908,12 @@ const changeCanvas = async (command) => { } }; +const cropImageRef = ref(null); +const cropImage = (url) => { + return cropImageRef.value.open(url) +}; +provide("cropImage", cropImage); // 提供给子组件使用 + // 提供外部ref实例方法 defineExpose({ layers, // 图层数据 @@ -1249,6 +1256,9 @@ defineExpose({ /> + + +
- +
+
Video Type
+ + + {{ item.label }} + + +
{{ $t('poseTransfer.SelectDesign') }}
-
@@ -57,7 +68,7 @@
-
+
{{$t('poseTransfer.Selectpose')}}
@@ -73,6 +84,17 @@
+
+
+ +
+
@@ -269,6 +291,9 @@ export default defineComponent({ } const gifPause = (e:any,item:any)=>{ e.target.src = item.firstFrame//静态图片 + } + const handlePlayMotion = item => { + } const getPoseList = ()=>{ Https.axiosGet(Https.httpUrls.getAllPose).then((rv)=>{ @@ -625,7 +650,20 @@ export default defineComponent({ setGenerate(taskIdList[0].taskId) } }) - },{immediate: true }) + }, + {immediate: true } + ) + + const videoType = ref('3') + const showMotion = computed(()=> videoType.value === '3' ) + const options = ref([ + { vlaue: '1', label: 'First frame' }, + { value: '2', label: 'First and last frames' }, + { value: '3', label: 'First frame and skeleton' }, + + ]) + + onBeforeUnmount(()=>{ clearInterval(data.generateTime) clearInterval(data.remGenerateTime) @@ -654,6 +692,9 @@ export default defineComponent({ setSpeed, setUploadDelete, locale, + videoType, + options, + showMotion, } }, directives:{ @@ -757,21 +798,23 @@ export default defineComponent({ max-height: 45rem; margin-top: 2rem; display: flex; - flex-direction: row; flex-wrap: nowrap; - justify-content: space-between; + // justify-content: space-between; width: 100%; overflow: hidden; overflow-x: auto; + column-gap: 2.4rem; + position: relative; > .item{ - margin-right: 1rem; - width: calc(100% / 2 - .5rem); + // width: calc(100% / 2 - .5rem); + // height: 25rem; + width: 12.7rem; + height: 17.8rem; cursor: pointer; overflow: hidden; display: flex; justify-content: center; flex-shrink: 0; - height: 25rem; position: relative; // &.active{ // border: 2px solid; @@ -852,11 +895,36 @@ export default defineComponent({ > img{ width: 100%; object-fit: contain; + border: 1px solid #D0D0D0; } } > .upload_item{ border: none; } + .control-container{ + width: 100%; + height: 3.3rem; + position: absolute; + bottom: 0; + left: 0; + background: linear-gradient(180deg, rgba(8, 9, 13, 0) 0%, rgba(8, 9, 13, 0.27) 80.37%); + display: flex; + align-items: flex-end; + justify-content: center; + .icon-list{ + height: 50%; + width: calc(100% - 1.6rem); + border-top: 1px solid #fff; + display: flex; + box-sizing: border-box; + justify-content: flex-start; + align-items: center; + .play-icon{ + width: initial; + height: initial; + } + } + } } > .head{ color: #000; @@ -948,5 +1016,39 @@ export default defineComponent({ overflow: hidden; } } - } + + .upload_file_item { + width: 100%; + height: 100%; + :deep(.ant-upload-picture-card-wrapper) { + width: 100% !important; + height: 100%; + .ant-upload-list-picture-card { + width: 100%; + height: 100%; + .ant-upload-select-picture-card { + width: 100%; + height: 100%; + border: 1px solid #000; + background: #fff; + } + } + } + } + .video-type-container{ + margin-bottom: 4rem; + .title{ + font-size: 1.8rem; + color: #000; + margin-bottom: 1.4rem; + } + :deep(.ant-select){ + width: 100%; + .ant-select-selector{ + border: 2px solid #D0D0D0; + border-radius: 1rem; + } + } + } + } \ No newline at end of file diff --git a/src/component/home/tools/toProduct/Prompt.vue b/src/component/home/tools/toProduct/Prompt.vue index 15e20576..d4595adf 100644 --- a/src/component/home/tools/toProduct/Prompt.vue +++ b/src/component/home/tools/toProduct/Prompt.vue @@ -83,7 +83,7 @@