This commit is contained in:
X1627315083
2024-05-21 16:00:27 +08:00
parent 2424fcd74e
commit 1b48411eb5
2 changed files with 19 additions and 16 deletions

View File

@@ -4,7 +4,7 @@
<div class="admin_state"> <div class="admin_state">
<div class="admin_state_item"> <div class="admin_state_item">
<span>State:</span> <span>State Time:</span>
<a-range-picker <a-range-picker
class="range_picker" class="range_picker"
v-model:value="rangePickerValue" v-model:value="rangePickerValue"
@@ -22,7 +22,7 @@
</a-range-picker> </a-range-picker>
</div> </div>
<div class="admin_state_item"> <div class="admin_state_item">
<span>Time:</span> <span>End Time:</span>
<a-time-range-picker class="range_picker" valueFormat="HH:mm:ss" v-model:value="rangeTimeValue" /> <a-time-range-picker class="range_picker" valueFormat="HH:mm:ss" v-model:value="rangeTimeValue" />
</div> </div>

View File

@@ -106,7 +106,7 @@
</label> </label>
<label v-show="operation != 'move'"> <label v-show="operation != 'move'">
<div >{{ $t('exportModel.Size') }}:</div> <div >{{ $t('exportModel.Size') }}:</div>
<input type="range" @input="setPencilWidth" min="1" max="50" v-model="canvasPencilWidth"> <input type="range" @input="setPencilWidth" min="1" max="50" v-model="canvasPencilWidth[operation]">
</label> </label>
<label v-show="operation == 'pencil'"> <label v-show="operation == 'pencil'">
<div >{{ $t('exportModel.Brushwork') }}:</div> <div >{{ $t('exportModel.Brushwork') }}:</div>
@@ -1015,7 +1015,10 @@ export default defineComponent({
// } // }
} }
let canvasPencilColor = ref('#000000')//画笔颜色 let canvasPencilColor = ref('#000000')//画笔颜色
let canvasPencilWidth = ref(20)//画笔大小 // let canvasPencilWidth = ref(20)//画笔大小
let canvasPencilWidth = ref({
})
let allSelectWidth = ref(-1)//多选或单选的宽度 let allSelectWidth = ref(-1)//多选或单选的宽度
let allSelect = ref([])//多选或单选的宽度 let allSelect = ref([])//多选或单选的宽度
let setOperation = (str)=>{ let setOperation = (str)=>{
@@ -1113,7 +1116,7 @@ export default defineComponent({
let patternBrush = new fabric.PatternBrush(canvas) let patternBrush = new fabric.PatternBrush(canvas)
patternBrush.source = img patternBrush.source = img
patternBrush.width = canvasPencilWidth.value; // 设置画笔大小 patternBrush.width = canvasPencilWidth.value[operation.value]?canvasPencilWidth.value[operation.value]:20; // 设置画笔大小
canvas.freeDrawingBrush = patternBrush canvas.freeDrawingBrush = patternBrush
} }
let setOperationMode = (str) =>{ let setOperationMode = (str) =>{
@@ -1155,7 +1158,7 @@ export default defineComponent({
} }
let clearBrushIndicator = ()=>{ let clearBrushIndicator = ()=>{
let cator = new fabric.Circle({ let cator = new fabric.Circle({
radius:canvasPencilWidth.value/2, radius:(canvasPencilWidth.value[operation.value]?canvasPencilWidth.value[operation.value]:20)/2,
fill: '#fff', fill: '#fff',
stroke: '#000', stroke: '#000',
strokeWidth: 1, strokeWidth: 1,
@@ -1228,7 +1231,7 @@ export default defineComponent({
} }
canvas.freeDrawingBrush = pencil canvas.freeDrawingBrush = pencil
canvas.freeDrawingBrush.width = canvasPencilWidth.value; canvas.freeDrawingBrush.width = canvasPencilWidth.value[operation.value]?canvasPencilWidth.value[operation.value]:20;
if(brushworkValue.value == 'RibbonBrush' || brushworkValue.value == 'LongfurBrush'){ if(brushworkValue.value == 'RibbonBrush' || brushworkValue.value == 'LongfurBrush'){
canvas.freeDrawingBrush.width = 1; canvas.freeDrawingBrush.width = 1;
@@ -1257,7 +1260,7 @@ export default defineComponent({
brushIndicator.set({fill: '#fff'}); brushIndicator.set({fill: '#fff'});
canvas.requestRenderAll(); canvas.requestRenderAll();
canvas.freeDrawingBrush.isEraser = true canvas.freeDrawingBrush.isEraser = true
canvas.freeDrawingBrush.width = canvasPencilWidth.value; canvas.freeDrawingBrush.width = canvasPencilWidth.value[operation.value]?canvasPencilWidth.value[operation.value]:20;
} }
let setTextFun = (e)=>{ let setTextFun = (e)=>{
if(operation.value != 'text'){ if(operation.value != 'text'){
@@ -1273,13 +1276,13 @@ export default defineComponent({
left: x, left: x,
top: y, top: y,
width: 150, width: 150,
fontSize: canvasPencilWidth.value, fontSize: canvasPencilWidth.value[operation.value]?canvasPencilWidth.value[operation.value]:20,
fill:canvasPencilColor.value, fill:canvasPencilColor.value,
}) })
canvas.add(textbox) canvas.add(textbox)
canvas.renderAll();
textbox.enterEditing(); textbox.enterEditing();
canvas.setActiveObject(textbox).renderAll();
} }
} }
@@ -1337,12 +1340,12 @@ export default defineComponent({
} }
let setPencilWidth = ()=>{//切换颜色给铅笔设置颜色 let setPencilWidth = ()=>{//切换颜色给铅笔设置颜色
clearTimeout(setTimeOut.width) clearTimeout(setTimeOut.width)
canvasPencilWidth.value = Number(canvasPencilWidth.value) canvasPencilWidth.value[operation.value] = Number(canvasPencilWidth.value[operation.value]?canvasPencilWidth.value[operation.value]:20)
setTimeOut.width = setTimeout(()=>{ setTimeOut.width = setTimeout(()=>{
if(brushworkValue.value == 'LongfurBrush' || brushworkValue.value == 'RibbonBrush'){ if(brushworkValue.value == 'LongfurBrush' || brushworkValue.value == 'RibbonBrush'){
canvas.freeDrawingBrush.width = 1; canvas.freeDrawingBrush.width = 1;
}else{ }else{
canvas.freeDrawingBrush.width = canvasPencilWidth.value; canvas.freeDrawingBrush.width = canvasPencilWidth.value[operation.value];
} }
// setPencil() // setPencil()
},300) },300)
@@ -1371,7 +1374,7 @@ export default defineComponent({
canvas.bringToFront(brushIndicator);//设置优先级最高 canvas.bringToFront(brushIndicator);//设置优先级最高
} }
// brushIndicator.fill = canvasPencilColor.value // brushIndicator.fill = canvasPencilColor.value
brushIndicator.set({ left: pointer.x, top: pointer.y, visible: true,radius:canvasPencilWidth.value/2 }); brushIndicator.set({ left: pointer.x, top: pointer.y, visible: true,radius:(canvasPencilWidth.value[operation.value]?canvasPencilWidth.value[operation.value]:20)/2 });
}else{ }else{
if(createPatterningIs){ if(createPatterningIs){
@@ -1420,7 +1423,7 @@ export default defineComponent({
}) })
// currentPatterning = JScanvasMouseDown(operation.value,event,canvasPencilWidth.value,currentPatterning) // currentPatterning = JScanvasMouseDown(operation.value,event,canvasPencilWidth.value,currentPatterning)
}else{ }else{
currentPatterning = JScanvasMouseDown(operation.value,event,canvasPencilWidth.value,currentPatterning) currentPatterning = JScanvasMouseDown(operation.value,event,canvasPencilWidth.value[operation.value]?canvasPencilWidth.value[operation.value]:20,currentPatterning)
canvas.add(currentPatterning) canvas.add(currentPatterning)
canvas.bringToFront(currentPatterning);//设置优先级最高 canvas.bringToFront(currentPatterning);//设置优先级最高
if(operation.value == 'fold'){ if(operation.value == 'fold'){
@@ -1445,7 +1448,7 @@ export default defineComponent({
let polyline = new fabric.Polyline(points, { let polyline = new fabric.Polyline(points, {
fill: operationMode.value == 'fill'? canvasPencilColor.value : 'transparent', fill: operationMode.value == 'fill'? canvasPencilColor.value : 'transparent',
stroke: canvasPencilColor.value, stroke: canvasPencilColor.value,
strokeWidth:canvasPencilWidth.value, strokeWidth:canvasPencilWidth.value[operation.value]?canvasPencilWidth.value[operation.value]:20,
selection:false, selection:false,
}) })
canvas.add(polyline) canvas.add(polyline)
@@ -1485,7 +1488,7 @@ export default defineComponent({
if(operationMode.value == 'fill'){ if(operationMode.value == 'fill'){
currentPatterning.set({fill: canvasPencilColor.value}) currentPatterning.set({fill: canvasPencilColor.value})
}else if (operationMode.value == 'border'){ }else if (operationMode.value == 'border'){
currentPatterning.set({fill: 'transparent',stroke: canvasPencilColor.value,strokeWidth: canvasPencilWidth.value}) currentPatterning.set({fill: 'transparent',stroke: canvasPencilColor.value,strokeWidth: canvasPencilWidth.value[operation.value]?canvasPencilWidth.value[operation.value]:20})
} }
if(JSON.stringify(downPoint) == JSON.stringify(upPoint)){ if(JSON.stringify(downPoint) == JSON.stringify(upPoint)){
canvas.remove(currentPatterning) canvas.remove(currentPatterning)