Merge branch 'main' of ssh://18.167.251.121:10002/aidlab/FiDA_Front
This commit is contained in:
11
src/assets/icons/threeLogo.svg
Normal file
11
src/assets/icons/threeLogo.svg
Normal file
@@ -0,0 +1,11 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="_图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 317.48 276">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1 {
|
||||
fill: #3d3d3d;
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<path class="cls-1" d="M163.55,24.01v45c1.72.15,3.22.97,4.68,1.82,25.29,14.72,55.93,30.25,79.63,46.38,3.63,2.47,7.09,3.95,6.74,9.26l.44,87.56,42.03,21.97,1.47-.48c-1.67-3.38-6.49-11.59-6.02-14.95.43-3.07,4.76-6.02,7.72-4.83,6.02,2.42,13.49,26.46,17.23,32.78-.48,3.25-2.61,5.32-5.68,6.25-4.74,1.44-23.8,4.07-28.91,4.18-3.4.07-6.4-1-7.16-4.66-2.05-9.87,12.33-6.96,17.82-9.76l-44.27-22.35-90.3,53.84-5.1-1.82-86.04-52.02-44.27,22.35c5.79,2.51,19.81.16,17.82,9.76-.76,3.66-3.75,4.73-7.16,4.66-5.09-.11-24.21-2.74-28.91-4.18C2.36,253.86,0,251.79,0,248.51c0-1.92,12.92-30.45,14.27-31.54,3.42-2.77,8.94-1.29,10.12,2.77,1.07,3.71-4.02,12.15-5.82,15.78l1.47.48,42.03-21.97.94-91.06,1.52-2.48,89.03-51.47V24.01c-4.23,2.5-6.74,10.94-11.74,11.85-4.41.8-7.9-2.86-7.11-7.11.29-1.59,16.86-24.35,18.85-26.23,3.6-3.39,6.45-3.32,9.99,0,1.99,1.87,18.56,24.64,18.85,26.23.79,4.25-2.7,7.91-7.11,7.11-5-.91-7.51-9.35-11.74-11.85ZM235.55,126l-1.66-2.82-74.9-43.16-77.44,45.49,76.58,45.51,77.43-45.01ZM152.55,258.01v-75.5l-78-46.5v75.5l74.45,45.55,3.55.95ZM242.55,136.01l-78,46.5v75.5l3.55-.95,74.45-45.55v-75.5Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
BIN
src/assets/images/threeLoading.png
Normal file
BIN
src/assets/images/threeLoading.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 698 B |
@@ -3,7 +3,7 @@
|
||||
<div class="header" @click="show = !show">
|
||||
<span class="icon"><svg-icon name="dc-details_edit" size="17" /></span>
|
||||
<span class="title">Edit Details</span>
|
||||
<span class="show">
|
||||
<span class="arrow" :class="{ show }">
|
||||
<svg-icon name="dc-down_arrow2" size="10" />
|
||||
</span>
|
||||
</div>
|
||||
@@ -50,6 +50,7 @@
|
||||
box-shadow: 0 1.66rem 2.33rem 0 rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
> .header {
|
||||
flex-shrink: 0;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
height: 5rem;
|
||||
@@ -64,10 +65,17 @@
|
||||
font-size: 1.6rem;
|
||||
color: #000;
|
||||
}
|
||||
> .arrow {
|
||||
transition: transform 0.2s;
|
||||
transform: rotate(-90deg);
|
||||
&.show {
|
||||
transform: rotate(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
> .content {
|
||||
padding: 1.6rem;
|
||||
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -15,9 +15,10 @@
|
||||
<brush-control-panel :currentTool="toolManager.currentTool.value" />
|
||||
<zoom
|
||||
:zoom="canvasManager.currentZoom.value / 100"
|
||||
:step="0.1"
|
||||
is-home
|
||||
@home="() => canvasManager.resetZoom()"
|
||||
@add="() => canvasManager.zoomIn()"
|
||||
@sub="() => canvasManager.zoomOut()"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
@@ -426,6 +426,8 @@ export class BrushIndicator {
|
||||
this.canvas.on("mouse:over", this._mouseEnterHandler);
|
||||
this.canvas.on("mouse:out", this._mouseLeaveHandler);
|
||||
this.canvas.on("mouse:move", this._mouseMoveHandler);
|
||||
|
||||
this._observeCanvasChanges();
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -147,6 +147,35 @@ export class CanvasManager {
|
||||
resetZoom() {
|
||||
this.animationManager.resetZoom()
|
||||
}
|
||||
// 使用动画管理器的缩放方法
|
||||
animateZoom(point, targetZoom, options = {}) {
|
||||
console.log(point, targetZoom, options)
|
||||
this.animationManager.animateZoom(point, targetZoom, options);
|
||||
}
|
||||
zoomIn() {
|
||||
const currentZoom = this.canvas.getZoom()
|
||||
const newZoom = Math.min(currentZoom + 0.1, 20) // 增加20%，最大20倍
|
||||
|
||||
// 使用画布中心作为缩放点
|
||||
const centerPoint = {
|
||||
x: this.canvas.width / 2,
|
||||
y: this.canvas.height / 2
|
||||
}
|
||||
|
||||
this.animateZoom(centerPoint, newZoom)
|
||||
}
|
||||
|
||||
zoomOut() {
|
||||
const currentZoom = this.canvas.getZoom()
|
||||
const newZoom = Math.max(currentZoom - 0.1, 0.1) // 减少20%，最小0.1倍
|
||||
|
||||
// 使用画布中心作为缩放点
|
||||
const centerPoint = {
|
||||
x: this.canvas.width / 2,
|
||||
y: this.canvas.height / 2
|
||||
}
|
||||
this.animateZoom(centerPoint, newZoom)
|
||||
}
|
||||
getObjects() {
|
||||
return this.canvas.getObjects() || []
|
||||
}
|
||||
|
||||
@@ -487,7 +487,8 @@ export class BrushManager {
|
||||
|
||||
// 更新活动笔刷
|
||||
if (this.activeBrush) {
|
||||
this.activeBrush.configure(this.canvas.freeDrawingBrush, { color });
|
||||
const currentOpacity = this.brushStore.state.opacity;
|
||||
this.activeBrush.configure(this.canvas.freeDrawingBrush, { color, opacity: currentOpacity });
|
||||
}
|
||||
|
||||
// 更新笔刷指示器大小
|
||||
|
||||
@@ -166,9 +166,15 @@ defineExpose({open})
|
||||
<div class="modelBox">
|
||||
<div class="model" ref="threeDom">
|
||||
</div>
|
||||
<div class="icon" v-show="!load.state">
|
||||
<SvgIcon name="threeLogo" size="40" size-unit="px" />
|
||||
</div>
|
||||
<div class="load" v-show="load.state">
|
||||
<i class="fi fi-rr-cubes"></i>
|
||||
<div class="text">Load...</div>
|
||||
<div class="text">
|
||||
<img src="@/assets/images/threeLoading.png" alt="">
|
||||
{{ $t('threeModel.loading') }}
|
||||
</div>
|
||||
<div class="loadBox">
|
||||
<div class="schedule" :style="{width:load.progress+'%'}"></div>
|
||||
</div>
|
||||
@@ -190,30 +196,49 @@ defineExpose({open})
|
||||
border: 1px solid #D9D9D9;
|
||||
overflow: hidden;
|
||||
}
|
||||
> .icon{
|
||||
position: absolute;
|
||||
bottom: 2.4rem;
|
||||
right: 2.4rem;
|
||||
}
|
||||
> .load{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: rgba(0, 0, 0, .2);
|
||||
background: #e6e6e6;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
color: #fff;
|
||||
> .text{
|
||||
font-weight: 500;
|
||||
font-size: 1.8rem;
|
||||
line-height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #747474;
|
||||
> img{
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
> i{
|
||||
font-size: 3rem;
|
||||
}
|
||||
> .loadBox{
|
||||
width: 15rem;
|
||||
width: 26rem;
|
||||
height: 1rem;
|
||||
border-radius: 1rem;
|
||||
border-radius: 3.3rem;
|
||||
background: #fff;
|
||||
overflow: hidden;
|
||||
margin-top: 1.2rem;
|
||||
> .schedule{
|
||||
height: 100%;
|
||||
background: greenyellow;
|
||||
border-radius: 3.3rem;
|
||||
background: #848484;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -80,7 +80,7 @@
|
||||
text-align: center;
|
||||
line-height: 18px;
|
||||
background-color: #fff;
|
||||
font-size: 6px;
|
||||
font-size: 9px;
|
||||
color: #000;
|
||||
border: 1px solid #d9d9d9;
|
||||
cursor: pointer;
|
||||
|
||||
@@ -187,5 +187,9 @@ export default {
|
||||
},
|
||||
assistant: {
|
||||
inputPlaceholder: 'Ask anything',
|
||||
},
|
||||
//3d面板
|
||||
threeModel: {
|
||||
loading: 'Loading',
|
||||
}
|
||||
}
|
||||
|
||||
@@ -182,5 +182,9 @@ export default {
|
||||
},
|
||||
assistant: {
|
||||
inputPlaceholder: '请输入'
|
||||
},
|
||||
//3d面板
|
||||
threeModel: {
|
||||
loading: '加载中',
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user