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-27 16:31:33 +08:00
parent e26d57dd76
commit 21b0af1365
32 changed files with 423 additions and 885 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/component/Detail/DesignElementsMobile.vue
View File

@@ -452,8 +452,6 @@ export default defineComponent({
if(sketch.offsetHeight < item.location[1]/sketchNum){
top = sketch.offsetHeight +'px'
}
console.log(sketch.offsetWidth,this.sketch.width.replace(/rem/g,''));
this.printStyleList[index]={
centers:{
left:0,

469
src/component/Detail/addDetails.vue
View File

@@ -1,7 +1,7 @@
<template>
<a-modal
class="addDetails_modal generalModel"
v-model:visible="showPayOrder"
v-model:visible="addDetails"
:footer="null"
width="50%"
:maskClosable="false"
@@ -21,350 +21,40 @@
<div>{{ $t('addDetails.AddDetails') }}</div>
<div class="modal_title_text_intro"></div>
</div>
<div class="addDetails_canvasCenter">
<div class="addDetails_center_btn addDetails_center_item" :class="{spread:spreadState}">
<!-- <div @click="setOperation('')" class="addDetails_center_btn_item">
<div>新增</div>
</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('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>
<input type="range" v-show="canvasState != 'move'" @input="setPencilWidth" min="1" max="50" v-model="canvasPencilWidth[canvasState]">
<!-- <div class="icon iconfont icon-xiala" :class="{btnRotate:spreadState}" @click="()=>spreadState = !spreadState"></div> -->
</div>
<div class="exportCanvasBox_center_box">
<div class="exportCanvasBox_center">
<!-- <div class="editFrontBack_bgImg" v-show="loadingShow">
<img :src="imgData?.undividedLayer" alt="">
</div> -->
</div>
<div class="editFrontBack_pencilbtn" v-show="loadingShow" :style="pencilbtnStyle"></div>
</div>
</div>
<div class="exportCanvasBox_submit" @click="setSubmit">
<div class="started_btn">
{{ $t('addDetails.submit') }}
</div>
</div>
<generalMiniCanvas :imgUrl="imgUrl" @submitBase64Data="submitBase64Data"></generalMiniCanvas>
</div>
<div></div>
</a-modal>
<!-- <div class="mark_loading" v-show="loadingShow">
<a-spin size="large" />
</div> -->
</template>
<script>
import { defineComponent, ref, reactive, watch, onMounted, nextTick, toRefs } from "vue";
import { Https } from "@/tool/https";
import { formatTime } from "@/tool/util";
import { setCookie, getCookie } from "@/tool/cookie";
import { Modal, message } from "ant-design-vue";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import allOrder from "@/component/Pay/allOrder.vue";
import creditsDetail from "@/component/Pay/creditsDetail.vue";
import { exportSele,JSRectUpdata,JSchangeType,JScanvasMouseDown,JSSetRemoveImage,JScreateCheck,JSSetTexture } from "@/tool/canvasDrawing";
import { useI18n } from "vue-i18n";
import { getMousePosition } from "@/tool/mdEvent";
import generalMiniCanvas from "../modules/generalMiniCanvas.vue";
export default defineComponent({
components: {
creditsDetail,
allOrder,
generalMiniCanvas,
},
emits: ['setSloganData'],
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',
})
let canvasBtn = reactive({
canvasState:'move',
canvasPencilWidth:{
pencil:4,
eraser:4,
},
spreadState:false,
})
let canvasWH = ref(0);
onMounted(()=>{
})
let exportUrl = ''
let reverseCanvasState = ref([])//存放canvas操作
let normalCanvasState = ref([])//存放canvas操作
let canvasState = ref()//存放canvas操作
let keyDown = []//监听键盘的 keydown 和 keyup 事件
let addDetail = reactive({
imgUrl:''
});
let addDetails = ref(false);
let init = (data,index)=>{
normalCanvasState.value = []
reverseCanvasState.value = []
showPayOrder.value = true;
ratio = [1,1]
exportWH = 512
nextTick(()=>{
let canvasBox = document.querySelector(".addDetails_modal .exportCanvasBox_center");
document.removeEventListener('mousemove', mouseMove);
document.removeEventListener('touchmove', touchmove);
let img = new Image();
img.onload = 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,
})
scale = img.height/canvas.height
pencilbtnStyle.value.background = rgba
fabric.Object.prototype.cornerSize = 10
fabric.Object.prototype.transparentCorners = false
exportUrl = data.path
fabric.Image.fromURL(data.path, 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()
updateCanvasState()
},{ crossOrigin: "Anonymous" });
// 鼠标抬起事件
canvas.on('mouse:up', function(event) {
if(canvasBtn.canvasState != 'move'){
updateCanvasState('mouseUp')
}
});
//画布上移动
document.addEventListener('mousemove', mouseMove);
document.addEventListener('touchmove', touchmove);
setOperation('pencil')
img.remove()
}
img.src = data.path
})
addDetails.value = true
addDetail.imgUrl = data.path
}
let canvasKeyDown = (event) => {
if(keyDown.indexOf(event.key)>-1){
}else{
keyDown.push(event.code)
if(keyDown.indexOf('ControlLeft') > -1 && keyDown.indexOf('KeyZ') > -1 && keyDown.indexOf('ShiftLeft') > -1){
historyState('reverse')
}else if(keyDown.indexOf('ControlLeft') > -1 && keyDown.indexOf('KeyZ') > -1){
historyState('')
}
}
}
let canvasKeyUp = (event) =>{
keyDown = keyDown.filter(function(item) {
return event.code !== item;
})
}
let clearCanvas = ()=>{
canvasBtn.canvasState = 'move'
canvasBtn.spreadState = false
document.removeEventListener("keydown", canvasKeyDown);
document.removeEventListener("keyup", canvasKeyUp);
}
let rgba = 'rgba(0, 0, 0, 1)'
let mouseMove = (event)=>{
let e = getMousePosition(event,false)
setCanvasMove(e)
}
let touchmove = (event)=>{
let e = getMousePosition(event,true)
setCanvasMove(e)
}
let setCanvasMove = (event)=>{
if(canvas.isDrawingMode){
canvas.setCursor('none');
}
let canvasCenterBox = document.querySelector(".addDetails_modal .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 setOperation = (str)=>{
canvasBtn.canvasState = str
if(str == 'move'){
setMove()
pencilbtnStyle.value.display = `none`
}else if(str == 'pencil'){
setPencil()
pencilbtnStyle.value.display = `block`
}else if(str == 'eraser'){
setEraser()
pencilbtnStyle.value.display = `block`
}
}
let setMove = ()=>{
canvas.isDrawingMode = false
canvas.forEachObject((obj) =>obj.selectable = true);
}
let setPencil = ()=>{
canvas.isDrawingMode = true//开启绘画模式
canvas.freeDrawingBrush = new fabric.PencilBrush(canvas,{});
canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState]);
canvas.freeDrawingBrush.color = rgba
pencilbtnStyle.value.background = rgba
canvas.freeDrawingBrush.isEraser = false
setPencilWidth()
}
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 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 setTimeOutWidth
let setPencilWidth = ()=>{//切换颜色给铅笔设置颜色
clearTimeout(setTimeOutWidth)
setTimeOutWidth = setTimeout(()=>{
canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState])
pencilbtnStyle.value.height = canvasBtn.canvasPencilWidth[canvasBtn.canvasState]+'px'
pencilbtnStyle.value.width = canvasBtn.canvasPencilWidth[canvasBtn.canvasState]+'px'
},300)
}
let updateCanvasState = (str) =>{
if(str != 'mouseUp'){
}
const canvasAsJson = JSON.stringify(canvas.toJSON());
normalCanvasState.value.push(canvasAsJson);
}
//撤回
let historyState = (str)=> {
if(str == 'reverse' && reverseCanvasState.value.length > 0){//反撤回
let obj = reverseCanvasState.value.pop()
// canvasState.value = reverseCanvasState.value[reverseCanvasState.value.length-1]
canvasState.value = obj
normalCanvasState.value.push(obj);
}else if(str == '' && normalCanvasState.value.length > 1){
let obj = normalCanvasState.value.pop()
canvasState.value = normalCanvasState.value[normalCanvasState.value.length-1]
reverseCanvasState.value.push(obj);
}else{
return
}
canvas.loadFromJSON(canvasState.value, () => {});
}
let setSubmit = ()=>{
var allObjects = canvas.getObjects('path');
// if(allObjects.length == 0){
// return message.info(t('addDetails.jsContent1'))
// }
var canvasDom = document.createElement("canvas");
let exportCanvas = new fabric.Canvas(canvasDom, {
backgroundColor: "rgba(255, 255, 255,1)",
width: exportWH * ratio[0],
height: exportWH * ratio[1],
isDrawingMode: false, // 开启绘图模式
});
canvas.backgroundImage.clone((back)=>{
back.set({
scaleX:1,
scaleY:1,
left:back.left*scale,
top:back.top*scale ,
})
exportCanvas.backgroundImage = back
allObjects.forEach((item,index)=>{
// let obj = fabric.util.object.clone(item);
if(item.type == 'circle')return
let obj
item.clone((cloned)=>{
obj = cloned
})
obj.set(
{
scaleX:(item.scaleX?item.scaleX:1)*scale,
scaleY:(item.scaleY?item.scaleY:1)*scale,
left:item.left*scale,
top:item.top*scale,
}
)
exportCanvas.add(obj)
})
let data = exportCanvas.toDataURL('jpg')
cancelDsign()
clearCanvas()
emit('setSloganData',data)
})
let submitBase64Data = (data)=>{
emit('setSloganData',data)
cancelDsign()
}
let cancelDsign = ()=>{
document.removeEventListener('keydown',canvasKeyDown);
document.removeEventListener('keyup', canvasKeyUp);
showPayOrder.value = false
addDetails.value = false
}
return {
presentState,
showPayOrder,
loadingShow,
t,
pencilbtnStyle,
...toRefs(canvasBtn),
...toRefs(addDetail),
addDetails,
init,
setOperation,
setPencilWidth,
historyState,
setSubmit,
submitBase64Data,
cancelDsign,
};
},
@@ -385,135 +75,10 @@ export default defineComponent({
}
.addDetails_center{
position: relative;
// width: calc(512px / 2);
// width: 256px;
height: 100%;
display: flex;
flex-direction: column;
// height: calc(512px / 2);
margin: 0 auto;
.addDetails_center_item{
// position: relative;
background: #fff;
position: absolute;
display: flex;
border: 0.2rem solid #c4c4c4;
width: 25rem;
border-radius: 4px; /* 设置圆角半径 */
flex-wrap: wrap;
.addDetails_center_btn_item{
display: flex;
align-items: center;
padding: 1rem 0;
}
}
.addDetails_center_btn{
z-index: 2;
// left: 50%;
// transform: translate(-50%,-135%);
// transition: all .3s;
padding: 1rem 1.5rem;
// transform: translate(-50%,0);
position: relative;
width: 100%;
flex-direction: row;
input{
// width: 100%;
// 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;
position: relative;
margin: 0 auto;
}
.exportCanvasBox_center_box{
padding: 3rem;
height: 100%;
flex: 1;
position: relative;
width: 100%;
background: #e6e6e6;
&:hover{
cursor: none;
}
.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{
.addDetails_center_btn{
// transform: translate(-50%,-101%);
// &.spread{
// transform: translate(-50%,0);
// }
}
}
}
.exportCanvasBox_submit{
margin-top: 2.4rem;

69
src/component/Detail/editFrontBack.vue
View File

@@ -36,6 +36,7 @@ import creditsDetail from "@/component/Pay/creditsDetail.vue";
import { exportSele,JSRectUpdata,JSchangeType,JScanvasMouseDown,JSSetRemoveImage,JScreateCheck,JSSetTexture } from "@/tool/canvasDrawing";
import { getMousePosition } from "@/tool/mdEvent";
import { useI18n } from "vue-i18n";
import canvasGeneral from "@/tool/canvasGeneral";
export default defineComponent({
components: {
creditsDetail,
@@ -68,6 +69,7 @@ export default defineComponent({
if(newVal == -1) return
imgDomIndex = newVal
props.patchData.front.imageUrl= ''
clearTimeout(setTimeSubmit)
init(props.patchData.front[newVal],'')
})
let canvasBtn = reactive({
@@ -92,14 +94,12 @@ export default defineComponent({
imgData.value = data
nextTick(()=>{
let canvasBox = document.querySelector(".editFrontBack_center .exportCanvasBox_center");
var canvasDom = document.createElement("canvas");
document.addEventListener("keydown", canvasKeyDown);
document.addEventListener("keyup", canvasKeyUp);
document.removeEventListener('mousemove', mouseMove);
document.removeEventListener('touchmove', touchmove);
canvasBox.appendChild(canvasDom);
let img = new Image();
img.onload = function(){
img.onload = async function(){
loadingShow.value = true
let height = canvasBox.offsetHeight;
canvasWH.value = height
@@ -124,32 +124,36 @@ export default defineComponent({
fabric.Object.prototype.cornerSize = 10
fabric.Object.prototype.transparentCorners = false
exportUrl = data.maskUrl
fabric.Image.fromURL(data.maskUrl, function(img) {
// 设置背景图对象的宽度和高度与 canvas 相同
img.scaleToWidth(canvas.width);
img.scaleToHeight(canvas.height);;
img.set({
// width: canvas.width,
// height: canvas.height,
// scaleX:2,
// scaleY:1,
scaleX: canvas.width / img.width,
scaleY: canvas.height / img.height
});
// 将背景图添加到 canvas 的底层
// canvas.add(img);
canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas));
if(!fabric.Object.prototype.controls.deleteControl){
JSSetRemoveImage(deleteObj)
}else{
fabric.Object.prototype.controls.deleteControl.mouseUpHandler = deleteObj
}
setPencilWidth()
updateCanvasState()
},{ crossOrigin: "Anonymous" });
await new Promise((resolve, reject) => {
fabric.Image.fromURL(data.maskUrl, function(img) {
// 设置背景图对象的宽度和高度与 canvas 相同
img.scaleToWidth(canvas.width);
img.scaleToHeight(canvas.height);;
img.set({
// width: canvas.width,
// height: canvas.height,
// scaleX:2,
// scaleY:1,
scaleX: canvas.width / img.width,
scaleY: canvas.height / img.height
});
// 将背景图添加到 canvas 的底层
// canvas.add(img);
canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas));
if(!fabric.Object.prototype.controls.deleteControl){
JSSetRemoveImage(deleteObj)
}else{
fabric.Object.prototype.controls.deleteControl.mouseUpHandler = deleteObj
}
setPencilWidth()
updateCanvasState()
resolve('')
},{ crossOrigin: "Anonymous" });
})
// 鼠标抬起事件
canvas.on('mouse:up', function(event) {
if(canvasBtn.canvasState != 'move'){
if(canvasBtn.canvasState != 'move'){
updateCanvasState('mouseUp')
}
});
@@ -286,16 +290,16 @@ export default defineComponent({
}
let setTimeSubmit = null
let createSetTimeSubmit = ()=>{
clearTimeout(setTimeSubmit)
setTimeSubmit = setTimeout(()=>{
setSubmit()
},1000)
setSubmit()
}
let updateCanvasState = (str) =>{
if(str != 'mouseUp'){
// editFrontBackPencilbtn.value.style.display = 'none'
}else{
createSetTimeSubmit()
clearTimeout(setTimeSubmit)
setTimeSubmit = setTimeout(()=>{
createSetTimeSubmit()
},1000)
}
const canvasAsJson = JSON.stringify(canvas.toJSON());
normalCanvasState.value.push(canvasAsJson);
@@ -505,6 +509,7 @@ export default defineComponent({
height: 100%;
flex: 1;
position: relative;
overflow: hidden;
width: 100%;
background: #e6e6e6;
&:hover{