1563 lines
45 KiB
Vue
1563 lines
45 KiB
Vue
<template>
|
||
<div class="generalCanvas">
|
||
<div class="generalCanvas_left">
|
||
<div class="label_item">
|
||
<div>{{ $t('exportModel.Height') }}:</div>
|
||
<input type="number" @input="setMaxInput('height', 30000)" v-model="canvasWH.height" />
|
||
</div>
|
||
<div class="generalCanvas_operation_bor_item generalCanvas_left_tool_item_column">
|
||
<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">
|
||
<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]">
|
||
</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"
|
||
>
|
||
<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="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"
|
||
@change="textureValueChange"
|
||
>
|
||
<a-select-option class="label_select_item" v-for="item in textureList" :value="item.value">
|
||
<img :src="item.url" alt="">
|
||
</a-select-option>
|
||
</a-select>
|
||
</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>
|
||
</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>
|
||
<i class="icon iconfont icon-shangyiceng2" @click="setLayerIndex('Forward')"></i>
|
||
<i class="icon iconfont icon-xiayiceng" @click="setLayerIndex('Backwards')"></i>
|
||
<i class="icon iconfont icon-shangyiceng1" @click="setLayerIndex('Back')"></i>
|
||
</div>
|
||
</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"
|
||
@change="setFontFamily"
|
||
>
|
||
<a-select-option class="label_select_item" v-for="item in textFontFamilyList" :style="{'font-family':item.value}" :value="item.value">
|
||
{{item.name}}
|
||
</a-select-option>
|
||
</a-select>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<div class="generalCanvas_center_box generalCanvas_left">
|
||
<div class="generalCanvas_left_tool generalCanvas_title">
|
||
<div class="generalCanvas_left_tool_item">
|
||
<i class="icon iconfont icon-chehui" @click="historyState('')"></i>
|
||
<i class="icon iconfont icon-fanchehui" @click="historyState('reverse')"></i>
|
||
<i class="icon iconfont icon-bianji" @click="setOperation('pencil')" :class="{active:operation == 'pencil'}"></i>
|
||
<i class="icon iconfont icon-caizhi" @click="setOperation('texture')" :class="{active:operation == 'texture'}"></i>
|
||
<i class="icon iconfont icon-move" @click="setOperation('move')" :class="{active:operation == 'move'}"></i>
|
||
<i class="icon iconfont icon-xiangpi_huaban1" @click="setOperation('eraser')" :class="{active:operation == 'eraser'}"></i>
|
||
<!-- <i class="icon iconfont icon-xiala" :class="closeNav.tool?'icon-rotate':''" @click.stop="setCloseNav('tool')"></i> -->
|
||
|
||
<i class="icon iconfont icon-xian" @click="setOperation('fold')" :class="{active:operation == 'fold'}"></i>
|
||
<i class="icon iconfont icon-checkbox-full" @click="setOperation('rect')" :class="{active:operation == 'rect'}"></i>
|
||
<!-- <i class="icon iconfont icon-zhixian" @click="setOperation('line')" :class="{active:operation == 'line'}"></i> -->
|
||
<!-- <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>
|
||
<div class="label_item uploadImage">
|
||
<i class="icon iconfont icon-shangchuantupian" ></i>
|
||
<input type="file" @change="uploadImage">
|
||
</div>
|
||
<i class="icon iconfont" @click="setOperation('text')" :class="{active:operation == 'text'}">T</i>
|
||
</div>
|
||
</div>
|
||
<div class="generalCanvas_center">
|
||
<div class="editFrontBack_pencilbtn" v-show="!isShowMark" :style="pencilbtnStyle"></div>
|
||
</div>
|
||
</div>
|
||
<div class="mark_loading" v-show="isShowMark">
|
||
<a-spin size="large" />
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import {defineComponent, computed, h, ref, nextTick, onBeforeUnmount, reactive, onMounted,
|
||
} from "vue";
|
||
import { Https } from "@/tool/https";
|
||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||
import scaleImage from "@/component/HomePage/scaleImage.vue";
|
||
import ExportNewCoolection from "@/component/HomePage/ExportNewCoolection.vue";
|
||
import { useStore } from "vuex";
|
||
import JSZip, { forEach } from "jszip";
|
||
// import fabric from 'fabric';
|
||
import { message, Modal } from "ant-design-vue";
|
||
import domTurnImg from '@/tool/domTurnImg'
|
||
import { openGuide,driverObj__ } from "@/tool/guide";
|
||
const FileSaver = require("file-saver");
|
||
import { JSSetPencil,JSRectUpdata,JSchangeType,JScanvasMouseDown,JScanvasMouseMove,JScreateCheck,JSSetTexture,JSSetGroup } from "@/tool/canvasDrawing";
|
||
import { useI18n } from "vue-i18n";
|
||
import {isMoible,calculateGradientCoordinate,base64ToFile} from '@/tool/util'
|
||
import publish from "@/component/WorksPage/publish.vue";
|
||
import canvasGeneral from "@/tool/canvasGeneral";
|
||
|
||
export default defineComponent({
|
||
components: {
|
||
scaleImage,
|
||
ExportNewCoolection,
|
||
publish,
|
||
},
|
||
props: ["msg", "sketchCatecoryList"],
|
||
setup(props,{emit}) {
|
||
const {t} = useI18n()
|
||
const store = useStore();
|
||
let driver__ = computed(()=>{
|
||
return store.state.Guide.guide
|
||
})
|
||
|
||
let canvas = reactive({});
|
||
// let canvasDom = ref()
|
||
let canvasWH = ref({
|
||
width: 400,
|
||
height: 100,
|
||
});
|
||
let pencilbtnStyle = ref({
|
||
background:'',
|
||
width:0+'px',
|
||
height:0+'px',
|
||
display:'none',
|
||
left:0+'px',
|
||
top:0+'px',
|
||
})
|
||
let publish = ref()
|
||
// canvasWH.value.width = [window.innerWidth/2.4]
|
||
// canvasWH.value.width = canvasWH.value.width.map(num => Math.round(num / 100) * 100)[0];
|
||
let credits = computed(() => {
|
||
return store.state.UserHabit.credits.value;
|
||
});
|
||
|
||
let allBoardData = computed(() => {
|
||
return store.state.UploadFilesModule.allBoardData;
|
||
});
|
||
let isShowMark = ref(false);
|
||
// let allImage = Object.assign(allBoardData.value,{likeDesignCollectionList:likeDesignCollectionList.value})
|
||
let position = {
|
||
//设置每个图形位置的初始值
|
||
x: 0,
|
||
y: 0,
|
||
height: 0,
|
||
};
|
||
let sketchGrouping = 3; //sketch分组
|
||
let disposeMoodboardShow = true;
|
||
let canvasState = ref()//存放canvas操作
|
||
let reverseCanvasState = ref([])//存放canvas操作
|
||
let normalCanvasState = ref([])//存放canvas操作
|
||
let isLoadCanvas = false//撤回或者反撤回false为撤回
|
||
let userlikeGroupId = 0
|
||
let imgWidth = {} //这是设置画布等宽
|
||
let submitCanvasContent = null
|
||
let init = (productData) => {
|
||
canvasWH.value.height = 100
|
||
nextTick().then(async () => {
|
||
let canvasBox = document.querySelector(".generalCanvas .generalCanvas_center");
|
||
canvas = canvasGeneral.canvasInit(canvasBox,{})
|
||
|
||
document.addEventListener("keydown", setCanvasKeyDown);
|
||
document.addEventListener("keyup", clearCanvasKeyDown);
|
||
|
||
canvasOnDrop()//开启鼠标到画布事件
|
||
canvas.on("object:modified", ()=>{
|
||
updateCanvasState()
|
||
});
|
||
canvas.preserveObjectStacking = true;
|
||
canvas.on("mouse:move", event =>setCanvasMove(event));
|
||
canvas.on("mouse:down", event=>setCanvasDown(event));
|
||
canvas.on("mouse:up", event=>setCanvasUp(event));
|
||
|
||
//双击
|
||
canvas.on("mouse:dblclick", event=>{
|
||
if(operation.value == 'fold'){
|
||
foldEnd('Enter')
|
||
}
|
||
});
|
||
|
||
pencilbtnStyle.value.background = '#fff'
|
||
fabric.Object.prototype.cornerSize = 10
|
||
fabric.Object.prototype.transparentCorners = false
|
||
isShowMark.value = true
|
||
|
||
isShowMark.value = false
|
||
updateCanvasState('')//加载完成后记录一下
|
||
setOperation('move')
|
||
submitCanvasContent = setInterval(()=>{
|
||
let data = setCanvasContent(true)
|
||
if(data.objects.length == 0){
|
||
clearTimeout(submitCanvasContent)
|
||
return
|
||
}
|
||
data.canvasHeight = canvasWH.value.height
|
||
localStorage.setItem('canvasContent',JSON.stringify(data))
|
||
localStorage.setItem('userlikeGroupId',userlikeGroupId)
|
||
},3000)
|
||
if(driver__.value.driver){
|
||
driverObj__.moveNext()
|
||
}
|
||
|
||
});
|
||
|
||
};
|
||
let deleteObject = ()=> {
|
||
if(!canvas.getActiveObjects()){
|
||
return
|
||
}
|
||
let target = canvas.getActiveObjects()
|
||
|
||
target.forEach((item)=>{
|
||
// var canvas = item.canvas;
|
||
// canvas.remove(item);
|
||
canvas.fxRemove(item, {
|
||
onComplete(){
|
||
canvas.discardActiveObject(); // 丢弃当前选中的对象
|
||
canvas.renderAll(); // 重新渲染 Canvas
|
||
}
|
||
})
|
||
canvas.FX_DURATION = 300
|
||
})
|
||
updateCanvasState('remove')
|
||
}
|
||
let setImageWidth = (key,img)=>{
|
||
let imgWidth = canvasWH.value.width; //这是设置画布等宽
|
||
if (
|
||
disposeMoodboardShow &&
|
||
key == "disposeMoodboard" &&
|
||
allBoardData.value?.[key]?.length != 0 &&
|
||
allBoardData.value?.[key]?.[0] != null
|
||
) {
|
||
//如果是mood 需要判断用户是否点击layout
|
||
disposeMoodboardShow = false;
|
||
}
|
||
if(key == 'upImgFiles'){
|
||
imgWidth = canvasWH.value.width / 4;
|
||
}
|
||
if (key == "printboardFiles") {
|
||
imgWidth = canvasWH.value.width / 8;
|
||
}
|
||
if (key == "sketchboardFiles"||key == 'moodboardFiles') {
|
||
imgWidth =
|
||
(canvasWH.value.width -
|
||
(sketchGrouping - 1) * 20) /
|
||
sketchGrouping;
|
||
}
|
||
if (key == "likeDesignCollectionList") {
|
||
if(img){
|
||
let imgObj = JSON.parse(JSON.stringify(img))
|
||
let height = imgObj.height
|
||
imgObj.height = canvasWH.value.width / 4 * 1.8
|
||
let heightScale = imgObj.height / height
|
||
imgWidth = imgObj.width * heightScale
|
||
}
|
||
// imgWidth =
|
||
|
||
// (canvasWH.value.width -
|
||
// (likeDesign - 1) * 20) /
|
||
// likeDesign;
|
||
}
|
||
return imgWidth
|
||
}
|
||
let setCanvasImage = (img,key,left,top,data)=>{
|
||
// data
|
||
let imgId = 0
|
||
let minioUrl = ''//表示收藏或者generate
|
||
let imgUrl = data.imgUrl
|
||
if (key == "likeDesignCollectionList") {
|
||
imgUrl = data.designOutfitUrl;
|
||
imgWidth[key] = setImageWidth(key,img);
|
||
}
|
||
|
||
let url = imgUrl.split('?')[0]
|
||
var match = url.match(/:(\d+)\/(.*)/);
|
||
minioUrl = match[2]
|
||
// let id =
|
||
let proportion = img.height / img.width; //计算图形宽高比例
|
||
let scaleWH = imgWidth[key] / img.width; //计算放到画布上缩小倍率
|
||
img.set({
|
||
// width: imgWidth[key]/img.width,
|
||
// height: canvasWH.value.height/img.height,
|
||
left,
|
||
top,
|
||
imgId,
|
||
minioUrl,
|
||
scaleX:
|
||
imgWidth[key] / img.width,
|
||
scaleY:(img.width * proportion * scaleWH) / img.height,
|
||
// cornerSize: 10, // 选中时，角的大小为20
|
||
// transparentCorners: false, // 选中时，角是被填充了。true 空心；false 实心
|
||
lockRotation: true,
|
||
});
|
||
}
|
||
//关闭画布
|
||
//设置画布宽高
|
||
let setMaxInput = (str, maxNum) => {
|
||
if (str == "width") {
|
||
// maxNum = window.innerWidth < 1100 ? 400 : maxNum;
|
||
maxNum = [window.innerWidth/2.4]
|
||
maxNum = maxNum.map(num => Math.round(num / 10) * 10)[0];
|
||
}else if(str == 'height'){
|
||
if(position.y+position.height>maxNum){
|
||
maxNum = Math.floor(position.y+position.height)
|
||
}
|
||
}
|
||
if (str == "width" && canvasWH.value.width >= maxNum) {
|
||
canvasWH.value.width = maxNum;
|
||
} else if (str == "height" && canvasWH.value.height >= maxNum) {
|
||
canvasWH.value.height = maxNum;
|
||
}
|
||
canvas.setHeight(canvasWH.value.height);
|
||
canvas.setWidth(canvasWH.value.width);
|
||
};
|
||
|
||
let closeNav = ref({
|
||
nav:false,
|
||
tool:false,
|
||
move:false,
|
||
})
|
||
let setCloseNav = (key)=>{
|
||
closeNav.value[key] = !closeNav.value[key]
|
||
// for (const iterator in closeNav.value) {
|
||
// if(key != iterator){
|
||
// closeNav.value[iterator] = false
|
||
// }
|
||
// }
|
||
}
|
||
let currentType = ref({
|
||
type:'',
|
||
data:'',
|
||
})
|
||
let onDragstart = (type,imgItem)=>{
|
||
currentType.value.type = type
|
||
currentType.value.data = imgItem
|
||
}
|
||
let present = {}
|
||
let setDragstart = (type,imgItem)=>{
|
||
currentType.value.type = type
|
||
present.upScaleChecked = false
|
||
present = {}
|
||
if(imgItem.upScaleChecked){
|
||
}else{
|
||
imgItem.upScaleChecked = true
|
||
present = imgItem
|
||
}
|
||
currentType.value.data = imgItem
|
||
}
|
||
let canvasOnDrop = ()=>{
|
||
canvas.on('drop', (opt)=> {
|
||
let offset = {
|
||
left: canvas.getSelectionElement().getBoundingClientRect().left,
|
||
top: canvas.getSelectionElement().getBoundingClientRect().top
|
||
}
|
||
let point = {
|
||
x: opt.e.x - offset.left,
|
||
y: opt.e.y - offset.top,
|
||
}
|
||
let pointerVpt = canvas.restorePointerVpt(point)
|
||
switch (currentType.value.type) {
|
||
case 'colorBoards':
|
||
let rect = setGroup(currentType.value.data)
|
||
setCanvasColor(pointerVpt.y, pointerVpt.x,rect)
|
||
break
|
||
case 'moodboardFiles':
|
||
createImage(pointerVpt.y, pointerVpt.x,currentType.value.type)
|
||
break
|
||
default :
|
||
createImage(pointerVpt.y, pointerVpt.x,currentType.value.type)
|
||
break
|
||
}
|
||
// 创建完元素，把当前操作的元素类型设置回 null
|
||
currentType.value.type = null
|
||
currentType.value.data = null
|
||
|
||
})
|
||
}
|
||
let setGroup = (data)=>{
|
||
|
||
|
||
|
||
return JSSetGroup(data)
|
||
}
|
||
let setCanvasColor = (top,left,rect)=>{
|
||
let group
|
||
group = new fabric.Group([rect.color,rect.text,rect.text1],{
|
||
left,
|
||
top,
|
||
width: rect.width,
|
||
fill: "rgb(255,255,255)",
|
||
stroke: "#212121",
|
||
strokeWidth: 1,
|
||
});
|
||
canvas.add(group);
|
||
return group
|
||
}
|
||
// 创建矩形
|
||
let createImage = async (top, left,key)=> {
|
||
let itemCanvasImg = currentType.value.data.imgUrl
|
||
let data = JSON.parse(JSON.stringify(currentType.value.data))
|
||
if(key == 'likeDesignCollectionList'){
|
||
itemCanvasImg = currentType.value.data.designOutfitUrl;
|
||
}
|
||
await new Promise((resolve,reject)=>{
|
||
fabric.Image.fromURL(itemCanvasImg,(img) => {
|
||
setCanvasImage(img,key,left,top,data)//设置图片
|
||
canvas.add(img);
|
||
resolve()
|
||
},{ crossOrigin: "Anonymous" });
|
||
})
|
||
updateCanvasState()
|
||
}
|
||
//设置画布监听修改添加事件，用来做撤回功能
|
||
let updateCanvasState = (str) =>{
|
||
const canvasAsJson = JSON.stringify(canvas.toJSON());
|
||
if(str == 'loadingCompleted'){
|
||
// reverseCanvasState.value.push(canvasAsJson);
|
||
}
|
||
normalCanvasState.value.push(canvasAsJson);
|
||
if (isLoadCanvas) {
|
||
reverseCanvasState.value = []
|
||
isLoadCanvas = false;
|
||
canvasState.value = 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);
|
||
isLoadCanvas = true;
|
||
}else{
|
||
return
|
||
}
|
||
canvas.loadFromJSON(canvasState.value, () => {});
|
||
}
|
||
|
||
//在画布进行画画
|
||
let operation = ref('move')
|
||
let operationMode = ref('fill')
|
||
let textureValue = ref(0)//材质信息
|
||
|
||
let textureValueChange = (value)=>{
|
||
textureValue.value = value
|
||
setTexture()
|
||
}
|
||
//铅笔颜色 大小
|
||
let brushworkValue = ref('PencilBrush')
|
||
let brushworkChange = (value)=>{
|
||
brushworkValue.value = value
|
||
setPencil()
|
||
}
|
||
|
||
// let brushwork = ref('')
|
||
// 监听键盘的 keydown 和 keyup 事件
|
||
let keyDown = []
|
||
let canvasKeyDown = (event) => {
|
||
if(keyDown.indexOf(event.key)>-1){
|
||
}else{
|
||
keyDown.push(event.code)
|
||
if(event.key === 'Enter' && operation.value == 'fold'){
|
||
foldEnd('Enter')
|
||
}else if(event.key === 'Delete'){
|
||
deleteObject()
|
||
}else 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('')
|
||
}else if(keyDown.indexOf('ControlLeft') > -1 && keyDown.indexOf('KeyC') > -1){
|
||
copy()
|
||
}else if(keyDown.indexOf('ControlLeft') > -1 && keyDown.indexOf('KeyV') > -1){
|
||
paste()
|
||
}
|
||
}
|
||
}
|
||
let canvasKeyUp = (event) =>{
|
||
keyDown = keyDown.filter(function(item) {
|
||
return event.code !== item;
|
||
})
|
||
}
|
||
let setCanvasKeyDown = (event)=>{
|
||
document.addEventListener('keydown',canvasKeyDown);
|
||
document.addEventListener('keyup', canvasKeyUp);
|
||
}
|
||
let clearCanvasKeyDown = (pointer)=>{
|
||
if(!pointer?.target){
|
||
document.removeEventListener('keydown',canvasKeyDown);
|
||
document.removeEventListener('keyup', canvasKeyUp);
|
||
}
|
||
}
|
||
let canvasPencilColor = ref('#000000')//画笔颜色
|
||
let canvasPencilWidth = ref({
|
||
})
|
||
let fontFamily = ref({})
|
||
let textFontFamilyList = ref([])
|
||
let allSelectWidth = ref(-1)//多选或单选的宽度
|
||
let allSelect = ref([])//多选或单选的宽度
|
||
let setOperation = (str)=>{
|
||
operation.value = str
|
||
canvas.discardActiveObject();//取消所有选中边框
|
||
if(createPatterningIs){
|
||
canvas.remove(currentPatterning)
|
||
}
|
||
removeSetText()
|
||
initAligningGuidelines(canvas,false)
|
||
canvas.remove(polyLineBtn)
|
||
if(str == 'pencil'){
|
||
setPencil()
|
||
pencilbtnStyle.value.display = `block`
|
||
}else if(str == 'move'){
|
||
JSchangeType(canvas,'init')
|
||
initAligningGuidelines(canvas,true)
|
||
setMove()
|
||
pencilbtnStyle.value.display = `none`
|
||
}else if(str == 'texture'){
|
||
setTexture()
|
||
pencilbtnStyle.value.display = `block`
|
||
}else if(str == 'eraser'){
|
||
setEraser()
|
||
pencilbtnStyle.value.display = `block`
|
||
}else if(str == 'text'){
|
||
setMove()
|
||
setText()
|
||
JSchangeType(canvas,'init')
|
||
pencilbtnStyle.value.display = `none`
|
||
}else if(str){
|
||
pencilbtnStyle.value.display = `none`
|
||
canvas.forEachObject((obj) =>obj.selectable = false);
|
||
canvas.isDrawingMode = false
|
||
}
|
||
setPencilWidth()
|
||
}
|
||
let _setAllSelectTime = null
|
||
let setAllSelectWidth = ()=>{
|
||
clearTimeout(_setAllSelectTime)
|
||
allSelect.value.forEach((item)=>{
|
||
// item.width = allSelectWidth.value
|
||
item.scaleX = allSelectWidth.value/item.width
|
||
item.scaleY = item.scaleX
|
||
item.setCoords()
|
||
})
|
||
_setAllSelectTime = setTimeout(() => {
|
||
updateCanvasState('')//加载完成后记录一下
|
||
}, 1500);
|
||
}
|
||
let _clipboard = null // 复制到的内容
|
||
let copy = () => {//复制
|
||
var activeObject = canvas.getActiveObject();
|
||
if(!activeObject){
|
||
return
|
||
}
|
||
activeObject.clone(function(cloned) {
|
||
_clipboard = cloned;
|
||
})
|
||
}
|
||
let paste = () => {//粘贴
|
||
if(!_clipboard){
|
||
return
|
||
}
|
||
_clipboard.clone(clonedObj => {
|
||
canvas.discardActiveObject() // 取消选择
|
||
|
||
// 设置新内容的坐标位置
|
||
clonedObj.set({
|
||
left: clonedObj.left + 10,
|
||
top: clonedObj.top + 10,
|
||
evented: true
|
||
})
|
||
|
||
if (clonedObj.type === 'activeSelection') {
|
||
// 活动选择需要一个对画布的引用
|
||
clonedObj.canvas = canvas;
|
||
clonedObj.forEachObject(function(obj) {
|
||
canvas.add(obj)
|
||
})
|
||
|
||
clonedObj.setCoords()
|
||
} else {
|
||
canvas.add(clonedObj)
|
||
}
|
||
_clipboard.top += 10
|
||
_clipboard.left += 10
|
||
canvas.setActiveObject(clonedObj)
|
||
canvas.requestRenderAll()
|
||
})
|
||
updateCanvasState()
|
||
}
|
||
let textureList = ref([])
|
||
for (let index = 0; index < 20; index++) {
|
||
textureList.value.push({value:index,url:`/image/texture/texture${index}.webp`})
|
||
}
|
||
let setTexture = async ()=>{
|
||
canvas.isDrawingMode = true//开启绘画模式
|
||
let img = await JSSetTexture(textureList.value[textureValue.value].url)
|
||
|
||
let patternBrush = new fabric.PatternBrush(canvas)
|
||
patternBrush.source = img
|
||
patternBrush.width = canvasPencilWidth.value[operation.value]?canvasPencilWidth.value[operation.value]:20; // 设置画笔大小
|
||
canvas.freeDrawingBrush = patternBrush
|
||
}
|
||
let setOperationMode = (str) =>{
|
||
operationMode.value = str
|
||
}
|
||
let uploadImage = (event)=>{
|
||
let input = document.querySelector('.uploadImage input')
|
||
const file = event.target.files[0];
|
||
setOperation('move')
|
||
if (file) {
|
||
const reader = new FileReader();
|
||
reader.onload = (e) => {
|
||
let file = base64ToFile(e.target.result,'upload')
|
||
let formData = new FormData();
|
||
formData.append("file", file);
|
||
let config = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*' }}
|
||
Https.axiosPost(Https.httpUrls.canvasElementUpload, formData,config).then((rv)=>{
|
||
rv.imgUrl = rv.minioUrl
|
||
fabric.Image.fromURL(rv.minioUrl,(img) => {
|
||
setCanvasImage(img,"upImgFiles",0,canvas.wrapperEl.parentNode.scrollTop,rv)
|
||
canvas.add(img);
|
||
},{ crossOrigin: "Anonymous" })
|
||
})
|
||
input.value = ''
|
||
};
|
||
reader.readAsDataURL(file);
|
||
}
|
||
}
|
||
let setLayerIndex = (str) =>{//设置优先级
|
||
var activeObject = canvas.getActiveObject();
|
||
switch (str) {
|
||
case 'Front':
|
||
canvas.bringToFront(activeObject)//顶层
|
||
break
|
||
case 'Back':
|
||
canvas.sendToBack(activeObject)//底层
|
||
break
|
||
case 'Forward':
|
||
canvas.bringForward(activeObject)
|
||
break
|
||
case 'Backwards':
|
||
canvas.sendBackwards(activeObject)
|
||
break
|
||
}
|
||
}
|
||
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 brushList = ref(canvasGeneral.pencilList.brushList)
|
||
let setPencil =()=>{
|
||
let pencil = JSSetPencil(brushworkValue.value,canvas)
|
||
canvas.isDrawingMode = true//开启绘画模式
|
||
canvas.freeDrawingBrush = pencil
|
||
canvas.freeDrawingBrush.width = canvasPencilWidth.value[operation.value]?canvasPencilWidth.value[operation.value]:20;
|
||
|
||
if(brushworkValue.value == 'RibbonBrush' || brushworkValue.value == 'LongfurBrush'){
|
||
canvas.freeDrawingBrush.width = 1;
|
||
}
|
||
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);
|
||
}
|
||
|
||
pencilbtnStyle.value.background = canvasPencilColor.value
|
||
canvas.freeDrawingBrush.isEraser = false
|
||
|
||
}
|
||
|
||
let setMove = () =>{
|
||
canvas.isDrawingMode = false
|
||
canvas.forEachObject((obj) =>obj.selectable = true);
|
||
}
|
||
let setEraser = ()=>{
|
||
canvas.isDrawingMode = true
|
||
let eraser = new fabric.EraserBrush(canvas)
|
||
canvas.freeDrawingBrush = eraser
|
||
pencilbtnStyle.value.background = '#fff'
|
||
canvas.requestRenderAll();
|
||
canvas.freeDrawingBrush.isEraser = true
|
||
canvas.freeDrawingBrush.width = canvasPencilWidth.value[operation.value]?canvasPencilWidth.value[operation.value]:20;
|
||
}
|
||
let createText = {}
|
||
let setTextFun = (e)=>{
|
||
if(operation.value != 'text'){
|
||
return
|
||
}
|
||
var clickedObject = e.target;
|
||
if (clickedObject instanceof fabric.Textbox) {
|
||
createText = clickedObject
|
||
}else{
|
||
var pointer = canvas.getPointer(e.pointer);
|
||
var x = pointer.x;
|
||
var y = pointer.y;
|
||
createText = new fabric.Textbox('', {
|
||
left: x,
|
||
top: y,
|
||
width: 150,
|
||
fontSize: canvasPencilWidth.value[operation.value]?canvasPencilWidth.value[operation.value]:20,
|
||
fontFamily:fontFamily.value,
|
||
fill:canvasPencilColor.value,
|
||
|
||
})
|
||
canvas.add(createText)
|
||
createText.enterEditing();
|
||
canvas.setActiveObject(createText).renderAll();
|
||
operation.value = ''
|
||
removeSetText()
|
||
}
|
||
|
||
}
|
||
let setText = ()=>{
|
||
canvas.on('mouse:down',setTextFun)
|
||
// if(isMoible()){
|
||
// canvas.on('mouse:down',setTextFun)
|
||
// }else{
|
||
// canvas.on('mouse:dblclick',setTextFun)
|
||
// }
|
||
}
|
||
let removeSetText = ()=>{
|
||
canvas.off('mouse:down',setTextFun)
|
||
// if(isMoible()){
|
||
// canvas.off('mouse:down',setTextFun)
|
||
// }else{
|
||
// canvas.off('mouse:dblclick',setTextFun)
|
||
// }
|
||
}
|
||
|
||
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(()=>{
|
||
pencilColor()
|
||
},200)
|
||
setTimeOut.colorHistory = setTimeout(()=>{
|
||
colorHistoryList.value.push(canvasPencilColor.value)
|
||
},1000)
|
||
}
|
||
let setPencilWidth = ()=>{//切换颜色给铅笔设置颜色
|
||
clearTimeout(setTimeOut.width)
|
||
canvasPencilWidth.value[operation.value] = Number(canvasPencilWidth.value[operation.value]?canvasPencilWidth.value[operation.value]:20)
|
||
setTimeOut.width = setTimeout(()=>{
|
||
if(brushworkValue.value == 'LongfurBrush' || brushworkValue.value == 'RibbonBrush'){
|
||
canvas.freeDrawingBrush.width = 1;
|
||
}else{
|
||
canvas.freeDrawingBrush.width = canvasPencilWidth.value[operation.value];
|
||
}
|
||
pencilbtnStyle.value.height = canvasPencilWidth.value[operation.value]+'px'
|
||
pencilbtnStyle.value.width = canvasPencilWidth.value[operation.value]+'px'
|
||
// setPencil()
|
||
},300)
|
||
}
|
||
let downPoint = null;//鼠标按下位置
|
||
let upPoint = null;//鼠标抬起位置
|
||
let currentPatterning = null//临时图形
|
||
let polyLineBtn = null
|
||
let createPatterningIs = false
|
||
let clearPatterning = () =>{
|
||
if(createPatterningIs){
|
||
canvas.remove(currentPatterning)
|
||
}
|
||
currentPatterning = null
|
||
canvas.remove(polyLineBtn)
|
||
updateCanvasState()
|
||
}
|
||
//设置再画布上移动
|
||
let setCanvasMove = (event)=>{
|
||
|
||
var pointer = canvas.getPointer(event.e);
|
||
if(canvas.isDrawingMode){
|
||
canvas.setCursor('none');
|
||
|
||
}else{
|
||
if(createPatterningIs){
|
||
JScanvasMouseMove(operation.value,event,currentPatterning,downPoint,keyDown)
|
||
}
|
||
}
|
||
let canvasBox = document.querySelector(".generalCanvas .canvas-container");
|
||
const rect = canvasBox.getBoundingClientRect();
|
||
const parentRect = canvasBox.parentElement.getBoundingClientRect();
|
||
let parentX = rect.left - parentRect.left
|
||
let parentY = rect.top - parentRect.top
|
||
pencilbtnStyle.value.left = parentX + pointer.x+'px'
|
||
pencilbtnStyle.value.top = parentY + canvasBox.parentElement.scrollTop + pointer.y+'px'
|
||
canvas.requestRenderAll()
|
||
}
|
||
//设置再画布上按下
|
||
let setCanvasDown = (event)=>{
|
||
//设置移动端按下添加元素
|
||
|
||
if(isMoible && present.upScaleChecked){
|
||
present.upScaleChecked = false
|
||
present = {}
|
||
let pointerVpt = canvas.restorePointerVpt(event.pointer)
|
||
switch (currentType.value.type) {
|
||
case 'colorBoards':
|
||
let rect = setGroup(currentType.value.data)
|
||
setCanvasColor(pointerVpt.y, pointerVpt.x,rect)
|
||
break
|
||
case 'moodboardFiles':
|
||
createImage(pointerVpt.y, pointerVpt.x,currentType.value.type)
|
||
break
|
||
default :
|
||
createImage(pointerVpt.y, pointerVpt.x,currentType.value.type)
|
||
break
|
||
}
|
||
// 创建完元素，把当前操作的元素类型设置回 null
|
||
currentType.value.type = null
|
||
currentType.value.data = null
|
||
}
|
||
downPoint = event.absolutePointer
|
||
let arr = ['rect','line','circle','triangle','ellipse','fold']
|
||
if(arr.indexOf(operation.value) > -1){
|
||
JSchangeType(canvas,operation.value)
|
||
createPatterningIs = true
|
||
if(currentPatterning && operation.value == 'fold'){
|
||
canvas.skipTargetFind = false
|
||
currentPatterning.points.push({
|
||
x: downPoint.x,
|
||
y: downPoint.y
|
||
})
|
||
// currentPatterning = JScanvasMouseDown(operation.value,event,canvasPencilWidth.value,currentPatterning)
|
||
}else{
|
||
currentPatterning = JScanvasMouseDown(operation.value,event,canvasPencilWidth.value[operation.value]?canvasPencilWidth.value[operation.value]:20,currentPatterning)
|
||
canvas.add(currentPatterning)
|
||
canvas.bringToFront(currentPatterning);//设置优先级最高
|
||
if(operation.value == 'fold'){
|
||
polyLineBtn = JScreateCheck(event)
|
||
polyLineBtn.on('mousedown',foldEnd)
|
||
canvas.add(polyLineBtn)
|
||
}
|
||
}
|
||
}else{
|
||
var clickedObject = event.target;
|
||
if (clickedObject instanceof fabric.Textbox && operation.value != 'text') {
|
||
textDataShow.value = true
|
||
createText = clickedObject
|
||
setTextData(clickedObject)
|
||
}else{
|
||
textDataShow.value = false
|
||
createText = {}
|
||
}
|
||
createPatterningIs = false
|
||
}
|
||
}
|
||
let foldEnd = (key)=>{
|
||
canvas.skipTargetFind = true
|
||
let points = currentPatterning.points
|
||
if(key == 'Enter'){
|
||
}else{
|
||
points.pop()
|
||
}
|
||
points.pop()
|
||
canvas.remove(currentPatterning)
|
||
let polyline = new fabric.Polyline(points, {
|
||
fill: operationMode.value == 'fill'? canvasPencilColor.value : 'transparent',
|
||
stroke: canvasPencilColor.value,
|
||
strokeWidth:canvasPencilWidth.value[operation.value]?canvasPencilWidth.value[operation.value]:20,
|
||
selection:false,
|
||
})
|
||
canvas.add(polyline)
|
||
// currentPatterning.set({stroke: canvasPencilColor.value})
|
||
createPatterningIs = false
|
||
clearPatterning()//临时图形置为空并且添加撤回对象里面
|
||
setOperation('move')
|
||
}
|
||
//设置再画布上抬起
|
||
let setCanvasUp = (event)=>{
|
||
upPoint = event.absolutePointer
|
||
if(canvas.isDrawingMode){
|
||
setTimeout(() => {
|
||
// pencilbtnStyle.value.display = `none`
|
||
updateCanvasState()
|
||
}, 100);
|
||
}else{
|
||
// event.target && (event.target.bringToFront())//设置优先级
|
||
}
|
||
var selectedObjects = canvas.getActiveObjects();//获取多选选中的内容
|
||
if (selectedObjects.length >= 1) {
|
||
allSelect.value = selectedObjects
|
||
// allSelectWidth.value = 0
|
||
allSelectWidth.value = (selectedObjects[0].width * selectedObjects[0].scaleX).toFixed(0)
|
||
}else{
|
||
allSelectWidth.value = -1
|
||
}
|
||
if(createPatterningIs){
|
||
|
||
switch (operation.value) {
|
||
case 'line':
|
||
currentPatterning.set({stroke: canvasPencilColor.value})
|
||
break
|
||
case 'fold':
|
||
// currentPatterning.set({stroke: canvasPencilColor.value})
|
||
break
|
||
default :
|
||
if(operationMode.value == 'fill'){
|
||
currentPatterning.set({fill: canvasPencilColor.value})
|
||
}else if (operationMode.value == 'border'){
|
||
currentPatterning.set({fill: 'transparent',stroke: canvasPencilColor.value,strokeWidth: canvasPencilWidth.value[operation.value]?canvasPencilWidth.value[operation.value]:20})
|
||
}
|
||
if(JSON.stringify(downPoint) == JSON.stringify(upPoint)){
|
||
canvas.remove(currentPatterning)
|
||
}
|
||
break
|
||
}
|
||
if(operation.value == 'fold'){
|
||
canvas.forEachObject((obj) =>obj.selectable = false);
|
||
canvas.bringToFront(polyLineBtn);//设置优先级最高
|
||
}else if(operation.value){
|
||
createPatterningIs = false
|
||
clearPatterning()//临时图形置为空并且添加撤回对象里面
|
||
canvas.renderAll();
|
||
setOperation('move')
|
||
}
|
||
}
|
||
}
|
||
let toSvg = ()=>{
|
||
// console.log(canvas.toSvg());
|
||
}
|
||
let setCanvasContent = (isSaveImg)=>{
|
||
var json = canvas.toJSON(['imgId','minioUrl']);
|
||
// console.log(JSON.stringify(json));
|
||
if(!isSaveImg){
|
||
json.objects.forEach(item=>{
|
||
if(item.type == 'image'){
|
||
delete item.src
|
||
}
|
||
})
|
||
}
|
||
return json
|
||
}
|
||
let textDataShow = ref(false)
|
||
let setTextData = (obj)=>{
|
||
fontFamily.value = obj.fontFamily
|
||
canvasPencilWidth.value['text'] = obj.fontSize
|
||
canvasPencilColor.value = obj.fill
|
||
}
|
||
let setFontFamily = ()=>{
|
||
if(createText.set){
|
||
createText.set({
|
||
fontFamily:fontFamily.value,
|
||
fontSize:canvasPencilWidth.value[operation.value]?canvasPencilWidth.value[operation.value]:20,
|
||
fill:canvasPencilColor.value,
|
||
})
|
||
canvas.renderAll();
|
||
}
|
||
}
|
||
onMounted(() => {
|
||
let arr = canvasGeneral.pencilList.textFontFamilyList
|
||
textFontFamilyList.value = arr
|
||
fontFamily.value = arr[0].value
|
||
init()
|
||
});
|
||
onBeforeUnmount(()=>{
|
||
canvasGeneral.canvasClear()
|
||
})
|
||
return {
|
||
toSvg,
|
||
t,
|
||
toSvg,
|
||
canvasWH,//画布初始宽高
|
||
pencilbtnStyle,//笔触按钮
|
||
publish,//发布作品广场
|
||
credits,//积分 用来判断HD导出积分是否够用
|
||
init,//首页点击导出后初始化
|
||
setMaxInput,//设置画布宽高
|
||
isShowMark,//加载遮罩
|
||
allBoardData,//选择画布所有内容
|
||
closeNav,//导航展开或者收起来状态
|
||
setCloseNav,//给图片导航或者工具收起来或者展开
|
||
onDragstart,//拖拽函数
|
||
setDragstart,//的移动端拖拽改为按下
|
||
historyState,//执行撤回或者反撤回
|
||
operation,//设置当前鼠标状态绘画或者矩形或者移动
|
||
operationMode,//设置矩形是边框还是填充
|
||
setOperation,//设置当前鼠标状态绘画或者矩形或者移动方法
|
||
setOperationMode,//设置矩形是边框还是填充方法
|
||
uploadImage,//上传图帕
|
||
setLayerIndex,//设置选中元素的层级
|
||
brushList,//笔触列表
|
||
textureList,//材质列表
|
||
canvasPencilColor,//input选择颜色
|
||
canvasPencilWidth,//input选择宽度
|
||
setAllSelectWidth,//多选设置宽度
|
||
allSelectWidth,//多选设置宽度的值
|
||
colorHistoryList,//历史颜色
|
||
setColorHistory,//设置历史颜色
|
||
setPencilColor,//切换颜色执行函数 给当前矩形或者笔触设置颜色
|
||
setPencilWidth,//切换宽度执行函数 给当前矩形或者笔触设置宽度
|
||
brushworkChange,//切换笔触的回调
|
||
textureValueChange,//切换材质信息
|
||
brushworkValue,//当前笔触
|
||
textureValue,//当前材质
|
||
textFontFamilyList,
|
||
fontFamily,
|
||
textDataShow,
|
||
setFontFamily,
|
||
};
|
||
},
|
||
data(prop) {
|
||
return {
|
||
isMoible:isMoible()
|
||
};
|
||
},
|
||
computed: {
|
||
setGradient(){
|
||
return (gradient)=>{
|
||
let gradientStr = ''
|
||
gradient.gradientList.sort((a, b) => {
|
||
let aArr = a.left.split('%')[0]
|
||
let bArr = b.left.split('%')[0]
|
||
return aArr - bArr;
|
||
});
|
||
gradient.gradientList.forEach((item,index)=>{
|
||
let str = ','
|
||
if(gradient.gradientList.length == index+1)str = ''
|
||
gradientStr += `rgba(${item.rgba.r},${item.rgba.g},${item.rgba.b},${item.rgba.a}) ${item.left}${str}`
|
||
|
||
})
|
||
return `${gradientStr}`
|
||
}
|
||
|
||
}
|
||
},
|
||
watch: {
|
||
|
||
},
|
||
mounted() {},
|
||
|
||
methods: {
|
||
|
||
},
|
||
});
|
||
</script>
|
||
<style lang="less" scoped>
|
||
|
||
.generalCanvas {
|
||
flex: 1;
|
||
overflow-x: hidden;
|
||
display: flex;
|
||
margin-top: 2rem;
|
||
justify-content: space-between;
|
||
flex-direction: column;
|
||
flex: 1;
|
||
// height: 30rem;
|
||
// overflow-x: hidden;
|
||
.icon{
|
||
transition: all .3s;
|
||
}
|
||
.icon-rotate{
|
||
transform: rotate(-180deg);
|
||
}
|
||
.generalCanvas_title {
|
||
margin-bottom: .5rem;
|
||
font-size: 1.8rem;
|
||
// font-weight: 600;
|
||
// margin-top: 2rem;
|
||
padding-top: 2rem;
|
||
display: flex;
|
||
top: -1rem;
|
||
justify-content: space-between;
|
||
cursor: pointer;
|
||
position: sticky;
|
||
background: #f9fafb;
|
||
z-index: 2;
|
||
align-items: flex-start;
|
||
margin: 0 2rem;
|
||
|
||
}
|
||
.generalCanvas_intro{
|
||
margin-bottom: 1rem;
|
||
font-size: 1.6rem;
|
||
font-weight: 600;
|
||
width: 100%;
|
||
}
|
||
.generalCanvas_right,
|
||
.generalCanvas_left {
|
||
width: 100%;
|
||
height: auto;
|
||
.generalCanvas_left_tool{
|
||
margin: 0;
|
||
}
|
||
label {
|
||
display: flex;
|
||
align-items: center;
|
||
width: 23%;
|
||
div {
|
||
width: auto;
|
||
margin-right: 2rem;
|
||
white-space: nowrap;
|
||
}
|
||
input,select {
|
||
// width: 10em;
|
||
flex: 1;
|
||
overflow: hidden;
|
||
height: 4.5rem;
|
||
width: 10rem;
|
||
}
|
||
|
||
.label_select{
|
||
img{
|
||
width: 100%;
|
||
max-height: 100%;
|
||
object-fit: contain;
|
||
}
|
||
}
|
||
}
|
||
.texture{
|
||
.label_select{
|
||
img{
|
||
max-height: none;
|
||
}
|
||
}
|
||
}
|
||
.generalCanvas_left_item.closeNav{
|
||
// max-height: 1000rem;
|
||
// height: auto;
|
||
display: block;
|
||
}
|
||
}
|
||
.generalCanvas_left::-webkit-scrollbar,
|
||
.generalCanvas_right::-webkit-scrollbar{display: none;}
|
||
.generalCanvas_left {
|
||
padding-right: 1rem;
|
||
margin-right: 2rem;
|
||
// height: 7rem;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: flex-start;
|
||
position: relative;
|
||
flex-direction: row;
|
||
>.label_item{
|
||
width: 20%;
|
||
}
|
||
.generalCanvas_title {
|
||
// margin: 0 4rem;
|
||
position: relative;
|
||
.generalCanvas_left_tool_item{
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
}
|
||
}
|
||
.generalCanvas_left_item{
|
||
overflow: hidden;
|
||
transition: all .3s;
|
||
// max-height: 0;
|
||
transform: translate3d(0, 0, 0);
|
||
position: absolute;
|
||
}
|
||
.generalCanvas_left_item,.generalCanvas_imgbor,.generalCanvas_operation_bor{
|
||
background: #fff;
|
||
height: auto;
|
||
max-height: 30rem;
|
||
border: 1px solid;
|
||
display: none;
|
||
top: 7rem;
|
||
position: absolute;
|
||
}
|
||
|
||
.generalCanvas_imgbor {
|
||
// height: auto;
|
||
width: 20rem;
|
||
overflow-y: auto;
|
||
padding: 1rem;
|
||
&.generalCanvas_imgbor::-webkit-scrollbar{display: none;}
|
||
|
||
.generalCanvas_allItem {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
.generalCanvas_item {
|
||
text-align: center;
|
||
.generalCanvas_img{
|
||
position: relative;
|
||
margin-bottom: 2rem;
|
||
img {
|
||
max-width: 7rem;
|
||
max-height: 7rem;
|
||
object-fit: contain;
|
||
|
||
}
|
||
.generalCanvas_img_SR{
|
||
position: absolute;
|
||
bottom: 0;
|
||
height: 2rem;
|
||
background: rgba(0, 0, 0, 0.3);
|
||
color: #fff;
|
||
width: 100%;
|
||
text-align: center;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
|
||
}
|
||
.generalCanvas_item_colorBor{
|
||
width: 100%;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
}
|
||
.generalCanvas_item_color{
|
||
width: 8rem;
|
||
margin-bottom: 2rem;
|
||
.generalCanvas_item_BGcolor{
|
||
height: 5rem;
|
||
}
|
||
div{
|
||
// -webkit-user-select:none; /* Safari */
|
||
// -moz-user-select:none; /* Firefox */
|
||
// -ms-user-select:none; /* IE10+/Edge */
|
||
// user-select:none; /* Standard syntax */
|
||
}
|
||
}
|
||
.generalCanvas_item_dispose{
|
||
img{
|
||
max-width: 100%;
|
||
max-height: 100%;
|
||
}
|
||
}
|
||
.active{
|
||
opacity: .5;
|
||
transform: scale(.9);
|
||
}
|
||
}
|
||
}
|
||
.generalCanvas_operation_bor_item{
|
||
flex: 1;
|
||
margin-left: 8rem;
|
||
display: flex;
|
||
.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{
|
||
display: flex;
|
||
flex: 1;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
&.leftAlign{
|
||
justify-content: flex-start;
|
||
}
|
||
&.leftAlign{
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
i{
|
||
font-size: 2.5rem;
|
||
cursor: pointer;
|
||
width: 4rem;
|
||
height: 4rem;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
&.active{
|
||
border: 1px solid;
|
||
border-radius: .4rem;
|
||
}
|
||
}
|
||
.uploadImage{
|
||
width: 4rem;
|
||
height: 4rem;
|
||
input{
|
||
height: 0;
|
||
width: 0;
|
||
border: none;
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
.generalCanvas_center_box{
|
||
display: flex;
|
||
overflow: hidden;
|
||
}
|
||
.generalCanvas_center {
|
||
width: 100%;
|
||
flex: 1;
|
||
height: 100%;
|
||
overflow-y: auto;
|
||
overflow-x: hidden;
|
||
position: relative;
|
||
.editFrontBack_pencilbtn{
|
||
position: absolute;
|
||
z-index: 1;
|
||
border-radius: 50%;
|
||
border: 1px solid #000;
|
||
pointer-events: none;
|
||
transform: translate(-50%,-50%);
|
||
}
|
||
&.generalCanvas_center::-webkit-scrollbar-button:single-button{
|
||
}
|
||
&.generalCanvas_center::-webkit-scrollbar {
|
||
/* 竖轴的宽度 */
|
||
width: 2rem;
|
||
/* 横轴的高度 */
|
||
height: 1rem;
|
||
transition: all .3s;
|
||
}
|
||
/* 进度 */
|
||
&.generalCanvas_center::-webkit-scrollbar-thumb {
|
||
border-radius: 1rem;
|
||
background: #543087;
|
||
}
|
||
/* 轨道 */
|
||
&.generalCanvas_center::-webkit-scrollbar-track {
|
||
border-radius: 1rem;
|
||
background: rgba(84, 48, 135,.2);
|
||
// background: rgba(238, 238, 244, 0);
|
||
}
|
||
}
|
||
.generalCanvas_scroll{
|
||
height: 100%;
|
||
width: 2rem;
|
||
background: #d6cfe3;
|
||
border-radius: 1rem;
|
||
div{
|
||
background: #543087;
|
||
border-radius: 1rem;
|
||
width: 100%;
|
||
height: 30rem;
|
||
}
|
||
}
|
||
.generalCanvas_new_collection_review {
|
||
position: initial;
|
||
margin: 10rem auto;
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
</style>
|
||
<style lang="less">
|
||
.generalCanvas {
|
||
.ant-modal-content {
|
||
.ant-modal-body {
|
||
height: calc(65rem * 1.2);
|
||
}
|
||
}
|
||
|
||
}
|
||
.label_select_item{
|
||
img{
|
||
width: 100%;
|
||
max-height: 100%;
|
||
object-fit: contain;
|
||
}
|
||
}
|
||
</style>
|
||
<style lang="less">
|
||
.SRExport{
|
||
.ant-modal-body{
|
||
height: calc(35rem* 1.2);
|
||
}
|
||
.SRExport_img{
|
||
margin-bottom: 2rem;
|
||
flex: 1;
|
||
overflow-x: hidden;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
min-height: 12rem;
|
||
.SRExport_img_item_box{
|
||
position: relative;
|
||
margin-right: 2rem;
|
||
margin-bottom: 2rem;
|
||
input{
|
||
position: absolute;
|
||
top: .5rem;
|
||
right: .5rem;
|
||
z-index: 2;
|
||
height: 2rem;
|
||
width: 2rem;
|
||
}
|
||
}
|
||
img{
|
||
width: 10rem;
|
||
max-height: 10rem;
|
||
object-fit: contain;
|
||
text-align: center;
|
||
cursor: pointer;
|
||
&.active{
|
||
transform: scale(.8);
|
||
opacity: .6;
|
||
}
|
||
}
|
||
}
|
||
.check_all_block{
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 1.6rem;
|
||
color: #64686D;
|
||
cursor: pointer;
|
||
justify-content: flex-end;
|
||
&.check_all{
|
||
color: #1A1A1A;
|
||
.check_block{
|
||
.check_block_body{
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.check_block{
|
||
width: 2.4rem;
|
||
height: 2.4rem;
|
||
background: #EBECF4;
|
||
border: 0.1rem solid #64686D;
|
||
padding: 0.3rem;
|
||
margin-right: 0.7rem;
|
||
.check_block_body{
|
||
width: 100%;
|
||
opacity: 0;
|
||
height: 100%;
|
||
background: #343579;
|
||
}
|
||
}
|
||
}
|
||
.SRExport_operate{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
.SRExport_operate_box {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 1rem;
|
||
width: 100%;
|
||
>div {
|
||
width: 5rem;
|
||
}
|
||
.SRExport_operate_item_sclae{
|
||
width: 4rem;
|
||
height: 3rem;
|
||
border: .2rem solid rgba(0, 0, 0, 0.3);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-right: 1rem;
|
||
cursor: pointer;
|
||
border-radius: .4rem;
|
||
font-weight: 600;
|
||
&.active{
|
||
border-color: rgba(152, 139, 247);
|
||
color: rgba(152, 139, 247);
|
||
}
|
||
}
|
||
.SRExport_operate_sclae{
|
||
max-width: 15rem;
|
||
|
||
}
|
||
|
||
// input {
|
||
// // width: 10em;
|
||
// overflow: hidden;
|
||
// }
|
||
// label{
|
||
// display: flex;
|
||
// align-items: center;
|
||
// margin-right: 2rem;
|
||
// span{
|
||
// margin-right: 1rem;
|
||
// }
|
||
// }
|
||
}
|
||
}
|
||
.generalModelOperate_endBtn{
|
||
.generalModelOperate_btn_ok{
|
||
&.active{
|
||
opacity: .6;
|
||
cursor: no-drop;
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
</style> |