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

调整画布布局

Browse Source
This commit is contained in:
X1627315083
2024-09-11 16:36:08 +08:00
parent 4e2d3d672c
commit d2cf4a2969
21 changed files with 898 additions and 675 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -56,7 +56,7 @@
<div v-if="item[0] && key == 'likeDesignCollectionList'" class="exportCanvasBox_intro">Selected Design</div>
<div v-if="item[0] && key == 'FinalizeImage'" class="exportCanvasBox_intro">Selected Product</div>
<div v-if="key == 'colorBoards'" class="exportCanvasBox_item_colorBor">
<div v-for="colorItem in item" class="exportCanvasBox_item_color" :class="{active:colorItem.upScaleChecked}" draggable="true" @dragstart="onDragstart(key,colorItem)" @click="isMoible?setDragstart(key,colorItem):''">
<div v-for="colorItem in item" class="exportCanvasBox_item_color" :class="{active:colorItem.upScaleChecked}" draggable="true" @dragstart="onDragstart(key,colorItem)" @click.stop="isMoible?setDragstart(key,colorItem):''">
<div class="color_content" v-if="colorItem.gradient" :style="{height:'10rem','background-image':colorItem?.gradient?`linear-gradient(${colorItem?.gradient.angle}deg,${setGradient(colorItem?.gradient)}`:'none'}"></div>
<div v-else>
<div class="exportCanvasBox_item_BGcolor" :style="{'background-color': 'rgb('+colorItem.rgbValue.r+','+colorItem.rgbValue.g+','+colorItem.rgbValue.b+')'}"></div>
@@ -73,7 +73,7 @@
:class="[key == 'disposeMoodboard'?'exportCanvasBox_item_dispose':'',imgItem?.upScaleChecked?'active':'']"
draggable
@dragstart="onDragstart(key,imgItem)"
@click="isMoible?setDragstart(key,imgItem):''"
@click.stop="isMoible?setDragstart(key,imgItem):''"
>
<div class="exportCanvasBox_img">
<img :src="key == 'likeDesignCollectionList'?imgItem?.designOutfitUrl:imgItem?.imgUrl" alt="" />
@@ -82,7 +82,84 @@
</div>
</div>
</div>
<div class="exportCanvasBox_left_tool exportCanvasBox_title">
<div class="exportCanvasBox_operation_bor_item exportCanvasBox_left_tool_item_column">
<label v-show="operation != 'move' && operation != 'eraser' && operation != 'texture'">
<div >{{ $t('exportModel.Color') }}</div>
<input type="color" @input="setPencilColor" v-model="canvasPencilColor">
</label>
<label v-show="operation != 'move'">
<div >{{ $t('exportModel.Size') }}:</div>
<input @change="setFontFamily" type="range" @input="setPencilWidth" min="3" max="50" v-model="canvasPencilWidth[operation]">
</label>
<label v-show="operation == 'pencil'">
<div >{{ $t('exportModel.Brushwork') }}:</div>
<a-select ref="select" class="label_select" size="small" v-model:value="brushworkValue"
style="flex: 1"
@change="brushworkChange"
>
<!-- v-model:value="brushwork" -->
<a-select-option class="label_select_item" v-for="item in brushList" :value="item.value">
<img :src="item.url" alt="">
</a-select-option>
</a-select>
</label>
<label v-show="operation == 'texture'" class="texture">
<div >{{ $t('exportModel.Texture') }}:</div>
<a-select ref="select" class="label_select" size="small" v-model:value="textureValue"
style="flex: 1"
@change="textureValueChange"
>
<!-- v-model:value="brushwork" -->
<a-select-option class="label_select_item" v-for="item in textureList" :value="item.value">
<img :src="item.url" alt="">
</a-select-option>
</a-select>
</label>
<label v-show="operation != 'pencil' && operation != 'eraser'&&operation != 'move'&&operation != 'text'&&operation != 'texture'&&operation != ''">
<div >{{ $t('exportModel.FillBack') }}:</div>
<div class="exportCanvasBox_left_tool_item leftAlign">
<i class="icon iconfont icon-tuceng1" @click="setOperationMode('fill')" :class="{active:operationMode == 'fill'}"></i>
<i class="icon iconfont icon-tuceng" @click="setOperationMode('border')" :class="{active:operationMode == 'border'}"></i>
</div>
</label>
<label v-show="operation === 'move'">
<div >{{ $t('exportModel.Layer') }}:</div>
<div class="exportCanvasBox_left_tool_item top">
<i class="icon iconfont icon-shangyiceng" @click="setLayerIndex('Front')"></i>
<i class="icon iconfont icon-shangyiceng2" @click="setLayerIndex('Forward')"></i>
<i class="icon iconfont icon-xiayiceng" @click="setLayerIndex('Backwards')"></i>
<i class="icon iconfont icon-shangyiceng1" @click="setLayerIndex('Back')"></i>
</div>
</label>
<!-- <label v-show="allSelectWidth > -1 && operation != 'move'">
<div >{{ $t('exportModel.Width') }}</div>
<input type="number" @input="setAllSelectWidth" v-model="allSelectWidth">
</label> -->
<label v-show="(operation == '' || operation == 'text' || textDataShow) && operation != 'move'">
<div>Font Family</div>
<a-select ref="select" class="label_select" size="small" v-model:value="fontFamily"
style="flex: 1"
@change="setFontFamily"
>
<!-- v-model:value="brushwork" -->
<a-select-option class="label_select_item" v-for="item in textFontFamilyList" :style="{'font-family':item.value}" :value="item.value">
{{item.name}}
</a-select-option>
</a-select>
</label>
<!-- <label v-show="operation != 'move' && operation != 'eraser' && operation != 'texture'">
<div >{{ $t('exportModel.Height') }}</div>
<input type="number" @input="setPencilColor" v-model="canvasPencilColor">
</label> -->
</div>
<!-- <div class="exportCanvasBox_title" @click.stop="setCloseNav('move')">
{{ $t('exportModel.More') }}
</div>
-->
</div>
<!-- <div @click="toSvg">12312312312</div> -->
<div class="exportCanvasBox_center_box exportCanvasBox_left">
<div class="exportCanvasBox_left_tool exportCanvasBox_title">
<div class="exportCanvasBox_left_tool_item">
<i class="icon iconfont icon-chehui" @click="historyState('')"></i>
<i class="icon iconfont icon-fanchehui" @click="historyState('reverse')"></i>
@@ -90,11 +167,9 @@
<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>
</div>
<div class="exportCanvasBox_left_tool exportCanvasBox_left_item" :class="{'closeNav' :closeNav.tool}">
<div class="exportCanvasBox_left_tool_item">
<i class="icon iconfont icon-xian" @click="setOperation('fold')" :class="{active:operation == 'fold'}"></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> -->
@@ -105,100 +180,29 @@
<input type="file" @change="uploadImage">
</label>
<i class="icon iconfont" @click="setOperation('text')" :class="{active:operation == 'text'}">T</i>
</div>
</div>
</div>
<div class="exportCanvasBox_left_tool exportCanvasBox_operation" :class="{'closeNav' :closeNav.move}">
<div class="exportCanvasBox_operation_bor">
<div class="exportCanvasBox_operation_bor_btn">
<i class="icon iconfont icon-xiala" :class="closeNav.move?'icon-rotate':''" @click.stop="setCloseNav('move')"></i>
<!-- <div class="exportCanvasBox_left_tool exportCanvasBox_left_item" :class="{'closeNav' :closeNav.tool}">
<div class="exportCanvasBox_left_tool_item">
<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>
</div>
<div class="exportCanvasBox_operation_bor_item exportCanvasBox_left_tool_item_column">
<label v-show="operation != 'move' && operation != 'eraser' && operation != 'texture'">
<div >{{ $t('exportModel.Color') }}</div>
<input type="color" @input="setPencilColor" v-model="canvasPencilColor">
</label>
<label v-show="operation != 'move'">
<div >{{ $t('exportModel.Size') }}:</div>
<input @change="setFontFamily" type="range" @input="setPencilWidth" min="3" max="50" v-model="canvasPencilWidth[operation]">
</label>
<label v-show="operation == 'pencil'">
<div >{{ $t('exportModel.Brushwork') }}:</div>
<a-select ref="select" class="label_select" size="small" v-model:value="brushworkValue"
style="flex: 1"
@change="brushworkChange"
>
<!-- v-model:value="brushwork" -->
<a-select-option class="label_select_item" v-for="item in brushList" :value="item.value">
<img :src="item.url" alt="">
</a-select-option>
</a-select>
</label>
<label v-show="operation == 'texture'" class="texture">
<div >{{ $t('exportModel.Texture') }}:</div>
<a-select ref="select" class="label_select" size="small" v-model:value="textureValue"
style="flex: 1"
@change="textureValueChange"
>
<!-- v-model:value="brushwork" -->
<a-select-option class="label_select_item" v-for="item in textureList" :value="item.value">
<img :src="item.url" alt="">
</a-select-option>
</a-select>
</label>
<label v-show="operation != 'pencil' && operation != 'eraser'&&operation != 'move'&&operation != 'text'&&operation != 'texture'&&operation != ''">
<div >{{ $t('exportModel.FillBack') }}:</div>
<div class="exportCanvasBox_left_tool_item leftAlign">
<i class="icon iconfont icon-tuceng1" @click="setOperationMode('fill')" :class="{active:operationMode == 'fill'}"></i>
<i class="icon iconfont icon-tuceng" @click="setOperationMode('border')" :class="{active:operationMode == 'border'}"></i>
</div>
</label>
<label v-show="operation === 'move'">
<div >{{ $t('exportModel.Layer') }}:</div>
<div class="exportCanvasBox_left_tool_item">
<i class="icon iconfont icon-shangyiceng" @click="setLayerIndex('Front')"></i>
<i class="icon iconfont icon-shangyiceng2" @click="setLayerIndex('Forward')"></i>
<i class="icon iconfont icon-xiayiceng" @click="setLayerIndex('Backwards')"></i>
<i class="icon iconfont icon-shangyiceng1" @click="setLayerIndex('Back')"></i>
</div>
</label>
<label v-show="allSelectWidth > -1 && operation != 'move'">
<div >{{ $t('exportModel.Width') }}</div>
<input type="number" @input="setAllSelectWidth" v-model="allSelectWidth">
</label>
<label v-show="(operation == '' || operation == 'text' || textDataShow) && operation != 'move'">
<div>Font Family</div>
<a-select ref="select" class="label_select" size="small" v-model:value="fontFamily"
style="flex: 1"
@change="setFontFamily"
>
<!-- v-model:value="brushwork" -->
<a-select-option class="label_select_item" v-for="item in textFontFamilyList" :style="{'font-family':item.value}" :value="item.value">
{{item.name}}
</a-select-option>
</a-select>
</label>
<!-- <label v-show="operation != 'move' && operation != 'eraser' && operation != 'texture'">
<div >{{ $t('exportModel.Height') }}</div>
<input type="number" @input="setPencilColor" v-model="canvasPencilColor">
</label> -->
</div>
</div>
</div> -->
</div>
<!-- <div class="exportCanvasBox_title" @click.stop="setCloseNav('move')">
{{ $t('exportModel.More') }}
<div class="exportCanvasBox_center">
<div class="editFrontBack_pencilbtn" v-show="!isShowMark" :style="pencilbtnStyle"></div>
</div>
-->
</div>
<!-- <div @click="toSvg">12312312312</div> -->
<div class="exportCanvasBox_center" :style="[isMoible?'overflow: hidden;':'']">
</div>
<div v-if="isMoible" class="exportCanvasBox_scroll">
<!-- <div v-if="isMoible" class="exportCanvasBox_scroll">
<div></div>
</div>
</div> -->
<div class="exportCanvasBox_bottom">
<div class="exportCanvasBox_left_btn Guide_1_38">
@@ -325,7 +329,14 @@ export default defineComponent({
width: 400,
height: 100,
});
let pencilbtnStyle = ref({
background:'',
width:0+'px',
height:0+'px',
display:'none',
left:0+'px',
top:0+'px',
})
let publish = ref()
// canvasWH.value.width = [window.innerWidth/2.4]
// canvasWH.value.width = canvasWH.value.width.map(num => Math.round(num / 100) * 100)[0];
@@ -372,12 +383,16 @@ export default defineComponent({
nextTick().then(async () => {
let exportCanvasBoxCanvas = document.querySelector('.Export .exportCanvasBox_center')
canvasWH.value.width = exportCanvasBoxCanvas.offsetWidth - 10
let canvasBox = document.querySelector(
".Export .exportCanvasBox_center"
);
canvasBox.innerHTML = ""; // 清空原有内容
var canvasDom = document.createElement("canvas");
let canvasBox = document.querySelector(".Export .exportCanvasBox_center");
let oldCanvasDom = canvasBox.querySelector('.canvas-container')
let oldCanvasDom1 = canvasBox.querySelector('canvas')
var canvasDom = document.createElement("canvas");
document.addEventListener("keydown", setCanvasKeyDown);
document.addEventListener("keyup", clearCanvasKeyDown);
if(oldCanvasDom)oldCanvasDom.remove()
if(oldCanvasDom)loadingShow.value = false
if(oldCanvasDom1)oldCanvasDom1.remove()
canvasBox.appendChild(canvasDom);
canvas = new fabric.Canvas(canvasDom, {
backgroundColor: "rgba(255, 255, 255)",
@@ -385,7 +400,6 @@ export default defineComponent({
height: canvasWH.value.height,
isDrawingMode: false, // 开启绘图模式
});
brushIndicator = createBrushIndicator()
canvasOnDrop()//开启鼠标到画布事件
if(!fabric.Object.prototype.controls.deleteControl){//设置元素删除
JSSetRemoveImage(deleteObject)
@@ -400,11 +414,11 @@ export default defineComponent({
//鼠标移动
// canvas.wrapperEl.onmouseover = setCanvasKeyDown;//document上添加按下和抬起事件
// canvas.wrapperEl.onmouseout = clearCanvasKeyDown;//document上添加按下和抬起事件
canvas.on("mouse:over", event =>setCanvasKeyDown(event));//document上添加按下和抬起事件
canvas.on("mouse:out", clearCanvasKeyDown);//document上添加按下和抬起事件
// canvas.on("mouse:over", event =>setCanvasKeyDown(event));//document上添加按下和抬起事件
// canvas.on("mouse:out", clearCanvasKeyDown);//document上添加按下和抬起事件
canvas.on("mouse:move", event =>setCanvasMove(event));
canvas.on("mouse:out", event=>setCanvasOut(event));
canvas.on("mouse:down", event=>setCanvasDown(event));
canvas.on("mouse:up", event=>setCanvasUp(event));
@@ -424,6 +438,7 @@ export default defineComponent({
// });
initAligningGuidelines(canvas,true)
JSchangeType(canvas,'init')
pencilbtnStyle.value.background = '#fff'
fabric.Object.prototype.cornerSize = 10
fabric.Object.prototype.transparentCorners = false
// setCanvasOperation()//设置监听添加修改画布元素，用来做撤回功能
@@ -1093,7 +1108,6 @@ export default defineComponent({
if(str == 'loadingCompleted'){
// reverseCanvasState.value.push(canvasAsJson);
}
if(canvas.contains(brushIndicator))canvas.remove(brushIndicator)
normalCanvasState.value.push(canvasAsJson);
if (isLoadCanvas) {
reverseCanvasState.value = []
@@ -1207,22 +1221,29 @@ export default defineComponent({
canvas.remove(polyLineBtn)
if(str == 'pencil'){
setPencil()
pencilbtnStyle.value.display = `block`
}else if(str == 'move'){
JSchangeType(canvas,'init')
initAligningGuidelines(canvas,true)
setMove()
pencilbtnStyle.value.display = `none`
}else if(str == 'texture'){
setTexture()
pencilbtnStyle.value.display = `block`
}else if(str == 'eraser'){
setEraser()
pencilbtnStyle.value.display = `block`
}else if(str == 'text'){
setMove()
setText()
JSchangeType(canvas,'init')
pencilbtnStyle.value.display = `none`
}else if(str){
pencilbtnStyle.value.display = `none`
canvas.forEachObject((obj) =>obj.selectable = false);
canvas.isDrawingMode = false
}
setPencilWidth()
}
let _setAllSelectTime = null
let setAllSelectWidth = ()=>{
@@ -1336,20 +1357,6 @@ export default defineComponent({
}
}
let createBrushIndicator = ()=>{
let cator = new fabric.Circle({
radius:(canvasPencilWidth.value[operation.value]?canvasPencilWidth.value[operation.value]:20)/2,
fill: '#fff',
stroke: '#000',
strokeWidth: 1,
originX: 'center',
originY: 'center',
visible :true,
erasable: false,
});
return cator
}
let brushIndicator
let hexToRgba=(hex, alpha)=> {
const r = parseInt(hex.slice(1, 3), 16);
const g = parseInt(hex.slice(3, 5), 16);
@@ -1412,7 +1419,7 @@ export default defineComponent({
canvas.freeDrawingBrush = pencil
canvas.freeDrawingBrush.width = canvasPencilWidth.value[operation.value]?canvasPencilWidth.value[operation.value]:20;
if(brushworkValue.value == 'RibbonBrush' || brushworkValue.value == 'LongfurBrush'){
canvas.freeDrawingBrush.width = 1;
}
@@ -1424,7 +1431,7 @@ export default defineComponent({
canvas.freeDrawingBrush.color = hexToRgba(canvasPencilColor.value,1);
}
brushIndicator.set('fill',canvasPencilColor.value)
pencilbtnStyle.value.background = canvasPencilColor.value
canvas.freeDrawingBrush.isEraser = false
}
@@ -1437,7 +1444,7 @@ export default defineComponent({
canvas.isDrawingMode = true
let eraser = new fabric.EraserBrush(canvas)
canvas.freeDrawingBrush = eraser
brushIndicator.set({fill: '#fff'});
pencilbtnStyle.value.background = '#fff'
canvas.requestRenderAll();
canvas.freeDrawingBrush.isEraser = true
canvas.freeDrawingBrush.width = canvasPencilWidth.value[operation.value]?canvasPencilWidth.value[operation.value]:20;
@@ -1516,7 +1523,7 @@ export default defineComponent({
if(canvas.freeDrawingBrush.isEraser){
}else{
brushIndicator.set({fill: canvasPencilColor.value});
pencilbtnStyle.value.background = canvasPencilColor.value
}
if(brushworkValue.value == 'Marking'){
canvas.freeDrawingBrush.color = hexToRgba(canvasPencilColor.value,.5);
@@ -1538,6 +1545,8 @@ export default defineComponent({
}else{
canvas.freeDrawingBrush.width = canvasPencilWidth.value[operation.value];
}
pencilbtnStyle.value.height = canvasPencilWidth.value[operation.value]+'px'
pencilbtnStyle.value.width = canvasPencilWidth.value[operation.value]+'px'
// setPencil()
},300)
}
@@ -1560,26 +1569,23 @@ export default defineComponent({
var pointer = canvas.getPointer(event.e);
if(canvas.isDrawingMode){
canvas.setCursor('none');
if(!canvas.contains(brushIndicator)){
canvas.add(brushIndicator)
canvas.bringToFront(brushIndicator);//设置优先级最高
}
// brushIndicator.fill = canvasPencilColor.value
brushIndicator.set({ left: pointer.x, top: pointer.y, visible: true,radius:(canvasPencilWidth.value[operation.value]?canvasPencilWidth.value[operation.value]:20)/2 });
}else{
if(createPatterningIs){
JScanvasMouseMove(operation.value,event,currentPatterning,downPoint,keyDown)
}
}
                if(createPatterningIs){
                    JScanvasMouseMove(operation.value,event,currentPatterning,downPoint,keyDown)
                }
            }
let canvasBox = document.querySelector(".Export .canvas-container");
const rect = canvasBox.getBoundingClientRect();
const parentRect = canvasBox.parentElement.getBoundingClientRect();
let parentX = rect.left - parentRect.left
let parentY = rect.top - parentRect.top
pencilbtnStyle.value.left = parentX + pointer.x+'px'
pencilbtnStyle.value.top = parentY + canvasBox.parentElement.scrollTop + pointer.y+'px'
canvas.requestRenderAll()
}
let setCanvasOut = (event)=>{
canvas.remove(brushIndicator)//鼠标移出删除绘画范围的圆形
}
//设置再画布上按下
let setCanvasDown = (event)=>{
// brushIndicator.set({fill: '#FFF',strokeWidth:0});
//设置移动端按下添加元素
if(isMoible && present.upScaleChecked){
@@ -1663,7 +1669,7 @@ export default defineComponent({
upPoint = event.absolutePointer
if(canvas.isDrawingMode){
setTimeout(() => {
canvas.remove(brushIndicator)
// pencilbtnStyle.value.display = `none`
updateCanvasState()
}, 100);
}else{
@@ -1953,6 +1959,7 @@ export default defineComponent({
toSvg,
showUpgradePlan,//当前弹窗是否打开
canvasWH,//画布初始宽高
pencilbtnStyle,//笔触按钮
publish,//发布作品广场
credits,//积分 用来判断HD导出积分是否够用
init,//首页点击导出后初始化
@@ -2030,54 +2037,55 @@ export default defineComponent({
}
},
watch: {
'canvasWH.height':{
handler(newVal,oldVal){
if(!this.isMoible){
return
}
let canvasBox = document.querySelector('.exportCanvasBox .exportCanvasBox_center')
let scrollBox = document.querySelector('.exportCanvasBox_scroll div')
canvasBox.scroll({
top: 0, // 纵向滚动距离
left: 0, // 横向滚动距离
});
scrollBox.style.marginTop = 0+'px'
let height = canvasBox.offsetHeight / (newVal / canvasBox.offsetHeight )
scrollBox.style.height = height +'px'
let scale = (newVal - canvasBox.offsetHeight) / (canvasBox.offsetHeight - height)
// 'canvasWH.height':{
// handler(newVal,oldVal){
// if(!this.isMoible){
// return
// }
// return
// let canvasBox = document.querySelector('.exportCanvasBox .exportCanvasBox_center')
// let scrollBox = document.querySelector('.exportCanvasBox_scroll div')
// canvasBox.scroll({
// top: 0, // 纵向滚动距离
// left: 0, // 横向滚动距离
// });
// scrollBox.style.marginTop = 0+'px'
// let height = canvasBox.offsetHeight / (newVal / canvasBox.offsetHeight )
// scrollBox.style.height = height +'px'
// let scale = (newVal - canvasBox.offsetHeight) / (canvasBox.offsetHeight - height)
let mousedown = (event)=>{//按下
let position = {
y:event.touches[0].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.touches[0].screenY - position.y
offsetTop = offsetTop <= 0? 0 : offsetTop
offsetTop = height+offsetTop >= canvasBox.offsetHeight? canvasBox.offsetHeight - height : offsetTop
scrollBox.style.marginTop = offsetTop+'px'
canvasBox.scroll({
top: offsetTop*scale, // 纵向滚动距离
left: 0, // 横向滚动距离
});
}
let mouseup = ()=>{//抬起
window.removeEventListener('touchmove',scrollMousemove)
scrollBox.removeEventListener('touchend',mouseup)
}
window.addEventListener('touchmove',scrollMousemove)
scrollBox.addEventListener('touchend',mouseup)
}
scrollBox.removeEventListener('touchstart',mousedown)
scrollBox.addEventListener('touchstart',mousedown)
// let mousedown = (event)=>{//按下
// let position = {
// y:event.touches[0].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.touches[0].screenY - position.y
// offsetTop = offsetTop <= 0? 0 : offsetTop
// offsetTop = height+offsetTop >= canvasBox.offsetHeight? canvasBox.offsetHeight - height : offsetTop
// scrollBox.style.marginTop = offsetTop+'px'
// canvasBox.scroll({
// top: offsetTop*scale, // 纵向滚动距离
// left: 0, // 横向滚动距离
// });
// }
// let mouseup = ()=>{//抬起
// window.removeEventListener('touchmove',scrollMousemove)
// scrollBox.removeEventListener('touchend',mouseup)
// }
// window.addEventListener('touchmove',scrollMousemove)
// scrollBox.addEventListener('touchend',mouseup)
// }
// scrollBox.removeEventListener('touchstart',mousedown)
// scrollBox.addEventListener('touchstart',mousedown)
}
},
// }
// },
},
mounted() {},
@@ -2108,7 +2116,7 @@ export default defineComponent({
.exportCanvasBox_title {
margin-bottom: .5rem;
font-size: 1.8rem;
font-weight: 600;
// font-weight: 600;
// margin-top: 2rem;
padding-top: 2rem;
display: flex;
@@ -2119,6 +2127,7 @@ export default defineComponent({
background: #f9fafb;
z-index: 2;
align-items: flex-start;
margin: 0 2rem;
}
.exportCanvasBox_intro{
@@ -2131,12 +2140,17 @@ export default defineComponent({
.exportCanvasBox_left {
width: 100%;
height: auto;
.exportCanvasBox_left_tool{
margin: 0;
}
label {
display: flex;
align-items: center;
width: 30%;
width: 23%;
div {
width: 8rem;
width: auto;
margin-right: 2rem;
white-space: nowrap;
}
input,select {
// width: 10em;
@@ -2176,12 +2190,18 @@ export default defineComponent({
flex-wrap: wrap;
align-items: flex-start;
position: relative;
flex-direction: row;
>label{
width: 20%;
}
.exportCanvasBox_title {
margin: 0 4rem;
// margin: 0 4rem;
position: relative;
.exportCanvasBox_left_tool_item{
display: flex;
flex-direction: column;
}
}
.exportCanvasBox_left_item{
overflow: hidden;
@@ -2199,61 +2219,7 @@ export default defineComponent({
top: 7rem;
position: absolute;
}
.exportCanvasBox_operation{
left: auto;
right: 0;
z-index: 2;
position: absolute;
top: 7rem;
max-height: 30rem;
height: auto;
border: none;
background: none;
.exportCanvasBox_operation_bor_btn{
// transform: translateX(-100%);
// position: absolute;
border: 1px solid;
cursor: pointer;
width: 4rem;
height: 4rem;
background: #fff;
i{
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
transform: rotate(90deg);
&.icon-rotate{
transform: rotate(270deg);
}
}
}
.exportCanvasBox_operation_bor{
overflow: hidden;
position: initial;
transform: translateX(calc(100% - 4rem));
display: block;
transition: all .3s;
border: none;
display: flex;
align-items: flex-start;
background: rgba(0, 0, 0, 0);
.exportCanvasBox_operation_bor_item{
background: #fff;
border: 1px solid;
width: 28rem;
}
label{
width: 100%;
}
}
&.closeNav{
.exportCanvasBox_operation_bor{
transform: translateX(0%);
}
}
}
.exportCanvasBox_imgbor {
// height: auto;
width: 20rem;
@@ -2321,46 +2287,54 @@ export default defineComponent({
}
}
}
.exportCanvasBox_left_tool{
.exportCanvasBox_left_tool_item_column{
flex-direction: column;
padding: 1rem;
.exportCanvasBox_operation_bor_item{
flex: 1;
margin-left: 8rem;
display: flex;
label{
margin-right: 2rem;
}
}
.exportCanvasBox_left_tool_item{
display: flex;
flex: 1;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
flex-direction: row;
flex-wrap: nowrap;
&.leftAlign{
justify-content: flex-start;
}
&.leftAlign{
justify-content: flex-start;
}
.exportCanvasBox_left_tool_item{
display: flex;
flex: 1;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
&.leftAlign{
justify-content: flex-start;
}
i{
font-size: 2.5rem;
cursor: pointer;
width: 4rem;
height: 4rem;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
&.active{
border: 1px solid;
border-radius: .4rem;
}
i{
font-size: 2.5rem;
cursor: pointer;
width: 4rem;
height: 4rem;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
&.active{
border: 1px solid;
border-radius: .4rem;
}
.uploadImage{
width: 4rem;
height: 4rem;
input{
height: 0;
border: none;
}
}
}
.uploadImage{
width: 4rem;
height: 4rem;
input{
height: 0;
width: 0;
border: none;
}
}
}
}
.exportCanvasBox_bottom{
@@ -2393,10 +2367,44 @@ export default defineComponent({
}
}
}
.exportCanvasBox_center_box{
display: flex;
overflow: hidden;
}
.exportCanvasBox_center {
flex: 1;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
position: relative;
.editFrontBack_pencilbtn{
position: absolute;
z-index: 1;
border-radius: 50%;
border: 1px solid #000;
pointer-events: none;
transform: translate(-50%,-50%);
}
&.exportCanvasBox_center::-webkit-scrollbar-button:single-button{
}
&.exportCanvasBox_center::-webkit-scrollbar {
/* 竖轴的宽度 */
width: 2rem;
/* 横轴的高度 */
height: 1rem;
transition: all .3s;
}
/* 进度 */
&.exportCanvasBox_center::-webkit-scrollbar-thumb {
border-radius: 1rem;
background: #543087;
}
/* 轨道 */
&.exportCanvasBox_center::-webkit-scrollbar-track {
border-radius: 1rem;
background: rgba(84, 48, 135,.2);
// background: rgba(238, 238, 244, 0);
}
}
.exportCanvasBox_scroll{
height: 100%;