aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

上传系统模特

Browse Source
This commit is contained in:
wxd
2024-10-03 14:16:23 +08:00
parent dc004824b5
commit 44912baee3
10 changed files with 184 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/component/Detail/editFrontBack.vue
View File

@@ -125,23 +125,23 @@ export default defineComponent({
fabric.Object.prototype.cornerSize = 10
fabric.Object.prototype.transparentCorners = false
exportUrl = data.maskUrl
canvas.on('mouse:wheel', opt => {
const delta = opt.e.deltaY // 滚轮，向上滚一下是 -100，向下滚一下是 100
let zoom = canvas.getZoom() // 获取画布当前缩放值
zoom *= 0.999 ** delta
if (zoom > 20) zoom = 20
if (zoom < 0.01) zoom = 0.01
// console.log(zoom);
canvas.zoomToPoint(
{ // 关键点
x: opt.e.offsetX,
y: opt.e.offsetY
},
zoom
)
opt.e.preventDefault()
opt.e.stopPropagation()
})
// canvas.on('mouse:wheel', opt => {
// const delta = opt.e.deltaY // 滚轮，向上滚一下是 -100，向下滚一下是 100
// let zoom = canvas.getZoom() // 获取画布当前缩放值
// zoom *= 0.999 ** delta
// if (zoom > 20) zoom = 20
// if (zoom < 0.01) zoom = 0.01
// // console.log(zoom);
// canvas.zoomToPoint(
// { // 关键点
// x: opt.e.offsetX,
// y: opt.e.offsetY
// },
// zoom
// )
// opt.e.preventDefault()
// opt.e.stopPropagation()
// })
await new Promise((resolve, reject) => {
fabric.Image.fromURL(data.maskUrl, function(img) {
// 设置背景图对象的宽度和高度与 canvas 相同

9
src/component/HomePage/SketchboardUpload.vue
View File

@@ -228,14 +228,15 @@ export default defineComponent({
level2Type:'',
designType:'',
})
let scene = ref({
name:'Generate Sketch',
value:'generate'
})
let openMenu = ref(false)
let sketchStyleList:any = computed(()=>{
return store.state.UserHabit.SketchGenerateType
})
let scene = ref({
name: t('SketchboardUpload.GenerateSketch'),
value:'generate'
})
return {
fileList,
openClick,

8
src/component/LibraryPage/ModelPlacement.vue
View File

@@ -215,10 +215,12 @@ export default defineComponent({
autoCropWidth: '0', //默认生成截图框宽度
autoCropHeight: '0', //默认生成截图框高度
fixed: true, //是否开启截图框宽高固定比例
fixedBox: true, //固定截图框大小，不允许改变
fixedBox: false, //固定截图框大小，不允许改变//上传系统模特使用
// fixedBox: true, //固定截图框大小，不允许改变
fixedNumber: [1, 2.125], //截图框的宽高比例
full: false, //false按原比例裁切图片，不失真
canMove: true, //上传图片是否可以移动
canMove: false, //上传图片是否可以移动//上传系统模特使用
// canMove: true, //上传图片是否可以移动
canMoveBox: false, //截图框能否拖动
original: false, //上传图片按照原始比例渲染
centerBox: false, //截图框是否被限制在图片里面
@@ -741,6 +743,8 @@ export default defineComponent({
returnData[v.type] = [v.left, v.top]
});
}
console.log(returnData);
return returnData
},

23
src/component/WorksPage/publish.vue
View File

@@ -33,7 +33,11 @@
<div class="publidh_right">
<div class="publidh_right_name publidh_content_item">
<div class="publidh_content_item_title">{{$t('Publish.CollectionTitle')}}</div>
<input type="text" v-model="subPublishDate.portfolioName">
<div class="publidh_content_item_tag">
<input type="text" v-model="subPublishDate.portfolioName">
<a-tag closable color="purple">#RCAworkshop_2024</a-tag>
</div>
<a-tag color="purple">#RCAworkshop_2024</a-tag>
</div>
<div class="publidh_right_name publidh_content_item">
<div class="publidh_content_item_title">{{$t('Publish.Description')}}</div>
@@ -275,6 +279,22 @@ export default defineComponent({
display: flex;
flex-direction: column;
height: 100%;
}
:deep(.ant-tag){
// position: absolute;
// left: 10px;
// top: 50%;
// transform: translateY(-50%);
}
.publidh_content_item_tag{
position: relative;
.ant-tag{
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
}
}
.publish_content_bottom{
--border-color: #c4c4c4;
@@ -292,6 +312,7 @@ export default defineComponent({
font-weight: 600;
font-size: 1.8rem;
margin-bottom: 1rem;
}
.publidh_content_item_intro{
font-size: 1.4rem;

86
src/component/modules/generalMiniCanvas.vue
View File

@@ -10,6 +10,7 @@
<i class="icon iconfont icon-move" @click="setOperation('move')" :class="{active:canvasState == 'move'}"></i>
<i class="icon iconfont icon-bianji" @click="setOperation('pencil')" :class="{active:canvasState == 'pencil'}"></i>
<i class="icon iconfont icon-xiangpi_huaban1" @click="setOperation('eraser')" :class="{active:canvasState == 'eraser'}"></i>
<i class="icon iconfont icon-IC-yehua" @click="setLiquefaction()"></i>
<input type="range" v-show="canvasState != 'move'" @input="setPencilWidth" min="1" max="50" v-model="canvasPencilWidth[canvasState]">
<!-- <div class="icon iconfont icon-xiala" :class="{btnRotate:spreadState}" @click="()=>spreadState = !spreadState"></div> -->
</div>
@@ -27,6 +28,7 @@
{{ $t('addDetails.submit') }}
</div>
</div>
<liquefaction ref="liquefaction" @submitLiquefaction="submitLiquefaction"></liquefaction>
</div>
</template>
<script>
@@ -42,10 +44,11 @@ import { exportSele,JSRectUpdata,JSchangeType,JScanvasMouseDown,JSSetRemoveImage
import { useI18n } from "vue-i18n";
import canvasGeneral from "@/tool/canvasGeneral";
import { getMousePosition } from "@/tool/mdEvent";
import liquefaction from "@/component/modules/liquefaction.vue";
export default defineComponent({
components: {
creditsDetail,
allOrder,
allOrder,liquefaction
},
emits: ['submitBase64Data'],
props: {
@@ -164,24 +167,24 @@ export default defineComponent({
updateCanvasState('mouseUp')
}
});
canvas.on('mouse:wheel', opt => {
// canvas.on('mouse:wheel', opt => {
const delta = opt.e.deltaY // 滚轮，向上滚一下是 -100，向下滚一下是 100
let zoom = canvas.getZoom() // 获取画布当前缩放值
zoom *= 0.999 ** delta
if (zoom > 20) zoom = 20
if (zoom < 0.01) zoom = 0.01
// console.log(zoom);
canvas.zoomToPoint(
{ // 关键点
x: opt.e.offsetX,
y: opt.e.offsetY
},
zoom
)
opt.e.preventDefault()
opt.e.stopPropagation()
})
// const delta = opt.e.deltaY // 滚轮，向上滚一下是 -100，向下滚一下是 100
// let zoom = canvas.getZoom() // 获取画布当前缩放值
// zoom *= 0.999 ** delta
// if (zoom > 20) zoom = 20
// if (zoom < 0.01) zoom = 0.01
// // console.log(zoom);
// canvas.zoomToPoint(
// { // 关键点
// x: opt.e.offsetX,
// y: opt.e.offsetY
// },
// zoom
// )
// opt.e.preventDefault()
// opt.e.stopPropagation()
// })
//画布上移动
document.addEventListener('mousemove', mouseMove);
@@ -358,6 +361,7 @@ export default defineComponent({
let data = exportCanvas.toDataURL('jpg')
cancelDsign()
clearCanvas()
console.log(data);
emit('submitBase64Data',data)
})
}
@@ -366,6 +370,47 @@ export default defineComponent({
document.removeEventListener('keyup', canvasKeyUp);
showPayOrder.value = false
}
let liquefactionData = ref(null)
let liquefaction = ref(null)
let submitLiquefaction = (rv)=>{
const originalWidth = liquefactionData.value.width // 保存原始宽度
const originalHeight = liquefactionData.value.height; // 保存原始高度
liquefactionData.value.setSrc(rv, function(img) {
let wScale = 1
let hScale = 1
if(img.width>img.height){
hScale = img.height/img.width
exportWH = img.width
}else{
wScale = img.width/img.height
exportWH = img.height
}
img.scaleToWidth(canvas.width);
img.scaleToHeight(canvas.height);
img.set({
scaleX: canvas.width / img.width,
scaleY: canvas.height / img.height
});
// img.set({
// scaleX: 1,
// scaleY: 1
// });
canvas.renderAll();
});
}
let setLiquefaction = ()=>{
const activeObjects = canvas.backgroundImage // 获取选中的对象
if (activeObjects) {
liquefactionData.value = activeObjects
console.log(liquefactionData.value);
liquefaction.value.init(activeObjects)
} else {
// message.info(useI18.t('exportModel.jsContent6'))
return null;
}
}
return {
presentState,
showPayOrder,
@@ -373,12 +418,17 @@ export default defineComponent({
t,
pencilbtnStyle,
...toRefs(canvasBtn),
liquefactionData,
liquefaction,
init,
setOperation,
setPencilWidth,
historyState,
setSubmit,
cancelDsign,
submitLiquefaction,
setLiquefaction,
};
},
data() {

37
src/component/modules/liquefaction.vue
View File

@@ -95,6 +95,8 @@ export default defineComponent({
let img = new Image()
img.setAttribute('crossOrigin', 'Anonymous')
img.onload = () => {
canvasImgData.width = img.width
canvasImgData.height = img.height
let canvasBox = document.querySelector('.liquefaction .liquefaction_canvas_box')
let width = canvasBox.offsetHeight / img.height * img.width
canvas = document.getElementById('c')
@@ -295,6 +297,41 @@ export default defineComponent({
}
}
let submit = ()=>{
const newCanvas = document.createElement('canvas');
let exportCanvas = new fabric.Canvas(newCanvas, {
width: canvasImgData.width,
height:canvasImgData.height,
isDrawingMode: false, // 开启绘图模式
});
fabric.Image.fromURL(canvas.toDataURL('png'), function(img) {
img.scaleToWidth(exportCanvas.width);
img.scaleToHeight(exportCanvas.height);
img.set({
scaleX: exportCanvas.width / img.width,
scaleY: exportCanvas.height / img.height
});
exportCanvas.setBackgroundImage(img, exportCanvas.renderAll.bind(exportCanvas));
let data = exportCanvas.toDataURL({
format: "png", // 导出格式为 PNG
quality: 1, // 图片质量为 1（最高质量）
});
},{ crossOrigin: "Anonymous" });
// newCanvas.width = canvasImgData.width;
// newCanvas.height = canvasImgData.height;
// const newCtx = newCanvas.getContext('2d');
// newCtx.drawImage(
// canvas,
// 0, 0,
// canvas.width,
// canvas.height,
// 0, 0,
// newCanvas.width,
// newCanvas.height
// );
// console.log(exportCanvas.toDataURL('jpg'));
emit('submitLiquefaction',canvas.toDataURL('image/png'))
cancelDsign()
}