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

fix

Browse Source
This commit is contained in:
wxd
2024-10-11 23:26:10 +08:00
parent f1121aeca2
commit 2c192967f9
4 changed files with 300 additions and 246 deletions
Download Patch File Download Diff File Expand all files Collapse all files

539
src/component/HomePage/ExportModel.vue
View File

@@ -167,42 +167,36 @@
<i class="icon iconfont icon-caizhi" @click="setOperation('texture')" :class="{active:operation == 'texture'}"></i>
<i class="icon iconfont icon-move" @click="setOperation('move')" :class="{active:operation == 'move'}"></i>
<i class="icon iconfont icon-xiangpi_huaban1" @click="setOperation('eraser')" :class="{active:operation == 'eraser'}"></i>
<!-- <i class="icon iconfont icon-xiala" :class="closeNav.tool?'icon-rotate':''" @click.stop="setCloseNav('tool')"></i> -->
<i class="icon iconfont icon-xian" @click="setOperation('fold')" :class="{active:operation == 'fold'}"></i>
<i class="icon iconfont icon-checkbox-full" @click="setOperation('rect')" :class="{active:operation == 'rect'}"></i>
<!-- <i class="icon iconfont icon-zhixian" @click="setOperation('line')" :class="{active:operation == 'line'}"></i> -->
<!-- <i class="icon iconfont icon-circle" @click="setOperation('circle')" :class="{active:operation == 'circle'}"></i> -->
<i class="icon iconfont icon-sanjiaoxing" @click="setOperation('triangle')" :class="{active:operation == 'triangle'}"></i>
<i class="icon iconfont icon-tx-fill-tuoyuanxing" @click="setOperation('ellipse')" :class="{active:operation == 'ellipse'}"></i>
<label class="uploadImage">
<i class="icon iconfont icon-shangchuantupian" ></i>
<input type="file" @change="uploadImage">
</label>
<i class="icon iconfont" @click="setOperation('text')" :class="{active:operation == 'text'}">T</i>
<label class="uploadImage">
<i class="fi fi-br-upload" ></i>
<input type="file" @change="uploadImage">
</label>
<i class="icon iconfont" @click="setOperation('text')" :class="{active:operation == 'text'}">T</i>
<i class="icon iconfont icon-IC-yehua" @click="setLiquefaction()"></i>
<!-- <i class="fi fi-rr-zoom-in" @click="setOperation('zoomIn')" :class="{active:operation == 'zoomIn'}"></i>
<i class="fi fi-rr-zoom-out" @click="setOperation('zoomOut')" :class="{active:operation == 'zoomOut'}"></i> -->
<i class="icon iconfont icon-xiala" :class="closeNav.tool?'icon-rotate-tool':''" @click.stop="setCloseNav('tool')"></i>
</div>
<!-- <div class="exportCanvasBox_left_tool exportCanvasBox_left_item" :class="{'closeNav' :closeNav.tool}">
<div class="exportCanvasBox_left_tool_item">
<div class="exportCanvasBox_left_tool exportCanvasBox_left_item" :class="{'closeNav' :closeNav.tool}">
<div class="exportCanvasBox_left_tool_item exportCanvasBox_left_tool_item_more">
<i class="icon iconfont icon-xian" @click="setOperation('fold')" :class="{active:operation == 'fold'}"></i>
<i class="icon iconfont icon-checkbox-full" @click="setOperation('rect')" :class="{active:operation == 'rect'}"></i>
<i class="icon iconfont icon-sanjiaoxing" @click="setOperation('triangle')" :class="{active:operation == 'triangle'}"></i>
<i class="icon iconfont icon-tx-fill-tuoyuanxing" @click="setOperation('ellipse')" :class="{active:operation == 'ellipse'}"></i>
<label class="uploadImage">
<i class="icon iconfont icon-shangchuantupian" ></i>
<input type="file" @change="uploadImage">
</label>
<i class="icon iconfont" @click="setOperation('text')" :class="{active:operation == 'text'}">T</i>
<i class="icon iconfont icon-checkbox-full" @click="setOperation('rect')" :class="{active:operation == 'rect'}"></i>
<!-- <i class="icon iconfont icon-zhixian" @click="setOperation('line')" :class="{active:operation == 'line'}"></i> -->
<!-- <i class="icon iconfont icon-circle" @click="setOperation('circle')" :class="{active:operation == 'circle'}"></i> -->
<i class="icon iconfont icon-sanjiaoxing" @click="setOperation('triangle')" :class="{active:operation == 'triangle'}"></i>
<i class="icon iconfont icon-tx-fill-tuoyuanxing" @click="setOperation('ellipse')" :class="{active:operation == 'ellipse'}"></i>
</div>
</div> -->
</div>
</div>
<div class="exportCanvasBox_center">
<div class="editFrontBack_pencilbtn" v-show="!isShowMark" :style="pencilbtnStyle"></div>
<div>
<!-- <div>
<div>
<div></div>
<span>16:9</span>
</div>
</div>
</div> -->
</div>
<div class="exportCanvasBox_scroll">
<div></div>
@@ -337,7 +331,7 @@ export default defineComponent({
// let canvasDom = ref()
let canvasWH = ref({
width: 400,
height: 100,
height: 0,
});
let pencilbtnStyle = ref({
background:'',
@@ -368,7 +362,8 @@ export default defineComponent({
y: 0,
height: 0,
};
let sketchGrouping = 3; //sketch分组
let canvasScale = 1; //canvas放大缩小倍率
let sketchGrouping = 6; //sketch分组
let likeDesign = 4; //整体图分组
let disposeMoodboardShow = true;
let canvasState = ref()//存放canvas操作
@@ -391,50 +386,9 @@ export default defineComponent({
"likeDesignCollectionList",
productData.key,
];
// isShowMark.value = true
nextTick(async ()=>{
let oldExportCanvas
let localCanvas = localStorage.getItem('canvasContent')
let localUserlikeGroupId = localStorage.getItem('userlikeGroupId')
let currentTime = localStorage.getItem('currentTime')
oldExportCanvas = await new Promise((resolve, reject) => {
if(localUserlikeGroupId == userlikeGroupId && (new Date().getTime() - currentTime < 21600000)){
Modal.confirm({
title: useI18.t('exportModel.jsContent8'),
okText: 'Yes',
cancelText: 'No',
mask:false,
centered:true,
onOk() {
localCanvas = localCanvas?JSON.parse(localCanvas):null
resolve(localCanvas)
},
onCancel(){
resolve(null)
}
});
}else{
resolve(null)
}
})
if(!oldExportCanvas){
let data = {
userLikeGroupId:userlikeGroupId
}
oldExportCanvas = await new Promise((resolve, reject) => {
Https.axiosPost(Https.httpUrls.exportSearch, data)
.then((rv) => {
resolve(rv)
})
.catch((rv) => {
resolve(null)
});
})
}
createCanvas(oldExportCanvas)
})
createCanvas()
}
let setCanvasData = ()=>{
let setCanvasData = async (oldExportCanvas)=>{
let oldKey = "";
let margin = 20; //每个图形边距
let maxHeight = 0
@@ -451,114 +405,115 @@ export default defineComponent({
canvas.loadFromJSON(oldExportCanvas, () => {});
isShowMark.value = false
}else{
canvasWH.value.height = 500
canvas.setHeight(canvasWH.value.height);
isShowMark.value = false
// await nextTick(async ()=>{
// for (const item of arr) {
// for (const key in allBoardData.value) {
// if (item == key) {
// //循环渲染顺序
// let sketchGroupingItem = [];
// if (
// item == "moodboardFiles" &&
// !disposeMoodboardShow
// ) {
// continue;
// }
// for (const [allItemIndex, allItem,] of allBoardData.value[key].entries()) {
// await new Promise(async (resolve, reject) => {
// if(!allItem){
// resolve()
// }
// maxHeight = position.y + position.height>maxHeight?position.y +position.height:maxHeight
// if (key == "colorBoards") {
// let rect = setGroup(allItem)
// if (position.x + rect.width > canvasWH.value.width || oldKey != key) {
// position.x = 0;
// position.y = maxHeight;
// }
// let group = setCanvasColor(position.y,position.x,rect)
// oldKey = key;
// position.x += rect.width + margin;
// position.height = group.height + margin;
// resolve();
// } else {
// let itemCanvasImg = allItem.imgUrl;
// if (key == "likeDesignCollectionList") {
await nextTick(async ()=>{
for (const item of contentKeyList) {
for (const key in allBoardData.value) {
if (item == key) {
//循环渲染顺序
let sketchGroupingItem = [];
if (
item == "moodboardFiles" &&
!disposeMoodboardShow
) {
continue;
}
for (const [allItemIndex, allItem,] of allBoardData.value[key].entries()) {
await new Promise(async (resolve, reject) => {
if(!allItem){
resolve()
}
maxHeight = position.y + position.height>maxHeight?position.y +position.height:maxHeight
if (key == "colorBoards") {
let rect = setGroup(allItem)
if (position.x + rect.width > canvasWH.value.width || oldKey != key) {
position.x = 0;
position.y = maxHeight;
}
let group = setCanvasColor(position.y,position.x,rect)
oldKey = key;
position.x += rect.width + margin;
position.height = group.height + margin;
resolve();
} else {
let itemCanvasImg = allItem.imgUrl;
if (key == "likeDesignCollectionList") {
// itemCanvasImg =
// allItem.designOutfitUrl;
// }
// fabric.Image.fromURL(itemCanvasImg,(img) => {
// if(item == 'likeDesignCollectionList')imgWidth[item] = setImageWidth(key,img);
// let scaleWH = imgWidth[item] / img.width; //计算放到画布上缩小倍率
// if(key == "sketchboardFiles"){
// if(allItemIndex == 0){
// position.x = 0;
// position.y = maxHeight;
// }
// }else{
// if (position.x + img.width * scaleWH > canvasWH.value.width || oldKey != key) {
// position.x = 0;
// position.y = maxHeight;
// }
// }
// setCanvasImage(img,key,position.x,position.y,allItem)//设置图片
// position.height = img.height * scaleWH + margin;
// if (key == "sketchboardFiles") {
// if (sketchGroupingItem.length <3) {
// sketchGroupingItem.push(JSON.parse(JSON.stringify(position)));
// }
// if (sketchGroupingItem.length >2) {
// let sketchXyIndex = {
// maxIndex: 0,
// maxNum: 0,
// minNum: 999999,
// minIndex: 0,
// };
// sketchGroupingItem.forEach(
// (sketchItem,sketchIndex) => {
// if (sketchItem.y + sketchItem.height < sketchXyIndex.minNum) {
// sketchXyIndex.minNum = sketchItem.y + sketchItem.height
// sketchXyIndex.minIndex = sketchIndex;
// }
// if (sketchItem.y + sketchItem.height > sketchXyIndex.maxNum) {
// sketchXyIndex.maxNum = sketchItem.y + sketchItem.height
// sketchXyIndex.maxIndex = sketchIndex;
// }
// }
// );
// sketchGroupingItem[sketchXyIndex.minIndex].y = sketchXyIndex.minNum
// // sketchGroupingItem[sketchXyIndex.maxIndex].y = sketchXyIndex.maxNum
// if (allBoardData.value[key].length == allItemIndex + 1) {
// maxHeight = sketchXyIndex.maxNum
// } else {
// position = sketchGroupingItem[sketchXyIndex.minIndex];
// }
itemCanvasImg =
allItem.designOutfitUrl;
}
fabric.Image.fromURL(itemCanvasImg,(img) => {
if(item == 'likeDesignCollectionList')imgWidth[item] = setImageWidth(key,img);
let scaleWH = imgWidth[item] / img.width; //计算放到画布上缩小倍率
if(key == "sketchboardFiles"){
if(allItemIndex == 0){
position.x = 0;
position.y = maxHeight;
}
}else{
if (position.x + img.width * scaleWH > canvasWH.value.width || oldKey != key) {
position.x = 0;
position.y = maxHeight;
}
}
setCanvasImage(img,key,position.x,position.y,allItem)//设置图片
position.height = img.height * scaleWH + margin;
if (key == "sketchboardFiles") {
if (sketchGroupingItem.length <sketchGrouping+1) {
sketchGroupingItem.push(JSON.parse(JSON.stringify(position)));
}
if (sketchGroupingItem.length >sketchGrouping) {
let sketchXyIndex = {
maxIndex: 0,
maxNum: 0,
minNum: 999999,
minIndex: 0,
};
sketchGroupingItem.forEach(
(sketchItem,sketchIndex) => {
if (sketchItem.y + sketchItem.height < sketchXyIndex.minNum) {
sketchXyIndex.minNum = sketchItem.y + sketchItem.height
sketchXyIndex.minIndex = sketchIndex;
}
if (sketchItem.y + sketchItem.height > sketchXyIndex.maxNum) {
sketchXyIndex.maxNum = sketchItem.y + sketchItem.height
sketchXyIndex.maxIndex = sketchIndex;
}
}
);
sketchGroupingItem[sketchXyIndex.minIndex].y = sketchXyIndex.minNum
// sketchGroupingItem[sketchXyIndex.maxIndex].y = sketchXyIndex.maxNum
if (allBoardData.value[key].length == allItemIndex + 1) {
maxHeight = sketchXyIndex.maxNum
} else {
position = sketchGroupingItem[sketchXyIndex.minIndex];
}
// }
// }
// if(key == "sketchboardFiles" && sketchGroupingItem.length >2){
// }else{
// position.x += img.width * scaleWH + margin;
// }
// img.lock_rotation = true;
// oldKey = key;
// resolve()
// canvas.add(img);
}
}
if(key == "sketchboardFiles" && sketchGroupingItem.length >sketchGrouping){
}else{
position.x += img.width * scaleWH + margin;
}
img.lock_rotation = true;
oldKey = key;
resolve()
canvas.add(img);
// },{ crossOrigin: "Anonymous" });
// }
// });
// }
// }
// }
// if(position.y+position.height>canvasWH.value.height){
// canvasWH.value.height = Math.floor(position.y+position.height)
// canvas.setHeight(canvasWH.value.height);
// }
// }
// })
},{ crossOrigin: "Anonymous" });
}
});
}
}
}
if(position.y+position.height>canvasWH.value.height){
canvasWH.value.height = Math.floor(position.y+position.height)
canvas.setHeight(canvasWH.value.height);
}
}
})
isShowMark.value = false
}
updateCanvasState('')//加载完成后记录一下
@@ -566,7 +521,6 @@ export default defineComponent({
let createCanvas = (oldExportCanvas) => {
showUpgradePlan.value = true;
clearTimeout(submitCanvasContent)
canvasWH.value.height = 100
normalCanvasState.value = []
reverseCanvasState.value = []
allBoardData.value.likeDesignCollectionList =
@@ -649,69 +603,47 @@ export default defineComponent({
if(driver__.value.driver){
driverObj__.moveNext()
}
let canvasBoxDom = document.querySelector('.exportCanvasBox .exportCanvasBox_center')
let scrollBox = document.querySelector('.exportCanvasBox_scroll div')
let height = canvasBox.offsetHeight / (canvasWH.value.height / canvasBox.offsetHeight )
let scale = (canvasWH.value.height - canvasBoxDom.offsetHeight) / (canvasBoxDom.offsetHeight - height)
let mouseDownOperation = (event)=>{//按下
let position = {
y:event.screenY,
top : scrollBox.style.marginTop?scrollBox.style.marginTop.split('px')[0]*1:0
nextTick(async ()=>{
let oldExportCanvas
let localCanvas = localStorage.getItem('canvasContent')
let localUserlikeGroupId = localStorage.getItem('userlikeGroupId')
let currentTime = localStorage.getItem('currentTime')
oldExportCanvas = await new Promise((resolve, reject) => {
if(localUserlikeGroupId == userlikeGroupId && (new Date().getTime() - currentTime < 21600000)){
Modal.confirm({
title: useI18.t('exportModel.jsContent8'),
okText: 'Yes',
cancelText: 'No',
mask:false,
centered:true,
onOk() {
localCanvas = localCanvas?JSON.parse(localCanvas):null
resolve(localCanvas)
},
onCancel(){
resolve(null)
}
});
}else{
resolve(null)
}
})
if(!oldExportCanvas){
let data = {
userLikeGroupId:userlikeGroupId
}
oldExportCanvas = await new Promise((resolve, reject) => {
Https.axiosPost(Https.httpUrls.exportSearch, data)
.then((rv) => {
resolve(rv)
})
.catch((rv) => {
resolve(null)
});
})
}
// let top =
let scrollMousemove = (e)=>{
let height = scrollBox.style.height.split('px')[0]*1
let offsetTop = position.top+e.screenY - position.y
offsetTop = offsetTop <= 0? 0 : offsetTop
offsetTop = height+offsetTop >= canvasBoxDom.offsetHeight? canvasBoxDom.offsetHeight - height : offsetTop
scrollBox.style.marginTop = offsetTop+'px'
canvasBoxDom.scroll({
top: offsetTop*scale, // 纵向滚动距离
left: 0, // 横向滚动距离
});
}
let mouseMove = function(event){
let e = getMousePosition(event,false)
scrollMousemove(e)
}
let touchmove = function(event){
let e = getMousePosition(event,true)
scrollMousemove(e)
}
let mouseup = function(){
document.removeEventListener('mousemove',mouseMove)
document.removeEventListener('touchmove',touchmove)
document.removeEventListener('mouseup',mouseup)
document.removeEventListener('touchend',mouseup)
//移动端
}
document.addEventListener('mousemove', mouseMove);
document.addEventListener('touchmove', touchmove);
document.addEventListener('mouseup', mouseup);
document.addEventListener('touchend', mouseup);
// document.addEventListener('touchmove',scrollMousemove)
// scrollBox.addEventListener('touchend',mouseup)
}
canvasBoxDom.addEventListener('scroll', function() {
const scrollTop = canvasBoxDom.scrollTop;
scrollBox.style.marginTop = scrollTop/scale+'px'
});
let mousedown = function(event){
let e = getMousePosition(event,false)
mouseDownOperation(e)
}
let touchstart = function(event){
let e = getMousePosition(event,true)
mouseDownOperation(e)
}
scrollBox.addEventListener('mousedown',mousedown)
scrollBox.addEventListener('touchstart',touchstart)
// scrollBox.removeEventListener('touchstart',mousedown)
// scrollBox.addEventListener('touchstart',mousedown)
setCanvasData(oldExportCanvas)
})
});
};
@@ -751,12 +683,16 @@ export default defineComponent({
) {
//如果是mood 需要判断用户是否点击layout
disposeMoodboardShow = false;
imgWidth = canvasWH.value.width / 2;
}
if(key == 'upImgFiles'){
imgWidth = canvasWH.value.width / 4;
imgWidth = canvasWH.value.width / 8;
// imgWidth = canvasWH.value.width / 4;
}
if (key == "printboardFiles") {
imgWidth = canvasWH.value.width / 8;
imgWidth = canvasWH.value.width / 14;
// imgWidth = canvasWH.value.width / 8;
}
if (key == "sketchboardFiles"||key == 'moodboardFiles'||key == 'FinalizeImage') {
imgWidth =
@@ -768,7 +704,7 @@ export default defineComponent({
if(img){
let imgObj = JSON.parse(JSON.stringify(img))
let height = imgObj.height
imgObj.height = canvasWH.value.width / 4 * 1.8
imgObj.height = canvasWH.value.width / 8 * 1.8
let heightScale = imgObj.height / height
imgWidth = imgObj.width * heightScale
}
@@ -990,6 +926,7 @@ export default defineComponent({
y: 0,
height: 0,
};
canvasWH.value.height = 0
operation.value = 'move'
operation.value = 'fill'
},
@@ -1337,6 +1274,9 @@ export default defineComponent({
setText()
JSchangeType(canvas,'init')
pencilbtnStyle.value.display = `none`
}else if(str == 'zoomIn' || str == 'zoomOut'){
pencilbtnStyle.value.display = `none`
canvas.forEachObject((obj) =>obj.selectable = false);
}else if(str){
pencilbtnStyle.value.display = `none`
canvas.forEachObject((obj) =>obj.selectable = false);
@@ -1692,10 +1632,35 @@ export default defineComponent({
pencilbtnStyle.value.top = parentY + canvasBox.parentElement.scrollTop + pointer.y+'px'
canvas.requestRenderAll()
}
let setCanvasZoom = (opt)=>{
console.log(123);
let zoom = canvas.getZoom() // 获取画布当前缩放值
let num = -100
if(operation.value == 'zoomOut') num = 100
zoom *= 0.999 ** num
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()
}
//设置再画布上按下
let setCanvasDown = (event)=>{
//设置移动端按下添加元素
if(operation.value == 'zoomIn' || operation.value == 'zoomOut'){
setCanvasZoom(event)
return
}
if(isMoible && present.upScaleChecked){
present.upScaleChecked = false
present = {}
@@ -2179,6 +2144,7 @@ export default defineComponent({
watch: {
'canvasWH.height':{
handler(newVal,oldVal){
let canvasBox = document.querySelector('.exportCanvasBox .exportCanvasBox_center')
let scrollBox = document.querySelector('.exportCanvasBox_scroll div')
if(!canvasBox || !scrollBox)return
@@ -2189,6 +2155,66 @@ export default defineComponent({
scrollBox.style.marginTop = 0+'px'
let height = canvasBox.offsetHeight / (newVal / canvasBox.offsetHeight )
scrollBox.style.height = height +'px'
if(oldVal != 0)return
let canvasBoxDom = document.querySelector('.exportCanvasBox .exportCanvasBox_center')
let scale = (newVal - canvasBoxDom.offsetHeight) / (canvasBoxDom.offsetHeight - height)
let mouseDownOperation = (event)=>{//按下
let position = {
y:event.screenY,
top : scrollBox.style.marginTop?scrollBox.style.marginTop.split('px')[0]*1:0
}
// let top =
let scrollMousemove = (e)=>{
let height = scrollBox.style.height.split('px')[0]*1
let offsetTop = position.top+e.screenY - position.y
offsetTop = offsetTop <= 0? 0 : offsetTop
offsetTop = height+offsetTop >= canvasBoxDom.offsetHeight? canvasBoxDom.offsetHeight - height : offsetTop
scrollBox.style.marginTop = offsetTop+'px'
canvasBoxDom.scroll({
top: offsetTop*scale, // 纵向滚动距离
left: 0, // 横向滚动距离
});
}
let mouseMove = function(event){
let e = getMousePosition(event,false)
scrollMousemove(e)
}
let touchmove = function(event){
let e = getMousePosition(event,true)
scrollMousemove(e)
}
let mouseup = function(){
document.removeEventListener('mousemove',mouseMove)
document.removeEventListener('touchmove',touchmove)
document.removeEventListener('mouseup',mouseup)
document.removeEventListener('touchend',mouseup)
//移动端
}
document.addEventListener('mousemove', mouseMove);
document.addEventListener('touchmove', touchmove);
document.addEventListener('mouseup', mouseup);
document.addEventListener('touchend', mouseup);
// document.addEventListener('touchmove',scrollMousemove)
// scrollBox.addEventListener('touchend',mouseup)
}
canvasBoxDom.addEventListener('scroll', ()=> {
let height = canvasBox.offsetHeight / (this.canvasWH.height / canvasBox.offsetHeight )
let scale = (this.canvasWH.height - canvasBoxDom.offsetHeight) / (canvasBoxDom.offsetHeight - height)
const scrollTop = canvasBoxDom.scrollTop;
scrollBox.style.marginTop = scrollTop/scale+'px'
});
let mousedown = function(event){
let e = getMousePosition(event,false)
mouseDownOperation(e)
}
let touchstart = function(event){
let e = getMousePosition(event,true)
mouseDownOperation(e)
}
scrollBox.addEventListener('mousedown',mousedown)
scrollBox.addEventListener('touchstart',touchstart)
}
},
},
@@ -2213,6 +2239,7 @@ export default defineComponent({
.icon-rotate{
transform: rotate(-180deg);
}
.exportCanvasBox {
flex: 1;
overflow-x: hidden;
@@ -2281,6 +2308,15 @@ export default defineComponent({
}
}
}
.exportCanvasBox_left_item{
width: 20rem;
.exportCanvasBox_title{
.exportCanvasBox_left_tool_item{
display: flex;
}
}
}
.exportCanvasBox_left_item.closeNav{
// max-height: 1000rem;
// height: auto;
@@ -2309,6 +2345,12 @@ export default defineComponent({
flex-direction: column;
}
.exportCanvasBox_left_tool_item_more{
flex-wrap: wrap;
flex-direction: row;
justify-content: flex-start;
padding: 1rem;
}
}
.exportCanvasBox_left_item{
overflow: hidden;
@@ -2326,6 +2368,11 @@ export default defineComponent({
top: 7rem;
position: absolute;
}
.exportCanvasBox_left_item.exportCanvasBox_left_tool{
top: 100%;
transform: translateY(-110%);
left: 100%;
}
.exportCanvasBox_imgbor {
// height: auto;
@@ -2337,9 +2384,11 @@ export default defineComponent({
.exportCanvasBox_allItem {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
// justify-content: space-between;
justify-content: flex-start;
.exportCanvasBox_item {
text-align: center;
margin-right: 1rem;
.exportCanvasBox_img{
position: relative;
margin-bottom: 2rem;
@@ -2453,6 +2502,12 @@ export default defineComponent({
border-radius: .4rem;
}
}
.icon-xiala{
transform: rotate(-90deg);
&.icon-rotate-tool{
transform: rotate(90deg);
}
}
.uploadImage{
width: 4rem;
height: 4rem;

2
src/component/HomePage/scaleImage.vue
View File

@@ -441,7 +441,7 @@ export default defineComponent({
</script>
<style>
.scaleImage_modal{
overflow: initial !important;
overflow: visible !important;
}
</style>
<style lang="less" scoped>

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

@@ -46,7 +46,7 @@
</div>
</div>
<div class="exportCanvasBox_submit" @click="setSubmit">
<div class="exportCanvasBox_submit" @click="setSubmit(false)">
<div class="started_btn">
{{ $t('addDetails.submit') }}
</div>
@@ -207,7 +207,6 @@ export default defineComponent({
}
});
canvas.on('mouse:wheel', opt => {
const delta = opt.e.deltaY // 滚轮，向上滚一下是 -100，向下滚一下是 100
let zoom = canvas.getZoom() // 获取画布当前缩放值
zoom *= 0.999 ** delta