样式适配
This commit is contained in:
X1627315083
@@ -1,843 +1,142 @@
|
||||
<template>
|
||||
<div class="generalMiniCanvas">
|
||||
<div class="addDetails_canvasCenter">
|
||||
<div class="generalMiniCanvas_input generalMiniCanvas_item" :class="{spread:spreadState}">
|
||||
<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 class="generalMiniCanvas_input_item" v-show="(canvasState != 'move' && canvasState != 'liquidation' && canvasState != 'movePosition' && canvasState != 'zoomIn' && canvasState != 'zoomOut' && brushworkValue != 'RibbonBrush' && brushworkValue != 'LongfurBrush')">
|
||||
<span>{{ $t('exportModel.Size') }}</span>
|
||||
<input type="range" @input="setPencilWidth" min="1" max="50" v-model="canvasPencilWidth[canvasState]">
|
||||
</div>
|
||||
<div class="generalMiniCanvas_input_item" v-show="canvasState == 'liquidation'">
|
||||
<span>{{ $t('exportModel.Size') }}</span>{{ canvasPencilWidth.routes }}
|
||||
<input type="range" @change="routesChange('routes')" min="1" max="100" v-model="canvasPencilWidth.routes">
|
||||
</div>
|
||||
<div class="generalMiniCanvas_input_item" v-show="canvasState == 'liquidation'">
|
||||
<span>{{ $t('exportModel.density') }}</span>
|
||||
<input type="range" @change="routesChange('density')" min="1" max="100" v-model="canvasPencilWidth.density">
|
||||
</div>
|
||||
<div class="generalMiniCanvas_input_item" v-show=" canvasState == 'pencil'">
|
||||
<span>{{ $t('exportModel.Color') }}</span>
|
||||
<input type="color" @input="setPencilColor" v-model="canvasPencilColor">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="exportCanvasBox_center_data">
|
||||
<div class="generalMiniCanvas_btn generalMiniCanvas_item" :class="{spread:spreadState}">
|
||||
<!-- <div @click="setOperation('')" class="generalMiniCanvas_btn_item">
|
||||
<div>新增</div>
|
||||
</div> -->
|
||||
<i class="icon iconfont icon-chehui" @click="canvasGeneral.historyState('')"></i>
|
||||
<i class="icon iconfont icon-fanchehui" @click="canvasGeneral.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">
|
||||
<div class="exportCanvasBox_center">
|
||||
|
||||
</div>
|
||||
<!-- <div v-show="arrows.show" class="moveDom" :style="arrows.domStyle"></div>
|
||||
<div v-show="arrows.show" class="jiantouDom" :style="arrows.jiantouStyle"> </div> -->
|
||||
<div class="editFrontBack_pencilbtn" v-show="loadingShow" :style="pencilbtnStyle"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="generalCanvas">
|
||||
<div class="canvasBox" ref="canvasBox">
|
||||
<editCanvas v-if="canvasLoad" :config="canvasConfig" :clothingImageUrl="imgUrl" ref="editCanvas"></editCanvas>
|
||||
</div>
|
||||
<div class="exportCanvasBox_submit" @click="setSubmit(false)">
|
||||
<div class="started_btn">
|
||||
{{ $t('addDetails.submit') }}
|
||||
</div>
|
||||
<div class="mark_loading" v-show="isShowMark">
|
||||
<a-spin size="large" />
|
||||
</div>
|
||||
<liquefaction ref="liquefaction" @submitLiquefaction="submitLiquefaction"></liquefaction>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { defineComponent, ref, reactive, watch, onMounted, onBeforeUnmount, nextTick, toRefs } from "vue";
|
||||
import creditsDetail from "@/component/Pay/creditsDetail.vue";
|
||||
import { exportSele,JSRectUpdata,JSchangeType,JScanvasMouseDown,JSSetRemoveImage,JScreateCheck,JSSetTexture } from "@/tool/canvasDrawing";
|
||||
import {defineComponent, toRefs, provide, h, ref, nextTick, onBeforeUnmount, reactive, onMounted,
|
||||
} from "vue";
|
||||
import {message} from 'ant-design-vue'
|
||||
import { Https } from "@/tool/https";
|
||||
import { useStore } from "vuex";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import canvasGeneral from "@/tool/canvasGeneral";
|
||||
import { getMousePosition } from "@/tool/mdEvent";
|
||||
import liquefaction from "@/component/modules/liquefaction.vue";
|
||||
import canvasGeneral from "@/tool/canvasGeneralCopy";
|
||||
import editCanvas from "@/component/Canvas/CanvasEditor/index.vue";
|
||||
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
creditsDetail,
|
||||
liquefaction
|
||||
editCanvas,
|
||||
},
|
||||
emits: ['submitBase64Data'],
|
||||
props: {
|
||||
imgUrl: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
props:{
|
||||
imgUrl:{
|
||||
type:String,
|
||||
default:''
|
||||
}
|
||||
},
|
||||
// watch: {
|
||||
// // imgUrl: function(newVal, oldVal) {
|
||||
// // console.log(newVal);
|
||||
// // // 当propertyName数据发生变化时，执行相应的操作
|
||||
// // }
|
||||
// imgUrl(newVal, oldVal) {
|
||||
// console.log(`imgUrl changed from ${oldVal} to ${newVal}`);
|
||||
// },
|
||||
// },
|
||||
emits:['submitBase64Data'],
|
||||
setup(props,{emit}) {
|
||||
let presentState = ref('paypal');
|
||||
let showPayOrder = ref(false);
|
||||
let loadingShow = ref(false);
|
||||
let { t } = useI18n();
|
||||
let canvas = reactive({});
|
||||
let scale = 2;
|
||||
let ratio = [1,1]
|
||||
let exportWH = 512
|
||||
let pencilbtnStyle = ref({
|
||||
background:'',
|
||||
width:0+'px',
|
||||
height:0+'px',
|
||||
display:'none',
|
||||
left:0+'px',
|
||||
top:0+'px',
|
||||
const { t } = useI18n();
|
||||
const store = useStore();
|
||||
const isShowMark = ref(false)
|
||||
const component = reactive({
|
||||
})
|
||||
let canvasBtn = reactive({
|
||||
canvasState:'move',
|
||||
canvasPencilWidth:{
|
||||
pencil:20,
|
||||
eraser:20,
|
||||
routes:30,
|
||||
density:30,
|
||||
const data = reactive({
|
||||
canvasLoad:false,
|
||||
canvasConfig:{
|
||||
|
||||
},
|
||||
canvasPencilColor:'#000000',
|
||||
spreadState:false,
|
||||
})
|
||||
let canvasWH = ref(0);
|
||||
let arrows = ref({
|
||||
show:false,
|
||||
domStyle:{
|
||||
left:0,
|
||||
top:0,
|
||||
width:0,
|
||||
height:0,
|
||||
},
|
||||
jiantouStyle:{
|
||||
height:'1px',
|
||||
transform:`translateY(-100%) rotate(${90}deg)`,
|
||||
}
|
||||
})
|
||||
watch(
|
||||
() => props.imgUrl,
|
||||
(newValue, oldValue) => {
|
||||
init()
|
||||
const dataDom = reactive({
|
||||
editCanvas:null,
|
||||
canvasBox:null,
|
||||
})
|
||||
const openSetData = ()=>{
|
||||
data.canvasLoad = true
|
||||
}
|
||||
const addImage = (value)=>{
|
||||
console.log(value)
|
||||
dataDom.editCanvas.addImageToLayer(value.imgUrl)
|
||||
}
|
||||
const addBottomImage = (value)=>{
|
||||
dataDom.editCanvas.changeFixedImage(value)
|
||||
}
|
||||
const getData = async ()=>{
|
||||
|
||||
onMounted(()=>{
|
||||
init()
|
||||
})
|
||||
onBeforeUnmount(()=>{
|
||||
canvasGeneral.canvasClear()
|
||||
})
|
||||
let reverseCanvasState = ref([])//存放canvas操作
|
||||
let normalCanvasState = ref([])//存放canvas操作
|
||||
let canvasState = ref()//存放canvas操作
|
||||
let keyDown = []//监听键盘的 keydown 和 keyup 事件
|
||||
let isMovePostion = false
|
||||
let init = ()=>{
|
||||
normalCanvasState.value = []
|
||||
reverseCanvasState.value = []
|
||||
showPayOrder.value = true;
|
||||
ratio = [1,1]
|
||||
nextTick(()=>{
|
||||
let canvasBox = document.querySelector(".generalMiniCanvas .exportCanvasBox_center");
|
||||
document.removeEventListener('mousemove', mouseMove);
|
||||
document.removeEventListener('touchmove', touchmove);
|
||||
|
||||
let img = new Image();
|
||||
img.onload = async function(){
|
||||
loadingShow.value = true
|
||||
let height = canvasBox.offsetHeight;
|
||||
canvasWH.value = height
|
||||
// canvasBox.style.width = height+'px'
|
||||
let wScale = 1
|
||||
let hScale = 1
|
||||
if(img.width>img.height){
|
||||
hScale = img.height/img.width
|
||||
exportWH = img.width
|
||||
}else{
|
||||
wScale = img.width/img.height
|
||||
exportWH = img.height
|
||||
}
|
||||
ratio = [wScale,hScale]
|
||||
canvas = canvasGeneral.canvasInit(canvasBox,{
|
||||
width:canvasWH.value * wScale,
|
||||
height:canvasWH.value * hScale,
|
||||
})
|
||||
canvas.selection = false;
|
||||
// canvas.set({
|
||||
// backgroundColor: 'lightblue'
|
||||
// });
|
||||
scale = img.height/canvas.height
|
||||
pencilbtnStyle.value.background = canvasBtn.canvasPencilColor
|
||||
|
||||
fabric.Object.prototype.cornerSize = 10
|
||||
fabric.Object.prototype.transparentCorners = false
|
||||
await fabric.Image.fromURL(props.imgUrl, async function(img) {
|
||||
// 设置背景图对象的宽度和高度与 canvas 相同
|
||||
img.scaleToWidth(canvas.width);
|
||||
img.scaleToHeight(canvas.height);
|
||||
img.set({
|
||||
scaleX: canvas.width / img.width,
|
||||
scaleY: canvas.height / img.height
|
||||
});
|
||||
// 将背景图添加到 canvas 的底层
|
||||
await canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas));
|
||||
if(!fabric.Object.prototype.controls.deleteControl){
|
||||
JSSetRemoveImage(deleteObj)
|
||||
}else{
|
||||
fabric.Object.prototype.controls.deleteControl.mouseUpHandler = deleteObj
|
||||
}
|
||||
setPencilWidth()
|
||||
canvasGeneral.updateCanvasState()
|
||||
},{ crossOrigin: "Anonymous" });
|
||||
// 鼠标抬起事件
|
||||
canvas.on('mouse:up', function(event) {
|
||||
if(isMovePostion)isMovePostion = false
|
||||
// if(canvasBtn.canvasState != 'move')canvasGeneral.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
|
||||
canvas.zoomToPoint(
|
||||
{ // 关键点
|
||||
x: opt.e.offsetX,
|
||||
y: opt.e.offsetY
|
||||
},
|
||||
zoom
|
||||
)
|
||||
opt.e.preventDefault()
|
||||
opt.e.stopPropagation()
|
||||
upDataPencilWidth(zoom)
|
||||
})
|
||||
canvas.on("mouse:move", event=>setCanvasMove(event));
|
||||
|
||||
//画布上移动
|
||||
document.addEventListener('mousemove', mouseMove);
|
||||
document.addEventListener('touchmove', touchmove);
|
||||
setOperation('pencil')
|
||||
img.remove()
|
||||
}
|
||||
const getCanvasData = ()=>{
|
||||
|
||||
return canvasExport
|
||||
}
|
||||
onMounted(() => {
|
||||
if(props.imgUrl){
|
||||
let img = new Image()
|
||||
img.onload = ()=>{
|
||||
let domHeight = dataDom.canvasBox.offsetHeight
|
||||
let imgHeight = img.height
|
||||
data.canvasConfig.height = domHeight
|
||||
data.canvasConfig.width = imgHeight/domHeight * img.width
|
||||
// canvasWH.value = height
|
||||
// // canvasBox.style.width = height+'px'
|
||||
// let wScale = 1
|
||||
// let hScale = 1
|
||||
// if(img.width>img.height){
|
||||
// hScale = img.height/img.width
|
||||
// exportWH = img.width
|
||||
// }else{
|
||||
// wScale = img.width/img.height
|
||||
// exportWH = img.height
|
||||
// }
|
||||
// ratio = [wScale,hScale]
|
||||
// canvas = canvasGeneral.canvasInit(canvasBox,{
|
||||
// width:canvasWH.value * wScale,
|
||||
// height:canvasWH.value * hScale,
|
||||
// })
|
||||
// canvas.selection = false;
|
||||
// dataDom.editCanvas.addImageToLayer(img)
|
||||
data.canvasLoad = true
|
||||
}
|
||||
img.src = props.imgUrl
|
||||
|
||||
})
|
||||
}
|
||||
let clearCanvas = ()=>{
|
||||
canvasBtn.canvasState = 'move'
|
||||
canvasBtn.spreadState = false
|
||||
canvasGeneral.canvasClear()
|
||||
}
|
||||
let mouseMove = (event)=>{
|
||||
let e = getMousePosition(event,false)
|
||||
setDomMove(e)
|
||||
}
|
||||
let touchmove = (event)=>{
|
||||
let e = getMousePosition(event,true)
|
||||
setDomMove(e)
|
||||
}
|
||||
let setDomMove = (event)=>{
|
||||
if(canvas.isDrawingMode){
|
||||
canvas.setCursor('none');
|
||||
}
|
||||
let canvasCenterBox = document.querySelector(".generalMiniCanvas .exportCanvasBox_center_box");
|
||||
if(!canvasCenterBox)return
|
||||
let parentX = event.clientX - canvasCenterBox.getBoundingClientRect().left
|
||||
let parentY = event.clientY - canvasCenterBox.getBoundingClientRect().top
|
||||
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.pointer.x;
|
||||
lastPosY = event.pointer.y;
|
||||
return
|
||||
}
|
||||
if(canvasBtn.canvasState == 'zoomIn' || canvasBtn.canvasState == 'zoomOut'){
|
||||
setCanvasZoom(event)
|
||||
return
|
||||
}
|
||||
}
|
||||
let setCanvasPosition = (event)=>{
|
||||
const e = event;
|
||||
const vpt = canvas.viewportTransform;
|
||||
|
||||
vpt[4] += e.pointer.x - lastPosX; // 更新水平偏移
|
||||
vpt[5] += e.pointer.y - lastPosY; // 更新垂直偏移
|
||||
|
||||
canvas.requestRenderAll(); // 请求重绘画布
|
||||
lastPosX = e.pointer.x;
|
||||
lastPosY = e.pointer.y;
|
||||
}
|
||||
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.pointer.x,
|
||||
y: opt.pointer.y
|
||||
},
|
||||
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`
|
||||
canvasCenterBox.className = 'exportCanvasBox_center_box'
|
||||
}else if(str == 'pencil'){
|
||||
setPencil()
|
||||
pencilbtnStyle.value.display = `block`
|
||||
canvasCenterBox.className = 'exportCanvasBox_center_box cursorNone'
|
||||
}else if(str == 'eraser'){
|
||||
setEraser()
|
||||
pencilbtnStyle.value.display = `block`
|
||||
canvasCenterBox.className = 'exportCanvasBox_center_box cursorNone'
|
||||
}else if(str == 'liquidation'){
|
||||
canvas.isDrawingMode = false
|
||||
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//开启绘画模式
|
||||
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]);
|
||||
|
||||
pencilbtnStyle.value.background = canvasBtn.canvasPencilColor
|
||||
canvas.freeDrawingBrush.isEraser = false
|
||||
setPencilWidth()
|
||||
pencilColor()
|
||||
}
|
||||
let setEraser = ()=>{
|
||||
canvas.isDrawingMode = true
|
||||
let eraser = new fabric.EraserBrush(canvas)
|
||||
canvas.freeDrawingBrush = eraser
|
||||
canvas.requestRenderAll();
|
||||
canvas.freeDrawingBrush.isEraser = true
|
||||
pencilbtnStyle.value.background = `rgb(255,255,255)`
|
||||
canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState]);
|
||||
setPencilWidth()
|
||||
}
|
||||
let upDataPencilWidth = (zoom)=>{
|
||||
if(canvasBtn.canvasPencilWidth[canvasBtn?.canvasState]){
|
||||
canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState]) / zoom;
|
||||
}
|
||||
}
|
||||
let deleteObj = ()=> {
|
||||
// if(!canvas.getActiveObjects()){
|
||||
// return
|
||||
// }
|
||||
let target = canvas.getActiveObjects()
|
||||
target.forEach((item)=>{
|
||||
canvas.fxRemove(item, {
|
||||
onComplete(){
|
||||
canvas.discardActiveObject(); // 丢弃当前选中的对象
|
||||
canvas.renderAll(); // 重新渲染 Canvas
|
||||
}
|
||||
})
|
||||
canvas.FX_DURATION = 300
|
||||
})
|
||||
}
|
||||
let setTimeOut = {
|
||||
pencilWidth:null,
|
||||
color:null,
|
||||
}
|
||||
let setPencilWidth = ()=>{//切换颜色给铅笔设置颜色
|
||||
clearTimeout(setTimeOut.pencilWidth)
|
||||
setTimeOut.pencilWidth = setTimeout(()=>{
|
||||
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;
|
||||
pencilbtnStyle.value.height = 1+'px'
|
||||
pencilbtnStyle.value.width = 1+'px'
|
||||
}
|
||||
},300)
|
||||
}
|
||||
let setPencilColor = ()=>{//切换颜色给铅笔设置颜色
|
||||
clearTimeout(setTimeOut.color)
|
||||
// clearTimeout(setTimeOut.colorHistory)
|
||||
setTimeOut.color = setTimeout(()=>{
|
||||
pencilColor()
|
||||
},200)
|
||||
// setTimeOut.colorHistory = setTimeout(()=>{
|
||||
// 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
|
||||
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
|
||||
}
|
||||
data.canvasLoad = true
|
||||
}
|
||||
}
|
||||
let routesChange = (str)=>{
|
||||
canvasBtn.canvasPencilWidth[str] = Math.round(canvasBtn.canvasPencilWidth[str]/10)*10;
|
||||
if (canvasBtn.canvasPencilWidth[str] < 10) {
|
||||
canvasBtn.canvasPencilWidth[str] = 10; // 设置为最小值
|
||||
} else if (canvasBtn.canvasPencilWidth[str] > 100) {
|
||||
canvasBtn.canvasPencilWidth[str] = 100; // 设置为最大值
|
||||
}
|
||||
}
|
||||
let setSubmit = (liquefation)=>{
|
||||
return new Promise((resolve,reject)=>{
|
||||
var allObjects = canvas.getObjects();
|
||||
// return
|
||||
// if(allObjects.length == 0){
|
||||
// return message.info(t('addDetails.jsContent1'))
|
||||
// }
|
||||
var canvasDom = document.createElement("canvas");
|
||||
let exportCanvas = new fabric.Canvas(canvasDom, {
|
||||
backgroundColor: "#FFFFFF",
|
||||
width: exportWH * ratio[0],
|
||||
height: exportWH * ratio[1],
|
||||
isDrawingMode: false, // 开启绘图模式
|
||||
});
|
||||
canvas.backgroundImage.clone(async (back)=>{
|
||||
back.set({
|
||||
scaleX:1,
|
||||
scaleY:1,
|
||||
left:back.left*scale,
|
||||
top:back.top*scale ,
|
||||
})
|
||||
exportCanvas.backgroundImage = back
|
||||
await new Promise((resolve, reject) => {
|
||||
if(allObjects.length == 0)resolve('')
|
||||
allObjects.forEach((item,index)=>{
|
||||
// let obj = fabric.util.object.clone(item);
|
||||
if(item.type == 'circle')return
|
||||
let obj
|
||||
item.clone((cloned)=>{
|
||||
console.log(cloned);
|
||||
obj = cloned
|
||||
console.log(obj.set);
|
||||
if(obj.set){
|
||||
obj.set(
|
||||
{
|
||||
scaleX:(item.scaleX?item.scaleX:1)*scale,
|
||||
scaleY:(item.scaleY?item.scaleY:1)*scale,
|
||||
left:item.left*scale,
|
||||
top:item.top*scale,
|
||||
}
|
||||
)
|
||||
}
|
||||
// else{
|
||||
// console.log(item.width,scale);
|
||||
|
||||
// obj.width = (item.width?item.width:1)*scale
|
||||
// obj.height = (item.height?item.height:1)*scale
|
||||
// obj.left = item.left*scale
|
||||
// obj.top = item.top*scale
|
||||
|
||||
// }
|
||||
exportCanvas.add(obj)
|
||||
if(index == allObjects.length - 1){
|
||||
resolve('')
|
||||
}
|
||||
})
|
||||
|
||||
})
|
||||
})
|
||||
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)
|
||||
}
|
||||
cancelDsign()
|
||||
clearCanvas()
|
||||
emit('submitBase64Data',data)
|
||||
resolve('')
|
||||
})
|
||||
})
|
||||
|
||||
}
|
||||
let cancelDsign = ()=>{
|
||||
showPayOrder.value = false
|
||||
}
|
||||
let liquefactionData = ref(null)
|
||||
let liquefaction = ref(null)
|
||||
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);
|
||||
img.scaleToHeight(canvas.height);
|
||||
img.set({
|
||||
scaleX: canvas.width / img.width,
|
||||
scaleY: canvas.height / img.height
|
||||
});
|
||||
// 将背景图添加到 canvas 的底层
|
||||
canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas));
|
||||
if(!fabric.Object.prototype.controls.deleteControl){
|
||||
JSSetRemoveImage(deleteObj)
|
||||
}else{
|
||||
fabric.Object.prototype.controls.deleteControl.mouseUpHandler = deleteObj
|
||||
}
|
||||
setPencilWidth()
|
||||
canvasGeneral.updateCanvasState()
|
||||
},{ crossOrigin: "Anonymous" });
|
||||
}
|
||||
let setLiquefaction =async ()=>{
|
||||
// const activeObjects = canvas.backgroundImage // 获取选中的对象
|
||||
// console.log(setSubmit(true));
|
||||
let activeObjects = await setSubmit(true)
|
||||
if (activeObjects) {
|
||||
liquefactionData.value = activeObjects
|
||||
liquefaction.value.init(activeObjects)
|
||||
} else {
|
||||
// message.info(useI18.t('exportModel.jsContent6'))
|
||||
return null;
|
||||
}
|
||||
}
|
||||
});
|
||||
onBeforeUnmount(()=>{
|
||||
data.canvasLoad = false
|
||||
// canvasGeneral.canvasClear()
|
||||
})
|
||||
return {
|
||||
presentState,
|
||||
showPayOrder,
|
||||
loadingShow,
|
||||
t,
|
||||
pencilbtnStyle,
|
||||
...toRefs(canvasBtn),
|
||||
arrows,
|
||||
|
||||
liquefactionData,
|
||||
liquefaction,
|
||||
init,
|
||||
setOperation,
|
||||
setPencilWidth,
|
||||
setPencilColor,
|
||||
setSubmit,
|
||||
cancelDsign,
|
||||
submitLiquefaction,
|
||||
setLiquefaction,
|
||||
routesChange,
|
||||
brushList,
|
||||
brushworkValue,
|
||||
brushworkChange,
|
||||
canvasGeneral,
|
||||
...toRefs(data),
|
||||
...toRefs(dataDom),
|
||||
isShowMark,
|
||||
addImage,
|
||||
getData,
|
||||
getCanvasData,
|
||||
};
|
||||
},
|
||||
data() {
|
||||
data(prop) {
|
||||
return {
|
||||
};
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
},
|
||||
watch: {
|
||||
|
||||
},
|
||||
mounted() {},
|
||||
|
||||
methods: {
|
||||
|
||||
},
|
||||
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less">
|
||||
|
||||
.generalMiniCanvas{
|
||||
position: relative;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
<style lang="less" scoped>
|
||||
.generalCanvas{
|
||||
width: 100%;
|
||||
// flex-direction: column;
|
||||
margin: 0 auto;
|
||||
flex-direction: row;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
.generalMiniCanvas_item{
|
||||
// position: relative;
|
||||
background: #fff;
|
||||
position: absolute;
|
||||
|
||||
display: flex;
|
||||
// border: 0.2rem solid #c4c4c4;
|
||||
width: 25rem;
|
||||
border-radius: 4px; /* 设置圆角半径 */
|
||||
flex-wrap: wrap;
|
||||
.generalMiniCanvas_btn_item{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 1rem 0;
|
||||
}
|
||||
}
|
||||
.generalMiniCanvas_input,.generalMiniCanvas_btn{
|
||||
z-index: 2;
|
||||
padding: 1rem 1.5rem;
|
||||
position: relative;
|
||||
width: auto;
|
||||
flex-wrap: nowrap;
|
||||
flex-direction: column;
|
||||
}
|
||||
.generalMiniCanvas_input{
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin-left: 7rem;
|
||||
height: 6rem;
|
||||
.generalMiniCanvas_input_item{
|
||||
display: flex;
|
||||
margin-right: 3rem;
|
||||
align-items: center;
|
||||
&.brushwork{
|
||||
img{
|
||||
width: 100%;
|
||||
max-height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
span{
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
.generalMiniCanvas_input_item:last-child{
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
.generalMiniCanvas_btn{
|
||||
|
||||
input{
|
||||
// width: 100%;
|
||||
width: 30rem;
|
||||
// margin-top: 1rem;
|
||||
flex: 1;
|
||||
}
|
||||
.icon-xiala{
|
||||
position: absolute;
|
||||
width: 2rem;
|
||||
bottom: 0;
|
||||
transform: translate(-50%, 90%);
|
||||
left: 50%;
|
||||
width: 6rem;
|
||||
background: #fff;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
&.icon-xiala::before{
|
||||
transition: all .3s;
|
||||
}
|
||||
&.btnRotate::before{
|
||||
transform: rotate(180deg);
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
i{
|
||||
font-size: 2.5rem;
|
||||
cursor: pointer;
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
&.active{
|
||||
border: 1px solid;
|
||||
border-radius: .4rem;
|
||||
}
|
||||
}
|
||||
&.spread{
|
||||
transform: translate(-50%,0);
|
||||
}
|
||||
}
|
||||
.addDetails_canvasCenter{
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
// flex-direction: column;
|
||||
// flex-direction: row;
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
flex-direction: column;
|
||||
}
|
||||
.exportCanvasBox_center_data{
|
||||
flex: 1;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
.exportCanvasBox_center_box{
|
||||
padding: 3rem;
|
||||
height: 100%;
|
||||
padding-top: 4rem;
|
||||
> .canvasBox{
|
||||
flex: 1;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
background: #e6e6e6;
|
||||
cursor: inherit;
|
||||
&.cursorNone:hover{
|
||||
cursor: none;
|
||||
}
|
||||
&.cursorMove:hover{
|
||||
cursor: move;
|
||||
canvas{
|
||||
cursor: move !important;
|
||||
}
|
||||
}
|
||||
.editFrontBack_pencilbtn{
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
border-radius: 50%;
|
||||
border: 1px solid #000;
|
||||
pointer-events: none;
|
||||
transform: translate(-50%,-50%);
|
||||
}
|
||||
}
|
||||
.exportCanvasBox_center{
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: #e6e6e6;
|
||||
// overflow: scroll;
|
||||
.canvas-container{
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
}
|
||||
.editFrontBack_pencilbtn{
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
border-radius: 50%;
|
||||
border: 1px solid #000;
|
||||
pointer-events: none;
|
||||
transform: translate(-50%,-50%);
|
||||
}
|
||||
}
|
||||
.exportCanvasBox_center:hover{
|
||||
.generalMiniCanvas_btn{
|
||||
// transform: translate(-50%,-101%);
|
||||
// &.spread{
|
||||
// transform: translate(-50%,0);
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
.exportCanvasBox_submit{
|
||||
margin-top: auto;
|
||||
margin-left: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user