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:
X1627315083
2024-10-14 16:08:24 +08:00
parent 935d69ac42
commit f29cb498f3
3 changed files with 196 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,7 +2,7 @@
<div class="generalMiniCanvas">
<div class="addDetails_canvasCenter">
<div class="generalMiniCanvas_input generalMiniCanvas_item" :class="{spread:spreadState}">
<div class="generalMiniCanvas_input_item" v-show="(canvasState != 'move' && canvasState != 'liquidation')">
<div class="generalMiniCanvas_input_item" v-show="(canvasState != 'move' && canvasState != 'liquidation' && canvasState != 'movePosition')">
<span>{{ $t('exportModel.Size') }}</span>
<input type="range" @input="setPencilWidth" min="1" max="50" v-model="canvasPencilWidth[canvasState]">
</div>
@@ -18,7 +18,17 @@
<span>{{ $t('exportModel.Color') }}</span>
<input type="color" @input="setPencilColor" v-model="canvasPencilColor">
</div>
<!-- <div class="generalMiniCanvas_input_item brushwork" v-show="canvasState == 'pencil'">
<span >{{ $t('exportModel.Brushwork') }}:</span>
<a-select ref="select" class="label_select" size="small" v-model:value="brushworkValue"
style="width: 20rem"
@change="brushworkChange"
>
<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>
</div> -->
</div>
<div class="exportCanvasBox_center_data">
<div class="generalMiniCanvas_btn generalMiniCanvas_item" :class="{spread:spreadState}">
@@ -27,12 +37,15 @@
</div> -->
<i class="icon iconfont icon-chehui" @click="historyState('')"></i>
<i class="icon iconfont icon-fanchehui" @click="historyState('reverse')"></i>
<i class="icon iconfont icon-move" @click="setOperation('movePosition')" :class="{active:canvasState == 'movePosition'}"></i>
<!-- <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="setOperation('liquidation')"></i> -->
<i class="icon iconfont icon-IC-yehua" @click="setLiquefaction()"></i>
<!-- <div class="icon iconfont icon-xiala" :class="{btnRotate:spreadState}" @click="()=>spreadState = !spreadState"></div> -->
<i class="fi fi-rr-zoom-in" @click="setOperation('zoomIn')" :class="{active:canvasState == 'zoomIn'}"></i>
<i class="fi fi-rr-zoom-out" @click="setOperation('zoomOut')" :class="{active:canvasState == 'zoomOut'}"></i>
</div>
<div class="exportCanvasBox_center_box">
@@ -147,6 +160,7 @@ export default defineComponent({
let normalCanvasState = ref([])//存放canvas操作
let canvasState = ref()//存放canvas操作
let keyDown = []//监听键盘的 keydown 和 keyup 事件
let isMovePostion = false
let init = ()=>{
normalCanvasState.value = []
reverseCanvasState.value = []
@@ -178,6 +192,9 @@ export default defineComponent({
height:canvasWH.value * hScale,
})
canvas.selection = false;
// canvas.set({
// backgroundColor: 'lightblue'
// });
scale = img.height/canvas.height
pencilbtnStyle.value.background = canvasBtn.canvasPencilColor
@@ -203,17 +220,16 @@ export default defineComponent({
},{ crossOrigin: "Anonymous" });
// 鼠标抬起事件
canvas.on('mouse:up', function(event) {
if(canvasBtn.canvasState != 'move'){
updateCanvasState('mouseUp')
}
if(isMovePostion)isMovePostion = false
if(canvasBtn.canvasState != 'move')updateCanvasState('mouseUp')
});
canvas.on("mouse:down", event=>setCanvasDown(event));
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,
@@ -223,7 +239,9 @@ export default defineComponent({
)
opt.e.preventDefault()
opt.e.stopPropagation()
upDataPencilWidth(zoom)
})
canvas.on("mouse:move", event=>setCanvasMove(event));
//画布上移动
document.addEventListener('mousemove', mouseMove);
@@ -260,13 +278,13 @@ export default defineComponent({
}
let mouseMove = (event)=>{
let e = getMousePosition(event,false)
setCanvasMove(e)
setDomMove(e)
}
let touchmove = (event)=>{
let e = getMousePosition(event,true)
setCanvasMove(e)
setDomMove(e)
}
let setCanvasMove = (event)=>{
let setDomMove = (event)=>{
if(canvas.isDrawingMode){
canvas.setCursor('none');
}
@@ -277,39 +295,155 @@ export default defineComponent({
pencilbtnStyle.value.left = parentX + "px"
pencilbtnStyle.value.top = parentY+'px'
}
let setCanvasMove = (event) =>{
if(canvasBtn.canvasState == 'movePosition' && isMovePostion)setCanvasPosition(event)
}
let lastPosX = 0
let lastPosY = 0
let setCanvasDown = (event)=>{
if(canvasBtn.canvasState == 'movePosition'){
isMovePostion = true;
lastPosX = event.e.clientX;
lastPosY = event.e.clientY;
return
}
if(canvasBtn.canvasState == 'zoomIn' || canvasBtn.canvasState == 'zoomOut'){
setCanvasZoom(event)
return
}
}
let setCanvasPosition = (event)=>{
const e = event.e;
const vpt = canvas.viewportTransform;
vpt[4] += e.clientX - lastPosX; // 更新水平偏移
vpt[5] += e.clientY - lastPosY; // 更新垂直偏移
canvas.requestRenderAll(); // 请求重绘画布
lastPosX = e.clientX;
lastPosY = e.clientY;
}
let setCanvasZoom = (opt)=>{
let zoom = canvas.getZoom() // 获取画布当前缩放值
let num = -100
if(canvasBtn.canvasState == '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()
upDataPencilWidth(zoom)
}
let setOperation = (str)=>{
canvasBtn.canvasState = str
let canvasCenterBox = document.querySelector(".generalMiniCanvas .exportCanvasBox_center_box");
let classList = canvasCenterBox.className.split(' ');
canvasCenterBox.className = 'exportCanvasBox_center_box'
if(str == 'move'){
setMove()
pencilbtnStyle.value.display = `none`
if(classList.indexOf('cursorNone')>-1) canvasCenterBox.classList.remove('cursorNone')
canvasCenterBox.className = 'exportCanvasBox_center_box'
}else if(str == 'pencil'){
setPencil()
pencilbtnStyle.value.display = `block`
if(classList.indexOf('cursorNone') == -1) canvasCenterBox.classList.add('cursorNone')
canvasCenterBox.className = 'exportCanvasBox_center_box cursorNone'
}else if(str == 'eraser'){
setEraser()
pencilbtnStyle.value.display = `block`
if(classList.indexOf('cursorNone') == -1) canvasCenterBox.classList.add('cursorNone')
canvasCenterBox.className = 'exportCanvasBox_center_box cursorNone'
}else if(str == 'liquidation'){
canvas.isDrawingMode = false
if(classList.indexOf('cursorNone') == -1) canvasCenterBox.classList.add('cursorNone')
canvasCenterBox.className = 'exportCanvasBox_center_box cursorNone'
}else if(str == 'zoomIn' || str == 'zoomOut'){
pencilbtnStyle.value.display = `none`
canvas.isDrawingMode = false
canvas.forEachObject((obj) =>obj.selectable = false);
canvasCenterBox.className = 'exportCanvasBox_center_box'
}else if(str == 'movePosition'){
canvas.isDrawingMode = false
pencilbtnStyle.value.display = `none`
canvas.forEachObject((obj) =>obj.selectable = false);
canvasCenterBox.className = 'exportCanvasBox_center_box cursorMove'
}
}
let brushworkValue = ref('PencilBrush')
let brushworkChange = (value)=>{
brushworkValue.value = value
setPencil()
}
let setMove = ()=>{
canvas.isDrawingMode = false
canvas.forEachObject((obj) =>obj.selectable = true);
}
let brushList = ref([
{
value:'PencilBrush',
url:'/image/brush/PencilBrush.jpg'
},{
value:'Marking',
url:'/image/brush/PencilBrush-2.jpg'
},{
value:'InkBrush',
url:'/image/brush/InkBrush.jpg'
},{
value:'CrayonBrush',
url:'/image/brush/CrayonBrush.jpg'
},{
value:'RibbonBrush',
url:'/image/brush/RibbonBrush.jpg'
},{
value:'MarkerBrush',
url:'/image/brush/MarkerBrush.jpg'
},{
value:'WritingBrush',
url:'/image/brush/WritingBrush.jpg'
},{
value:'LongfurBrush',
url:'/image/brush/LongfurBrush.jpg'
},{
value:'SpraypaintBrush',
url:'/image/brush/SpraypaintBrush.jpg'
},
])
let setPencil = ()=>{
let pencil
canvas.isDrawingMode = true//开启绘画模式
canvas.freeDrawingBrush = new fabric.PencilBrush(canvas,{});
if(brushworkValue.value == 'PencilBrush'){
pencil = new fabric.PencilBrush(canvas,{}); //普通笔
}else if(brushworkValue.value == 'Marking'){
pencil = new fabric.PencilBrush(canvas,); //记号笔
}else if(brushworkValue.value == 'InkBrush'){
pencil = new fabric.InkBrush(canvas,{}); //油画笔
}else if(brushworkValue.value=='CrayonBrush'){
pencil = new fabric.CrayonBrush(canvas,{}); //蜡笔
}else if(brushworkValue.value == 'RibbonBrush'){
pencil = new fabric.RibbonBrush(canvas,{width: 1,}); //色带
}else if(brushworkValue.value == 'MarkerBrush'){
pencil = new fabric.MarkerBrush(canvas,{}); //书写笔
// pencil = new fabric.PenBrush(canvas,{}); //书写笔
}else if(brushworkValue.value == 'WritingBrush'){
pencil = new fabric.WritingBrush(canvas,{}); //毛笔
}else if(brushworkValue.value == 'LongfurBrush'){
pencil = new fabric.LongfurBrush(canvas,{width: 1,}); //色带
}else if(brushworkValue.value == 'SpraypaintBrush'){
pencil = new fabric.SpraypaintBrush(canvas,{}); //长毛刷
}
canvas.freeDrawingBrush = pencil
canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState]);
canvas.freeDrawingBrush.color = canvasBtn.canvasPencilColor
pencilbtnStyle.value.background = canvasBtn.canvasPencilColor
canvas.freeDrawingBrush.isEraser = false
setPencilWidth()
pencilColor()
}
let setEraser = ()=>{
canvas.isDrawingMode = true
@@ -321,6 +455,9 @@ export default defineComponent({
canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState]);
setPencilWidth()
}
let upDataPencilWidth = (zoom)=>{
canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState]) / zoom;
}
let deleteObj = ()=> {
// if(!canvas.getActiveObjects()){
// return
@@ -343,9 +480,13 @@ export default defineComponent({
let setPencilWidth = ()=>{//切换颜色给铅笔设置颜色
clearTimeout(setTimeOut.pencilWidth)
setTimeOut.pencilWidth = setTimeout(()=>{
canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState])
let zoom = canvas.getZoom() // 获取画布当前缩放值
canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState]) / zoom
pencilbtnStyle.value.height = canvasBtn.canvasPencilWidth[canvasBtn.canvasState]+'px'
pencilbtnStyle.value.width = canvasBtn.canvasPencilWidth[canvasBtn.canvasState]+'px'
if(brushworkValue.value == 'RibbonBrush' || brushworkValue.value == 'LongfurBrush'){
canvas.freeDrawingBrush.width = 1;
}
},300)
}
let setPencilColor = ()=>{//切换颜色给铅笔设置颜色
@@ -358,12 +499,24 @@ export default defineComponent({
// colorHistoryList.value.push(canvasPencilColor.value)
// },1000)
}
let hexToRgba=(hex, alpha)=> {
const r = parseInt(hex.slice(1, 3), 16);
const g = parseInt(hex.slice(3, 5), 16);
const b = parseInt(hex.slice(5, 7), 16);
return `rgba(${r}, ${g}, ${b}, ${alpha})`;
}
let pencilColor = ()=>{
if(canvas.freeDrawingBrush.isEraser){
canvas.freeDrawingBrush.color = '#FFFFFF';
}else{
pencilbtnStyle.value.background = canvasBtn.canvasPencilColor
canvas.freeDrawingBrush.color = canvasBtn.canvasPencilColor;
if(brushworkValue.value == 'Marking'){
console.log(canvasBtn.canvasPencilColor);
console.log(hexToRgba(canvasBtn.canvasPencilColor,.5));
canvas.freeDrawingBrush.color = hexToRgba(canvasBtn.canvasPencilColor,.5)
}else{
canvas.freeDrawingBrush.color = canvasBtn.canvasPencilColor
}
}
}
let routesChange = (str)=>{
@@ -434,9 +587,12 @@ export default defineComponent({
)
exportCanvas.add(obj)
})
console.log(canvas.toDataURL("image/png"));
let data = canvas.toDataURL("image/png");
let position = JSON.parse(JSON.stringify(canvas.viewportTransform))
position[4] *= scale
position[5] *= scale
//设置画布当前那位置和缩放
// exportCanvas.viewportTransform = position
let data = exportCanvas.toDataURL("image/png");
if(liquefation){
return resolve(data)
}
@@ -458,6 +614,7 @@ export default defineComponent({
let submitLiquefaction = (rv)=>{
// const originalWidth = liquefactionData.value.width // 保存原始宽度
// const originalHeight = liquefactionData.value.height; // 保存原始高度
canvas.viewportTransform = [1,0,0,1,0,0]
fabric.Image.fromURL(rv, function(img) {
// 设置背景图对象的宽度和高度与 canvas 相同
img.scaleToWidth(canvas.width);
@@ -510,6 +667,9 @@ export default defineComponent({
submitLiquefaction,
setLiquefaction,
routesChange,
brushList,
brushworkValue,
brushworkChange,
};
},
data() {
@@ -523,6 +683,7 @@ export default defineComponent({
});
</script>
<style lang="less">
.generalMiniCanvas{
position: relative;
height: 100%;
@@ -566,6 +727,13 @@ export default defineComponent({
display: flex;
margin-right: 3rem;
align-items: center;
&.brushwork{
img{
width: 100%;
max-height: 100%;
object-fit: contain;
}
}
span{
margin-right: 1rem;
}
@@ -644,6 +812,12 @@ export default defineComponent({
&.cursorNone:hover{
cursor: none;
}
&.cursorMove:hover{
cursor: move;
canvas{
cursor: move !important;
}
}
.editFrontBack_pencilbtn{
position: absolute;
z-index: 1;