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

4
src/component/Account/account.vue
View File

@@ -1,8 +1,8 @@
<template>
<div class="account_page">
<div class="account_page_titleImg">
<!-- <div class="account_page_titleImg">
<img src="https://code-create.com.hk/wp-content/uploads/2022/12/about_banner-1.jpg" alt="">
</div>
</div> -->
<div class="account_page_content_box">
<div class="account_page_content">
<div class="account_page_content_left">

3
src/component/Account/accountFollowFans.vue
View File

@@ -130,6 +130,9 @@ export default defineComponent({
}
.account_followFans_body{
padding-bottom: 3rem;
:deep(.ant-badge){
font-size: var(--aida-fsize2);
}
:deep(.ant-tabs-nav){
padding: 0rem 5rem;
.ant-tabs-nav-wrap{

3
src/component/Account/accountMessage.vue
View File

@@ -193,6 +193,9 @@ export default defineComponent({
}
.account_message_body{
padding-bottom: 3rem;
:deep(.ant-badge){
font-size: var(--aida-fsize2);
}
:deep(.ant-tabs-nav){
padding: 0rem 5rem;
.ant-tabs-nav-wrap{

15
src/component/Account/followFans/fans.vue
View File

@@ -15,7 +15,7 @@
<img :src="item.avatar" alt="">
</div>
<div class="account_generalMessage_item_right_title">
<div class="">{{ item.senderUserName }}</div>
<div class="">{{ item.userName }}</div>
<div class="modal_title_text_intro">{{ item.createTime }}</div>
</div>
</div>
@@ -88,14 +88,15 @@ export default defineComponent({
}
let setFollow = (item:any) =>{
let url = Https.httpUrls.porfolioFollow
if(item.isFollow == 1)url = Https.httpUrls.porfolioCancelFollow
// if(item.isFollow == 1)url = Https.httpUrls.porfolioCancelFollow
Https.axiosGet(url, {params:{followeeId:item.senderId}})
.then((rv) => {
if(item.isFollow == 1){
item.isFollow = 0
}else{
item.isFollow = 1
}
searchFollowFansList()
// if(item.isFollow == 1){
// item.isFollow = 0
// }else{
// item.isFollow = 1
// }
})
}
let openOtherUsers = (item:any)=>{

18
src/component/Account/followFans/follow.vue
View File

@@ -16,7 +16,7 @@
<img :src="item.avatar" alt="">
</div>
<div class="account_generalMessage_item_right_title">
<div class="">{{ item.senderUserName }}</div>
<div class="">{{ item.userName }}</div>
<div class="modal_title_text_intro">{{ item.createTime }} </div>
</div>
</div>
@@ -88,15 +88,17 @@ export default defineComponent({
})
}
let setFollow = (item:any) =>{
let url = Https.httpUrls.porfolioFollow
if(item.isFollow == 1)url = Https.httpUrls.porfolioCancelFollow
// let url = Https.httpUrls.porfolioFollow
// if(item.isFollow == 1)url = Https.httpUrls.porfolioCancelFollow
let url = Https.httpUrls.porfolioCancelFollow
Https.axiosGet(url, {params:{followeeId:item.senderId}})
.then((rv) => {
if(item.isFollow == 1){
item.isFollow = 0
}else{
item.isFollow = 1
}
searchFollowFansList()
// if(item.isFollow == 1){
// item.isFollow = 0
// }else{
// item.isFollow = 1
// }
})
}
let openOtherUsers = (item:any)=>{

1
src/component/Administrator/questionnaire.vue
View File

@@ -134,7 +134,6 @@ export default defineComponent({
Https.axiosGet(Https.httpUrls.getAllQuestionnaire).then((res:any)=>{
if(res){
dataList.value = res
console.log(dataList);
// console.log(allEchartsList.value);
resolve('')

1
src/component/Administrator/recentActiveUser.vue
View File

@@ -273,7 +273,6 @@ export default defineComponent({
if (rv) {
// this.dataList = rv
filter.dataList = rv.records
console.log(rv);
filterData.total = rv.total
filter.tableLoading = false

3
src/component/Administrator/trialUserConversionRateChart.vue
View File

@@ -51,9 +51,6 @@ export default defineComponent({
let data: any = [];
for (let [key, value] of entries) {
let str
console.log(key);
if(key != 'conversionRate'){
if(key == 'trialToOfficialCount'){
str = 'Trial To Official'

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{

2
src/component/Events/eventsDetail.vue
View File

@@ -85,8 +85,6 @@ export default defineComponent({
Https.axiosGet(data.https).then(
(rv: any) => {
if(rv){
console.log(rv);
message.success(data.success)
filter.loadingShow[index] = false
}

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

@@ -47,7 +47,6 @@
class="exportCanvasBox_allItem"
v-for="(item,key) in allBoardData"
>
<div v-if="item[0] && key == 'disposeMoodboard'" class="exportCanvasBox_intro">Entirety Moodboard</div>
<div v-if="item[0] && key == 'printboardFiles'" class="exportCanvasBox_intro">Printboard</div>
<div v-if="item[0] && key == 'moodboardFiles'" class="exportCanvasBox_intro">Moodboard</div>
@@ -64,10 +63,9 @@
<div>{{colorItem.name}}</div>
</div>
</div>
</div>
<div
v-if="key != 'moodboardPosition'"
class="exportCanvasBox_item"
v-for="imgItem in item"
:class="[key == 'disposeMoodboard'?'exportCanvasBox_item_dispose':'',imgItem?.upScaleChecked?'active':'']"
@@ -83,27 +81,29 @@
</div>
</div>
<div class="exportCanvasBox_operation_bor_item exportCanvasBox_left_tool_item_column">
<label v-show="operation != 'move' && operation != 'eraser' && operation != 'texture'">
<div class="label_item" 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 class="labelHover_show exportCanvasBox_imgbor">
<div v-for="item in colorHistoryList" :style="{'background':item}" @click="setColorHistory(item)"></div>
</div>
</div>
<div class="label_item" 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>
<div class="label_item" 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>
<div class="label_item texture" v-show="operation == 'texture'">
<div >{{ $t('exportModel.Texture') }}:</div>
<a-select ref="select" class="label_select" size="small" v-model:value="textureValue"
style="flex: 1"
@@ -114,15 +114,15 @@
<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>
<div class="label_item" 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>
<div class="label_item" 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>
@@ -130,12 +130,12 @@
<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>
<!-- <div class="label_item" 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> -->
<div class="label_item" 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"
@@ -146,11 +146,11 @@
{{item.name}}
</a-select-option>
</a-select>
</label>
</div>
<!-- <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 class="exportCanvasBox_title" @click.stop="setCloseNav('move')">
{{ $t('exportModel.More') }}
@@ -1527,31 +1527,40 @@ export default defineComponent({
let setTimeOut = {
color:null,
width:null,
colorHistory:null,
}//给切换颜色设置防抖
let colorHistoryList = ref(['rgb(0, 0, 0)'])
let setColorHistory = (value)=>{
canvasPencilColor.value = value
pencilColor()
}
let pencilColor = ()=>{
if(createText.set){
setFontFamily()
return
}
// brushIndicator.fill = canvasPencilColor.value;
if(canvas.freeDrawingBrush.isEraser){
}else{
pencilbtnStyle.value.background = canvasPencilColor.value
}
if(brushworkValue.value == 'Marking'){
canvas.freeDrawingBrush.color = hexToRgba(canvasPencilColor.value,.5);
}else if(brushworkValue.value == 'InkBrush'){
canvas.freeDrawingBrush.color = hexToRgba(canvasPencilColor.value,.2);
}else{
canvas.freeDrawingBrush.color = hexToRgba(canvasPencilColor.value,1);
}
}
let setPencilColor = ()=>{//切换颜色给铅笔设置颜色
clearTimeout(setTimeOut.color)
clearTimeout(setTimeOut.colorHistory)
setTimeOut.color = setTimeout(()=>{
if(createText.set){
setFontFamily()
return
}
// brushIndicator.fill = canvasPencilColor.value;
if(canvas.freeDrawingBrush.isEraser){
}else{
pencilbtnStyle.value.background = canvasPencilColor.value
}
if(brushworkValue.value == 'Marking'){
canvas.freeDrawingBrush.color = hexToRgba(canvasPencilColor.value,.5);
}else if(brushworkValue.value == 'InkBrush'){
canvas.freeDrawingBrush.color = hexToRgba(canvasPencilColor.value,.2);
}else{
canvas.freeDrawingBrush.color = hexToRgba(canvasPencilColor.value,1);
}
},100)
pencilColor()
},200)
setTimeOut.colorHistory = setTimeout(()=>{
colorHistoryList.value.push(canvasPencilColor.value)
},1000)
}
let setPencilWidth = ()=>{//切换颜色给铅笔设置颜色
clearTimeout(setTimeOut.width)
@@ -1956,7 +1965,6 @@ export default defineComponent({
let submitLiquefaction = (rv)=>{
const originalWidth = liquefactionData.width * liquefactionData.scaleX; // 保存原始宽度
const originalHeight = liquefactionData.height * liquefactionData.scaleY; // 保存原始高度
console.log(liquefactionData);
liquefactionData.setSrc(rv, function() {
liquefactionData.scaleToWidth(originalWidth);
liquefactionData.scaleToHeight(originalHeight);
@@ -1971,7 +1979,6 @@ export default defineComponent({
liquefactionData = activeObjects[0]
liquefaction.value.init(activeObjects[0])
} else {
console.log('No object selected.');
message.info(useI18.t('exportModel.jsContent6'))
return null;
}
@@ -2031,6 +2038,8 @@ export default defineComponent({
canvasPencilWidth,//input选择宽度
setAllSelectWidth,//多选设置宽度
allSelectWidth,//多选设置宽度的值
colorHistoryList,//历史颜色
setColorHistory,//设置历史颜色
setPencilColor,//切换颜色执行函数 给当前矩形或者笔触设置颜色
setPencilWidth,//切换宽度执行函数 给当前矩形或者笔触设置宽度
setHDExport,//高清导出选择的图片
@@ -2192,7 +2201,7 @@ export default defineComponent({
.exportCanvasBox_left_tool{
margin: 0;
}
label {
.label_item,label {
display: flex;
align-items: center;
width: 23%;
@@ -2340,8 +2349,29 @@ export default defineComponent({
flex: 1;
margin-left: 8rem;
display: flex;
label{
.label_item{
margin-right: 2rem;
position: relative;
.labelHover_show{
position: absolute;
width: 100%;
height: 10rem;
top: 100%;
z-index: 2;
flex-wrap: wrap;
div{
width: 3rem;
height: 3rem;
margin-right: 1rem;
margin-bottom: 1rem;
cursor: pointer;
}
}
}
.label_item:hover{
.labelHover_show{
display: flex;
}
}
}
.exportCanvasBox_left_tool_item{

2
src/component/HomePage/Generate.vue
View File

@@ -114,7 +114,7 @@
</a-upload>
</i>
<div :title="$t('Generate.style')">
<generalMenu :dataList="printModelList" @setprintModel="setprintModel" :item="printModel"></generalMenu>
<generalMenu :dataList="printModelList" :isCanvas="type_.type2 == 'Sketchboard'" @setprintModel="setprintModel" :item="printModel"></generalMenu>
</div>
</div>
<textarea

4
src/component/HomePage/MoodboardUpload.vue
View File

@@ -440,7 +440,9 @@ export default defineComponent({
// let layout:any = isMoible() ? this.$refs.layoutMobile : this.$refs.layout
let layout:any = this.$refs.layout
if(this.layoutList.length <= 0){
// await this.layout()
let styleObj = this.store.state.UploadFilesModule.moodboardPosition
if(!styleObj.domStyle)await this.layout()
//
let arr = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.moodboard))
this.layoutList = arr
}

53
src/component/HomePage/collectionModal.vue
View File

@@ -66,6 +66,7 @@ import ColorboardUpload from '@/component/HomePage/ColorboardUpload.vue'
import SketchboardUpload from '@/component/HomePage/SketchboardUpload.vue'
import MarketingSketchUpload from '@/component/HomePage/MarketingSketchUpload.vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { rgbToHsv, dataURLtoBlob } from "@/tool/util";
import { Modal,message } from 'ant-design-vue';
import { Https } from "@/tool/https";
import {useStore} from 'vuex'
@@ -83,7 +84,13 @@ export default defineComponent({
SketchboardUpload,
MarketingSketchUpload
},
setup(){
props:{
getDesignData: {
type: Function,
required: true
}
},
setup(props){
const store = useStore()
let {t} = useI18n()
let driver__:any = computed(()=>{
@@ -285,9 +292,46 @@ export default defineComponent({
})
return bor
},
getPantongName() {
let colorBoards = this.store.state.UploadFilesModule.colorBoards;
let data: any = [];
for (let v of colorBoards) {
let color: any = [v.rgbValue.r, v.rgbValue.g, v.rgbValue.b];
let hsv = rgbToHsv(color);
v.hsv = hsv[0] + hsv[1] + hsv[2];
data.push({
h: hsv[0],
s: hsv[1],
v: hsv[2],
});
}
return new Promise((resolve: any, reject: any) => {
Https.axiosPost(Https.httpUrls.getRgbByHsvBatch, data)
.then((rv: any) => {
if (rv) {
rv.forEach((ele: any, index: number) => {
colorBoards[index].id = ele.id;
colorBoards[index].tcx = ele.tcx;
colorBoards[index].name = ele.name;
});
this.store.commit("setColorboardList", colorBoards);
resolve();
}
})
.catch((res) => {
reject();
});
});
},
//完成
async finishCollection(){
this.isShowMark = true
this.store.commit('clearAllId')
this.$emit('finishCollection')
await this.getPantongName()
this.store.commit("setAllBoardData");
let sketchList = this.store.state.UploadFilesModule.sketchboard
let arr:any = []
sketchList.forEach((item:any) => {
@@ -299,12 +343,14 @@ export default defineComponent({
}
arr.push(obj)
});
let data = {sketchBoards:arr}
// let data = {sketchBoards:arr}
let data = this.getDesignData(-1)
data.moodboardPosition = JSON.stringify(this.store.state.UploadFilesModule.moodboardPosition)
data.collectionId = this.store.state.HomeStoreModule.designCollectionId?this.store.state.HomeStoreModule.designCollectionId:null
if(!await this.isPinOpen(sketchList)){
this.isShowMark = false
return
}
let elList = document.querySelectorAll('.img_block_item_sketch img')
Https.axiosPost(Https.httpUrls.sketchBoardsBoundingBox, data)
.then((rv: any) => {
@@ -314,7 +360,6 @@ export default defineComponent({
GO.id = 0
this.showCollectionModal =false
this.collectionStep = 1
this.$emit('finishCollection')
if(this.driver__.driver){
driverObj__.moveNext()
}

17
src/component/HomePage/generalMenu.vue
View File

@@ -1,17 +1,21 @@
<template>
<div class="generalMenu_printModel">
<div @click.stop="openPrintModel" :class="driverClass.class1">
<a-popover>
<a-popover v-if="isCanvas">
<template #content>
<img style="width: 10rem;height: 10rem;object-fit: contain;" :src="item.img" alt="">
</template>
<span v-if="item.label">{{ item.label }}</span>
<span v-else>{{ item.name }}</span>
</a-popover>
<div v-else>
<span v-if="item.label">{{ item.label }}</span>
<span v-else>{{ item.name }}</span>
</div>
</div>
<ul :class="driverClass.class2" v-show="openClick">
<li v-for="item,index in dataList" :class="{active:deleteItem == index}" class="printModel_item" @click="setprintModel(item,index)">
<a-popover placement="right">
<a-popover placement="right" v-if="isCanvas">
<template #content>
<img v-if="item.img != -1" style="width: 10rem;height: 10rem;object-fit: contain;" :src="item.img" alt="">
<div v-else-if="item.img == -1" class="generalMenu_printModel_upload ">
@@ -37,7 +41,10 @@
<span v-if="item.label">{{ item.label }}</span>
<span v-else>{{ item.name }}</span>
</a-popover>
<div v-else>
<span v-if="item.label">{{ item.label }}</span>
<span v-else>{{ item.name }}</span>
</div>
</li>
</ul>
</div>
@@ -64,6 +71,10 @@ import { message, Upload, Modal } from "ant-design-vue";
type:Boolean,
default:false,
},
isCanvas:{
type:Boolean,
default:false,
},
deleteItem:{
type:Number,
default:-1

11
src/component/HomePage/layout.vue
View File

@@ -140,9 +140,7 @@ export default defineComponent({
let layoutList:any = ref([])
const content:any = ref<HTMLElement | null>(null);
let loadingShow = ref(false)
let styleObj:any = computed(()=>{
return store.state.UploadFilesModule.moodboardPosition
})
let styleObj:any = {}
let moodItemScale = ref(0)
let domObj = {
dom:['img','ul','.layout_rotote','.layout_translate','.layout_angle_tr','.layout_angle_tl','.layout_angle_br','.layout_angle_bl'],
@@ -692,6 +690,7 @@ export default defineComponent({
methods: {
init(){
let parentList:any = this.$parent
this.styleObj = this.store.state.UploadFilesModule.moodboardPosition
parentList = parentList.layoutList
this.layout = true
// let layoutList = this.store.state.UploadFilesModule.moodboard
@@ -756,7 +755,7 @@ export default defineComponent({
zIndex: obj['z-index']?obj['z-index']:1
}
});
const sortedNums = nums.sort((a, b) => a.zIndex - b.zIndex);
const sortedNums = nums.sort((a:any, b:any) => a.zIndex - b.zIndex);
GO.zIndex = sortedNums.length + 1
// GO.zIndex = sortedNums[sortedNums.length - 1].zIndex + 1
@@ -817,8 +816,9 @@ export default defineComponent({
//提交模板
submitTemplate() {
this.loadingShow = true
this.setDomStyle()
this.styleObj.domStyle = this.setIndex(this.styleObj.domStyle)//index统一排序设置值
this.store.commit("setDisposeMoodboardPosition", this.styleObj);
this.store.commit("setDisposeMoodboardPosition", JSON.parse(JSON.stringify(this.styleObj)));
this.layoutList.forEach((v:any)=>{
v.setPitch = false
})
@@ -841,7 +841,6 @@ export default defineComponent({
this.loadingShow = false
this.store.commit("setDisposeMoodboard", rv);
this.setDomStyle()
}
).catch(rv=>{

50
src/component/HomePage/scaleImage.vue
View File

@@ -110,7 +110,7 @@
</div>
</div>
</div>
<div class="scaleImage_nav" @keydown="handleKeyDown">
<div class="scaleImage_nav">
<div class="nav_left">
<i class="fi fi-rr-arrow-small-left" @click="lastStep()"></i>
</div>
@@ -163,7 +163,7 @@ export default defineComponent({
},
setup(props:any,{emit}) {
const store = useStore();
let {t} = useI18n()
let productimg = reactive({
isProductimg:false,
productimgSearchName:'',
@@ -301,12 +301,34 @@ export default defineComponent({
});
}
}
let submitBase64Data = (rv:any)=>{
let submitBase64Data = async (rv:any)=>{
loadingShow.value = true
let isOverlay = false
await new Promise<void>((resolve, reject) => {
Modal.confirm({
title: t('scaleImage.overlayOrNot'),
icon: createVNode(ExclamationCircleOutlined),
okText: 'Yes',
cancelText: 'No',
mask:false,
centered:true,
onOk() {
resolve()
isOverlay = true
},
onCancel(){
isOverlay = false
resolve()
}
});
})
let data = {
"base64": rv,
"category": scaleImageList.value[scaleImageIndex.value]?.categoryValue,
"gender": props.workspace.sexEnum.value,
"originalId":scaleImageList.value[scaleImageIndex.value]?.id,
"isOverride":isOverlay,
}
Https.axiosPost(Https.httpUrls.modifySketch, data).then(
(rv) => {
@@ -314,25 +336,9 @@ export default defineComponent({
rv.status = 'Success'
rv.category = scaleImageList.value[scaleImageIndex.value]?.category
rv.categoryValue = scaleImageList.value[scaleImageIndex.value]?.categoryValue
delete rv.url
Modal.confirm({
title: useI18n().t('scaleImage.overlayOrNot'),
icon: createVNode(ExclamationCircleOutlined),
okText: 'Yes',
cancelText: 'No',
mask:false,
centered:true,
onOk() {
scaleImageList.value[scaleImageIndex.value] = rv
loadingShow.value = false
scaleImage.value = false
},
onCancel(){
scaleImageList.value.unshift(rv)
loadingShow.value = false
scaleImage.value = false
}
});
isOverlay?(scaleImageList.value[scaleImageIndex.value] = rv):(scaleImageList.value.unshift(rv))
loadingShow.value = false
scaleImage.value = false
}
).catch(res=>{
loadingShow.value = false

122
src/component/modules/generalCanvas.vue
View File

@@ -1,20 +1,23 @@
<template>
<div class="generalCanvas">
<div class="generalCanvas_left">
<label>
<div class="label_item">
<div>{{ $t('exportModel.Height') }}:</div>
<input type="number" @input="setMaxInput('height', 30000)" v-model="canvasWH.height" />
</label>
</div>
<div class="generalCanvas_operation_bor_item generalCanvas_left_tool_item_column">
<label v-show="operation != 'move' && operation != 'eraser' && operation != 'texture'">
<div class="label_item" 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 class="labelHover_show exportCanvasBox_imgbor">
<div v-for="item in colorHistoryList" :style="{'background':item}" @click="setColorHistory(item)"></div>
</div>
</div>
<div class="label_item" 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>
<div class="label_item" 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"
@@ -24,8 +27,8 @@
<img :src="item.url" alt="">
</a-select-option>
</a-select>
</label>
<label v-show="operation == 'texture'" class="texture">
</div>
<div class="label_item texture" v-show="operation == 'texture'">
<div >{{ $t('exportModel.Texture') }}:</div>
<a-select ref="select" class="label_select" size="small" v-model:value="textureValue"
style="flex: 1"
@@ -35,15 +38,15 @@
<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>
<div class="label_item" v-show="operation != 'pencil' && operation != 'eraser'&&operation != 'move'&&operation != 'text'&&operation != 'texture'&&operation != ''">
<div >{{ $t('exportModel.FillBack') }}:</div>
<div class="generalCanvas_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>
<div class="label_item" v-show="operation === 'move'">
<div >{{ $t('exportModel.Layer') }}:</div>
<div class="generalCanvas_left_tool_item top">
<i class="icon iconfont icon-shangyiceng" @click="setLayerIndex('Front')"></i>
@@ -51,8 +54,8 @@
<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="(operation == '' || operation == 'text' || textDataShow) && operation != 'move'">
</div>
<div class="label_item" 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"
@@ -62,7 +65,7 @@
{{item.name}}
</a-select-option>
</a-select>
</label>
</div>
</div>
</div>
@@ -83,10 +86,10 @@
<!-- <i class="icon iconfont icon-circle" @click="setOperation('circle')" :class="{active:operation == 'circle'}"></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">
<div class="label_item uploadImage">
<i class="icon iconfont icon-shangchuantupian" ></i>
<input type="file" @change="uploadImage">
</label>
</div>
<i class="icon iconfont" @click="setOperation('text')" :class="{active:operation == 'text'}">T</i>
</div>
</div>
@@ -100,7 +103,7 @@
</div>
</template>
<script>
import {defineComponent, computed, h, ref, nextTick, inject, reactive, onMounted,
import {defineComponent, computed, h, ref, nextTick, onBeforeUnmount, reactive, onMounted,
} from "vue";
import { Https } from "@/tool/https";
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
@@ -759,31 +762,40 @@ export default defineComponent({
let setTimeOut = {
color:null,
width:null,
colorHistory:null,
}//给切换颜色设置防抖
let colorHistoryList = ref(['rgb(0, 0, 0)'])
let setColorHistory = (value)=>{
canvasPencilColor.value = value
pencilColor()
}
let pencilColor = ()=>{
if(createText.set){
setFontFamily()
return
}
// brushIndicator.fill = canvasPencilColor.value;
if(canvas.freeDrawingBrush.isEraser){
}else{
pencilbtnStyle.value.background = canvasPencilColor.value
}
if(brushworkValue.value == 'Marking'){
canvas.freeDrawingBrush.color = hexToRgba(canvasPencilColor.value,.5);
}else if(brushworkValue.value == 'InkBrush'){
canvas.freeDrawingBrush.color = hexToRgba(canvasPencilColor.value,.2);
}else{
canvas.freeDrawingBrush.color = hexToRgba(canvasPencilColor.value,1);
}
}
let setPencilColor = ()=>{//切换颜色给铅笔设置颜色
clearTimeout(setTimeOut.color)
clearTimeout(setTimeOut.colorHistory)
setTimeOut.color = setTimeout(()=>{
if(createText.set){
setFontFamily()
return
}
// brushIndicator.fill = canvasPencilColor.value;
if(canvas.freeDrawingBrush.isEraser){
}else{
pencilbtnStyle.value.background = canvasPencilColor.value
}
if(brushworkValue.value == 'Marking'){
canvas.freeDrawingBrush.color = hexToRgba(canvasPencilColor.value,.5);
}else if(brushworkValue.value == 'InkBrush'){
canvas.freeDrawingBrush.color = hexToRgba(canvasPencilColor.value,.2);
}else{
canvas.freeDrawingBrush.color = hexToRgba(canvasPencilColor.value,1);
}
},100)
pencilColor()
},200)
setTimeOut.colorHistory = setTimeout(()=>{
colorHistoryList.value.push(canvasPencilColor.value)
},1000)
}
let setPencilWidth = ()=>{//切换颜色给铅笔设置颜色
clearTimeout(setTimeOut.width)
@@ -1000,6 +1012,9 @@ export default defineComponent({
fontFamily.value = arr[0].value
init()
});
onBeforeUnmount(()=>{
canvasGeneral.canvasClear()
})
return {
toSvg,
t,
@@ -1029,6 +1044,8 @@ export default defineComponent({
canvasPencilWidth,//input选择宽度
setAllSelectWidth,//多选设置宽度
allSelectWidth,//多选设置宽度的值
colorHistoryList,//历史颜色
setColorHistory,//设置历史颜色
setPencilColor,//切换颜色执行函数 给当前矩形或者笔触设置颜色
setPencilWidth,//切换宽度执行函数 给当前矩形或者笔触设置宽度
brushworkChange,//切换笔触的回调
@@ -1173,7 +1190,7 @@ export default defineComponent({
align-items: flex-start;
position: relative;
flex-direction: row;
>label{
>.label_item{
width: 20%;
}
.generalCanvas_title {
@@ -1273,8 +1290,29 @@ export default defineComponent({
flex: 1;
margin-left: 8rem;
display: flex;
label{
.label_item{
margin-right: 2rem;
position: relative;
.labelHover_show{
position: absolute;
width: 100%;
height: 10rem;
top: 100%;
z-index: 2;
flex-wrap: wrap;
div{
width: 3rem;
height: 3rem;
margin-right: 1rem;
margin-bottom: 1rem;
cursor: pointer;
}
}
}
.label_item:hover{
.labelHover_show{
display: flex;
}
}
}
.generalCanvas_left_tool_item{

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

@@ -30,7 +30,7 @@
</div>
</template>
<script>
import { defineComponent, ref, reactive, watch, onMounted, nextTick, toRefs } from "vue";
import { defineComponent, ref, reactive, watch, onMounted, onBeforeUnmount, nextTick, toRefs } from "vue";
import { Https } from "@/tool/https";
import { formatTime } from "@/tool/util";
import { setCookie, getCookie } from "@/tool/cookie";
@@ -98,6 +98,9 @@ export default defineComponent({
onMounted(()=>{
init()
})
onBeforeUnmount(()=>{
canvasGeneral.canvasClear()
})
let reverseCanvasState = ref([])//存放canvas操作
let normalCanvasState = ref([])//存放canvas操作
let canvasState = ref()//存放canvas操作
@@ -460,6 +463,7 @@ export default defineComponent({
height: 100%;
flex: 1;
position: relative;
overflow: hidden;
width: 100%;
background: #e6e6e6;
&:hover{