fix
This commit is contained in:
X1627315083
@@ -20,43 +20,35 @@
|
||||
</div> -->
|
||||
<div class="exportCanvasBox">
|
||||
<div class="exportCanvasBox_left">
|
||||
<div class="exportCanvasBox_title">Canvas Title</div>
|
||||
<div class="exportCanvasBox_title">Canvas Size</div>
|
||||
<label>
|
||||
<div>Width:</div>
|
||||
<input
|
||||
type="number"
|
||||
@input="setMaxInput('width', 500)"
|
||||
v-model="canvasWH.width"
|
||||
/>
|
||||
<input type="number" @input="setMaxInput('width', 500)" v-model="canvasWH.width"/>
|
||||
</label>
|
||||
<label>
|
||||
<div>Height:</div>
|
||||
<input
|
||||
type="number"
|
||||
@input="setMaxInput('height', 1000)"
|
||||
v-model="canvasWH.height"
|
||||
/>
|
||||
<input type="number" @input="setMaxInput('height', 10000)" v-model="canvasWH.height"/>
|
||||
</label>
|
||||
<div class="exportCanvasBox_title" @click.stop="setCloseNav()">
|
||||
<div class="exportCanvasBox_title" @click.stop="setCloseNav(0)">
|
||||
Canvas Nav
|
||||
<div
|
||||
:class="[
|
||||
'icon',
|
||||
'iconfont',
|
||||
'icon-xiala',
|
||||
closeNav?'icon-rotate':''
|
||||
closeNav==0?'icon-rotate':''
|
||||
]"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="exportCanvasBox_img" :class="{closeNav:'closeNav'}">
|
||||
<div class="exportCanvasBox_img" :class="{'closeNav' :closeNav==0}">
|
||||
<div
|
||||
class="exportCanvasBox_allItem"
|
||||
v-for="(item,key) in allBoardData"
|
||||
>
|
||||
<div v-if="item[0]" class="exportCanvasBox_intro">{{ key }}</div>
|
||||
|
||||
<div class="exportCanvasBox_item_color" v-if="key == 'colorBoards'" v-for="colorItem in item">
|
||||
<div class="exportCanvasBox_item_color" v-if="key == 'colorBoards'" v-for="colorItem in item" draggable="true" @dragstart="onDragstart(key,colorItem)">
|
||||
<img src="" alt="">
|
||||
<div class="exportCanvasBox_item_BGcolor" :style="{'background-color': 'rgb('+colorItem.rgbValue.r+','+colorItem.rgbValue.g+','+colorItem.rgbValue.b+')'}"></div>
|
||||
<div>{{colorItem.tcx}}</div>
|
||||
<div>{{colorItem.name}}</div>
|
||||
@@ -67,20 +59,50 @@
|
||||
:class="[key == 'disposeMoodboard'?'exportCanvasBox_item_dispose':'']"
|
||||
v-for="imgItem in item"
|
||||
draggable
|
||||
@dragstart="onDragstart(key)"
|
||||
@dragstart="onDragstart(key,imgItem)"
|
||||
>
|
||||
<img :src="key == 'likeDesignCollectionList'?imgItem.designOutfitUrl:imgItem.imgUrl" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="exportCanvasBox_title" @click.stop="setCloseNav(1)">
|
||||
Canvas Tool
|
||||
<div
|
||||
:class="[
|
||||
'icon',
|
||||
'iconfont',
|
||||
'icon-xiala',
|
||||
closeNav==1?'icon-rotate':''
|
||||
]"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="exportCanvasBox_center">
|
||||
<!-- <canvas ref="canvasDom" id="exportCanvas"></canvas> -->
|
||||
</div>
|
||||
<!-- <ExportNewCoolection ref="ExportNewCoolection"></ExportNewCoolection> -->
|
||||
<div class="exportCanvasBox_right">
|
||||
<div class="" @click="setExport">export</div>
|
||||
<div class="" @click="multiselect">all</div>
|
||||
<div class="exportCanvasBox_title">
|
||||
High-definition Download
|
||||
</div>
|
||||
<div @click="historyState(stateIndex - 1)">123</div>
|
||||
<div @click="historyState(stateIndex + 1)">321</div>
|
||||
<div class="exportCanvasBox_right_definition">
|
||||
<label>
|
||||
<div>Width:</div>
|
||||
<input type="number" @input="setMaxInput('width', 500)" v-model="canvasWH.width"/>
|
||||
</label>
|
||||
<label>
|
||||
<div>Height:</div>
|
||||
<input type="number" @input="setMaxInput('height', 10000)" v-model="canvasWH.height" />
|
||||
</label>
|
||||
</div>
|
||||
<div class="" @click="multiselect">all</div>
|
||||
<div class="exportCanvasBox_right_btn">
|
||||
<div class="subitOkPreviewBtn" @click="setExport">HD Export</div>
|
||||
<div class="subitOkPreviewBtn" @click="setExport">Export</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mark_loading" v-show="isShowMark">
|
||||
<a-spin size="large" />
|
||||
@@ -89,17 +111,10 @@
|
||||
</a-modal>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
defineComponent,
|
||||
computed,
|
||||
h,
|
||||
ref,
|
||||
nextTick,
|
||||
inject,
|
||||
reactive,
|
||||
onMounted,
|
||||
import {defineComponent, computed, h, ref, nextTick, inject, reactive, onMounted,
|
||||
} from "vue";
|
||||
import { Https } from "@/tool/https";
|
||||
import { multiselectJS } from "@/tool/canvasDrawing";
|
||||
import scaleImage from "@/component/HomePage/scaleImage.vue";
|
||||
import ExportNewCoolection from "@/component/HomePage/ExportNewCoolection.vue";
|
||||
import { useStore } from "vuex";
|
||||
@@ -124,7 +139,6 @@ export default defineComponent({
|
||||
});
|
||||
canvasWH.value.width = [window.innerWidth/2.4]
|
||||
canvasWH.value.width = canvasWH.value.width.map(num => Math.round(num / 100) * 100)[0];
|
||||
console.log(canvasWH.value.width);
|
||||
let sketch = computed(() => {
|
||||
return store.state.HomeStoreModule.showSketchList;
|
||||
});
|
||||
@@ -145,9 +159,16 @@ export default defineComponent({
|
||||
y: 0,
|
||||
height: 0,
|
||||
};
|
||||
let sketchGrouping = 3; //sketch分组
|
||||
let likeDesign = 4; //整体图分组
|
||||
let disposeMoodboardShow = true;
|
||||
|
||||
|
||||
let canvasState = ref([])//存放canvas操作
|
||||
let stateIndex = ref(-1)//表示撤回数量
|
||||
let isLoadCanvas = false//撤回或者反撤回false为撤回
|
||||
let init = () => {
|
||||
showUpgradePlan.value = true;
|
||||
console.log(position);
|
||||
nextTick().then(async () => {
|
||||
allBoardData.value.likeDesignCollectionList =
|
||||
likeDesignCollectionList;
|
||||
@@ -164,9 +185,18 @@ export default defineComponent({
|
||||
width: canvasWH.value.width,
|
||||
height: canvasWH.value.height,
|
||||
isDrawingMode: false, // 开启绘图模式
|
||||
// preserveObjectStacking: true,
|
||||
});
|
||||
canvasOnDrop()
|
||||
let disposeMoodboardShow = true;
|
||||
canvasOnDrop()//开启鼠标到画布事件
|
||||
setRemoveImage()//设置元素删除
|
||||
canvas.on("object:modified", ()=>{
|
||||
updateCanvasState()
|
||||
});
|
||||
canvas.on('selection:created', ()=>{
|
||||
updateCanvasState('created')
|
||||
});
|
||||
// canvas.on("object:added", updateCanvasState);
|
||||
// setCanvasOperation()//设置监听添加修改画布元素，用来做撤回功能
|
||||
let arr = [
|
||||
"disposeMoodboard",
|
||||
"moodboardFiles",
|
||||
@@ -176,8 +206,7 @@ export default defineComponent({
|
||||
"likeDesignCollectionList",
|
||||
];
|
||||
|
||||
let sketchGrouping = 3; //sketch分组
|
||||
let likeDesign = 4; //整体图分组
|
||||
|
||||
let oldKey = "";
|
||||
let margin = 20; //每个图形边距
|
||||
// arr.forEach((item,index)=>{
|
||||
@@ -185,98 +214,25 @@ export default defineComponent({
|
||||
for (const key in allBoardData.value) {
|
||||
if (item == key) {
|
||||
//循环渲染顺序
|
||||
let setImgWidth = canvasWH.value.width; //这是设置画布等宽
|
||||
let imgWidth = setImageWidth(key); //这是设置画布等宽
|
||||
let sketchGroupingItem = [];
|
||||
if (
|
||||
disposeMoodboardShow &&
|
||||
item == "disposeMoodboard" &&
|
||||
allBoardData.value[key].length != 0 &&
|
||||
allBoardData.value[key][0] != null
|
||||
) {
|
||||
//如果是mood 需要判断用户是否点击layout
|
||||
disposeMoodboardShow = false;
|
||||
}
|
||||
if (
|
||||
if (
|
||||
item == "moodboardFiles" &&
|
||||
!disposeMoodboardShow
|
||||
) {
|
||||
continue;
|
||||
}
|
||||
if (item == "printboardFiles") {
|
||||
setImgWidth = canvasWH.value.width / 8;
|
||||
}
|
||||
if (item == "sketchboardFiles") {
|
||||
setImgWidth =
|
||||
(canvasWH.value.width -
|
||||
(sketchGrouping - 1) * 20) /
|
||||
sketchGrouping;
|
||||
}
|
||||
if (item == "likeDesignCollectionList") {
|
||||
setImgWidth =
|
||||
(canvasWH.value.width -
|
||||
(likeDesign - 1) * 20) /
|
||||
likeDesign;
|
||||
}
|
||||
for (const [allItemIndex, allItem,] of allBoardData.value[key].entries()) {
|
||||
await new Promise((resolve, reject) => {
|
||||
if (key == "colorBoards") {
|
||||
var text = new fabric.Text(
|
||||
allItem.tcx,
|
||||
{
|
||||
left: 0,
|
||||
top: 60,
|
||||
fontSize: 14,
|
||||
fontFamily: "Arial",
|
||||
textAlign: "left",
|
||||
fill: "black",
|
||||
}
|
||||
);
|
||||
let text1 = new fabric.Text(
|
||||
allItem.name,
|
||||
{
|
||||
left: 0,
|
||||
top: 80,
|
||||
width: 20,
|
||||
fontSize: 14,
|
||||
fontFamily: "Arial",
|
||||
textAlign: "left",
|
||||
}
|
||||
);
|
||||
let width =
|
||||
110 > text1.width
|
||||
? 110
|
||||
: text1.width;
|
||||
var color = new fabric.Rect({
|
||||
width: width,
|
||||
height: 60,
|
||||
textAlign: "left",
|
||||
fill: `rgb(${allItem.rgbValue.r},${allItem.rgbValue.g},${allItem.rgbValue.b})`,
|
||||
});
|
||||
if (
|
||||
position.x + width >
|
||||
canvasWH.value.width ||
|
||||
oldKey != key
|
||||
) {
|
||||
position.x = 0;
|
||||
position.y += position.height;
|
||||
}
|
||||
var group = new fabric.Group(
|
||||
[color, text, text1],
|
||||
{
|
||||
left: position.x,
|
||||
top: position.y,
|
||||
width: width,
|
||||
fill: "rgb(255,255,255)",
|
||||
cornerSize: 10, // 选中时，角的大小为20
|
||||
transparentCorners: false, // 选中时，角是被填充了。true 空心；false 实心
|
||||
stroke: "#212121",
|
||||
strokeWidth: 1,
|
||||
}
|
||||
);
|
||||
// 将矩形对象添加到 canvas 中
|
||||
canvas.add(group);
|
||||
let rect = setGroup(allItem)
|
||||
if (position.x + rect.width > canvasWH.value.width || oldKey != key) {
|
||||
position.x = 0;
|
||||
position.y += position.height;
|
||||
}
|
||||
let group = setCanvasColor(position.y,position.x,rect)
|
||||
oldKey = key;
|
||||
position.x += width + margin;
|
||||
position.x += rect.width + margin;
|
||||
position.height = group.height + margin;
|
||||
resolve();
|
||||
} else {
|
||||
@@ -285,176 +241,179 @@ export default defineComponent({
|
||||
itemCanvasImg =
|
||||
allItem.designOutfitUrl;
|
||||
}
|
||||
fabric.Image.fromURL(
|
||||
itemCanvasImg,
|
||||
(img) => {
|
||||
let proportion = img.height / img.width; //计算图形宽高比例
|
||||
let scaleWH = setImgWidth / img.width; //计算放到画布上缩小倍率
|
||||
if (position.x + img.width * scaleWH > canvasWH.value.width || oldKey != key) {
|
||||
position.x = 0;
|
||||
position.y += position.height;
|
||||
}
|
||||
img.set({
|
||||
// width: setImgWidth/img.width,
|
||||
// height: canvasWH.value.height/img.height,
|
||||
left: position.x,
|
||||
top: position.y,
|
||||
scaleX:
|
||||
setImgWidth / img.width,
|
||||
scaleY:(img.width * proportion * scaleWH) / img.height,
|
||||
cornerSize: 10, // 选中时，角的大小为20
|
||||
// lockRotation:true,
|
||||
// lockScalingX:true,
|
||||
lockRotation: true,
|
||||
crossOrigin: "anonymous",
|
||||
transparentCorners: false, // 选中时，角是被填充了。true 空心；false 实心
|
||||
// cornerColor: "#a1de93", // 选中时，角的颜色是 青色
|
||||
});
|
||||
position.height = img.height * scaleWH + margin;
|
||||
if (key == "sketchboardFiles") {
|
||||
position.x +=
|
||||
img.width * scaleWH +
|
||||
margin;
|
||||
if (
|
||||
sketchGroupingItem.length >=
|
||||
3
|
||||
) {
|
||||
} else {
|
||||
sketchGroupingItem.push(
|
||||
JSON.parse(
|
||||
JSON.stringify(
|
||||
position
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
if (sketchGroupingItem.length >=3) {
|
||||
let sketchXyIndex = {
|
||||
maxIndex: 0,
|
||||
maxNum: 9999999999,
|
||||
minNum: 0,
|
||||
minIndex: 0,
|
||||
};
|
||||
sketchGroupingItem.forEach(
|
||||
(sketchItem,sketchIndex) => {
|
||||
if (sketchItem.height <sketchXyIndex.maxNum) {
|
||||
sketchXyIndex.maxNum = sketchItem.height;
|
||||
sketchXyIndex.maxIndex = sketchIndex;
|
||||
}
|
||||
if (sketchItem.height > sketchXyIndex.minNum) {
|
||||
sketchXyIndex.minNum = sketchItem.height;
|
||||
sketchXyIndex.minIndex = sketchIndex;
|
||||
}
|
||||
}
|
||||
);
|
||||
if (allBoardData.value[key].length == allItemIndex + 1) {
|
||||
position = sketchGroupingItem[sketchXyIndex.minIndex];
|
||||
} else {
|
||||
position = sketchGroupingItem[ sketchXyIndex.maxIndex];
|
||||
position.y += position.height;
|
||||
position.x -= img.width * scaleWH + margin;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
position.x += img.width * scaleWH;
|
||||
}
|
||||
img.lock_rotation = true;
|
||||
canvas.add(img);
|
||||
oldKey = key;
|
||||
resolve();
|
||||
},
|
||||
{ crossOrigin: "Anonymous" }
|
||||
);
|
||||
fabric.Image.fromURL(itemCanvasImg,(img) => {
|
||||
let scaleWH = imgWidth / img.width; //计算放到画布上缩小倍率
|
||||
if (position.x + img.width * scaleWH > canvasWH.value.width || oldKey != key) {
|
||||
position.x = 0;
|
||||
position.y += position.height;
|
||||
}
|
||||
setCanvasImage(img,key,position.x,position.y)//设置图片
|
||||
|
||||
position.height = img.height * scaleWH + margin;
|
||||
if (key == "sketchboardFiles") {
|
||||
position.x +=
|
||||
img.width * scaleWH +
|
||||
margin;
|
||||
if (sketchGroupingItem.length >= 3) {
|
||||
} else {
|
||||
sketchGroupingItem.push(JSON.parse(JSON.stringify(position)));
|
||||
}
|
||||
if (sketchGroupingItem.length >=3) {
|
||||
let sketchXyIndex = {
|
||||
maxIndex: 0,
|
||||
maxNum: 9999999999,
|
||||
minNum: 0,
|
||||
minIndex: 0,
|
||||
};
|
||||
sketchGroupingItem.forEach(
|
||||
(sketchItem,sketchIndex) => {
|
||||
if (sketchItem.height <sketchXyIndex.maxNum) {
|
||||
sketchXyIndex.maxNum = sketchItem.height;
|
||||
sketchXyIndex.maxIndex = sketchIndex;
|
||||
}
|
||||
if (sketchItem.height > sketchXyIndex.minNum) {
|
||||
sketchXyIndex.minNum = sketchItem.height;
|
||||
sketchXyIndex.minIndex = sketchIndex;
|
||||
}
|
||||
}
|
||||
);
|
||||
if (allBoardData.value[key].length == allItemIndex + 1) {
|
||||
position = sketchGroupingItem[sketchXyIndex.minIndex];
|
||||
} else {
|
||||
position = sketchGroupingItem[ sketchXyIndex.maxIndex];
|
||||
position.y += position.height;
|
||||
position.x -= img.width * scaleWH + margin;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
position.x += img.width * scaleWH;
|
||||
}
|
||||
img.lock_rotation = true;
|
||||
canvas.add(img);
|
||||
oldKey = key;
|
||||
resolve();
|
||||
},{ crossOrigin: "Anonymous" });
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
if(position.y+position.height>canvasWH.value.height){
|
||||
canvasWH.value.height = Math.floor(position.y+position.height)
|
||||
canvas.setHeight(canvasWH.value.height);
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
let setCanvasImage = (itemCanvasImg)=>{
|
||||
fabric.Image.fromURL(
|
||||
itemCanvasImg,
|
||||
(img) => {
|
||||
let proportion = img.height / img.width; //计算图形宽高比例
|
||||
let scaleWH = setImgWidth / img.width; //计算放到画布上缩小倍率
|
||||
if (position.x + img.width * scaleWH > canvasWH.value.width || oldKey != key) {
|
||||
position.x = 0;
|
||||
position.y += position.height;
|
||||
}
|
||||
img.set({
|
||||
// width: setImgWidth/img.width,
|
||||
// height: canvasWH.value.height/img.height,
|
||||
left: position.x,
|
||||
top: position.y,
|
||||
scaleX:
|
||||
setImgWidth / img.width,
|
||||
scaleY:(img.width * proportion * scaleWH) / img.height,
|
||||
cornerSize: 10, // 选中时，角的大小为20
|
||||
// lockRotation:true,
|
||||
// lockScalingX:true,
|
||||
lockRotation: true,
|
||||
crossOrigin: "anonymous",
|
||||
transparentCorners: false, // 选中时，角是被填充了。true 空心；false 实心
|
||||
// cornerColor: "#a1de93", // 选中时，角的颜色是 青色
|
||||
});
|
||||
position.height = img.height * scaleWH + margin;
|
||||
if (key == "sketchboardFiles") {
|
||||
position.x +=
|
||||
img.width * scaleWH +
|
||||
margin;
|
||||
if (
|
||||
sketchGroupingItem.length >=
|
||||
3
|
||||
) {
|
||||
} else {
|
||||
sketchGroupingItem.push(
|
||||
JSON.parse(
|
||||
JSON.stringify(
|
||||
position
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
if (sketchGroupingItem.length >=3) {
|
||||
let sketchXyIndex = {
|
||||
maxIndex: 0,
|
||||
maxNum: 9999999999,
|
||||
minNum: 0,
|
||||
minIndex: 0,
|
||||
};
|
||||
sketchGroupingItem.forEach(
|
||||
(sketchItem,sketchIndex) => {
|
||||
if (sketchItem.height <sketchXyIndex.maxNum) {
|
||||
sketchXyIndex.maxNum = sketchItem.height;
|
||||
sketchXyIndex.maxIndex = sketchIndex;
|
||||
}
|
||||
if (sketchItem.height > sketchXyIndex.minNum) {
|
||||
sketchXyIndex.minNum = sketchItem.height;
|
||||
sketchXyIndex.minIndex = sketchIndex;
|
||||
}
|
||||
}
|
||||
);
|
||||
if (allBoardData.value[key].length == allItemIndex + 1) {
|
||||
position = sketchGroupingItem[sketchXyIndex.minIndex];
|
||||
} else {
|
||||
position = sketchGroupingItem[ sketchXyIndex.maxIndex];
|
||||
position.y += position.height;
|
||||
position.x -= img.width * scaleWH + margin;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
position.x += img.width * scaleWH;
|
||||
}
|
||||
img.lock_rotation = true;
|
||||
canvas.add(img);
|
||||
oldKey = key;
|
||||
resolve();
|
||||
},
|
||||
{ crossOrigin: "Anonymous" }
|
||||
);
|
||||
let setRemoveImage = ()=>{
|
||||
let deleteObject = (eventData, transform)=> {
|
||||
var target = [transform.target];
|
||||
if(transform.target._objects){
|
||||
target = transform.target._objects
|
||||
}
|
||||
// canvas.discardActiveObject() // 丢弃当前活动的对象和触发事件。 如果fabric作为鼠标事件的结果调用该函数，则将该事件作为参数传递给自定义事件的fire函数。 当作为一个方法使用时，参数没有任何应用。
|
||||
// const sel = new fabric.ActiveSelection(canvas.getObjects(), {
|
||||
// canvas
|
||||
// })
|
||||
target.forEach((item)=>{
|
||||
var canvas = item.canvas;
|
||||
canvas.remove(item);
|
||||
})
|
||||
canvas.requestRenderAll();
|
||||
canvas.discardActiveObject() // 丢弃当前活动的对象和触发事件。 如果fabric作为鼠标事件的结果调用该函数，则将该事件作为参数传递给自定义事件的fire函数。 当作为一个方法使用时，参数没有任何应用。
|
||||
}
|
||||
const deleteIcon = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAACxAAAAsQHGLUmNAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAdBJREFUSImt1r1uU0EQBeDPFh1pgBQEEwFVAg9BROhCAh1FAg1gkMA8DA0oKOEB3IEIRQgF4SEQBIUC6ENSGgPFXaPx+udeSxxppPXOzJnZ8e7MrRmPWdzANZxPv+EbvmILL/G9hGcADayjgz8l0kUb56qSX8dhBeJcDrFSRv44ZRQdt3EPczieZB5NvB1ymta4zCP5J1yucOIFfM6CDJykob8s73GiAnkPJ7Eb/H9iJhpsZJlPQh6D7AWe9Z5iFr+CIpalhjWspnXZ/pXA01FURkv/HxpxK+g2UE+yGfZXM5+doHt4DEtB2R5dAXdD9nfG2LVxNa2XKGreiziXGefZ5rKZbCLmg/4jHIWNqSEZ1fC0IrnE0bM5qqdFGWoV92RBf/P/S3RRVqI3YaOZGd8eQpgHXMt8HgTd67qi5fZwMzOO5XuREmim9ShEji04q78tLwSDSR/aYuD599DgeVDsY3pMhqOQt4pnUXlGf7PbTQ5VcQofgv8BTudGK/rb9Z6it5RhEV+CX1cxYoeiZXDg7OC+4vpNJbmkuC3vMtsuHpVltKzo55OOzINxmeeYxhPVhn5H0ftnhhGNeu49NBSjdBkX9H+27Cvu+Sv8GEXwF9+O3b1zwZqdAAAAAElFTkSuQmCC"
|
||||
// 创建删除图片元素
|
||||
let deleteImg = document.createElement('img')
|
||||
deleteImg.src = deleteIcon
|
||||
function renderIcon(icon) {
|
||||
return function (ctx, left, top, styleOverride, fabricObject) {
|
||||
var size = this.cornerSize;
|
||||
ctx.save();
|
||||
ctx.translate(left, top);
|
||||
ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle));
|
||||
ctx.drawImage(icon, -size/3, -size/3, size/1.5, size/1.5);
|
||||
ctx.restore();
|
||||
}
|
||||
}
|
||||
// 删除按钮控件
|
||||
fabric.Object.prototype.controls.deleteControl = new fabric.Control({
|
||||
x: 0.5,
|
||||
y: -0.5,
|
||||
offsetY: -16,
|
||||
offsetX: 16,
|
||||
cursorStyle: 'pointer',
|
||||
mouseUpHandler: deleteObject,
|
||||
render: renderIcon(deleteImg),
|
||||
cornerSize: 24
|
||||
})
|
||||
}
|
||||
//设置画布监听修改添加事件，用来做撤回功能
|
||||
let updateCanvasState = (str) =>{
|
||||
if (!isLoadCanvas) {
|
||||
const canvasAsJson = JSON.stringify(canvas.toJSON());
|
||||
if(str == 'created'){
|
||||
if(canvasState.value.length == 0){
|
||||
canvasState.value.push(canvasAsJson);
|
||||
}
|
||||
}else{
|
||||
canvasState.value.push(canvasAsJson);
|
||||
}
|
||||
stateIndex.value = canvasState.value.length - 1;
|
||||
} else {
|
||||
isLoadCanvas = false;
|
||||
}
|
||||
}
|
||||
let setImageWidth = (key)=>{
|
||||
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 == "printboardFiles") {
|
||||
imgWidth = canvasWH.value.width / 8;
|
||||
}
|
||||
if (key == "sketchboardFiles"||key == 'moodboardFiles') {
|
||||
imgWidth =
|
||||
(canvasWH.value.width -
|
||||
(sketchGrouping - 1) * 20) /
|
||||
sketchGrouping;
|
||||
}
|
||||
if (key == "likeDesignCollectionList") {
|
||||
imgWidth =
|
||||
(canvasWH.value.width -
|
||||
(likeDesign - 1) * 20) /
|
||||
likeDesign;
|
||||
}
|
||||
return imgWidth
|
||||
}
|
||||
let setCanvasImage = (img,key,left,top)=>{
|
||||
let proportion = img.height / img.width; //计算图形宽高比例
|
||||
let imgWidth = setImageWidth(key)
|
||||
let scaleWH = imgWidth / img.width; //计算放到画布上缩小倍率
|
||||
img.set({
|
||||
// width: imgWidth/img.width,
|
||||
// height: canvasWH.value.height/img.height,
|
||||
left,
|
||||
top,
|
||||
scaleX:
|
||||
imgWidth / img.width,
|
||||
scaleY:(img.width * proportion * scaleWH) / img.height,
|
||||
cornerSize: 10, // 选中时，角的大小为20
|
||||
// lockRotation:true,
|
||||
// lockScalingX:true,
|
||||
lockRotation: true,
|
||||
transparentCorners: false, // 选中时，角是被填充了。true 空心；false 实心
|
||||
// cornerColor: "#a1de93", // 选中时，角的颜色是 青色
|
||||
});
|
||||
}
|
||||
|
||||
//设置导出
|
||||
let setExport = async () => {
|
||||
var imageDataURL = canvas.toDataURL({
|
||||
@@ -501,17 +460,7 @@ export default defineComponent({
|
||||
}
|
||||
let dataList = [];
|
||||
likeDesignCollectionList.value.forEach((item) => {
|
||||
// let nameTail = item?.designOutfitUrl
|
||||
// ?.split(".")
|
||||
// .pop()
|
||||
// .split("?")
|
||||
// .shift();
|
||||
// let data = {
|
||||
// imgUrl: item.designOutfitUrl,
|
||||
// name: "result" + index + "." + nameTail,
|
||||
// };
|
||||
dataList.push(item.designItemId);
|
||||
// img.push(data);
|
||||
index++;
|
||||
});
|
||||
let mannequinList = [];
|
||||
@@ -589,7 +538,11 @@ export default defineComponent({
|
||||
// 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) {
|
||||
@@ -599,12 +552,19 @@ export default defineComponent({
|
||||
canvas.setWidth(canvasWH.value.width);
|
||||
};
|
||||
|
||||
let closeNav = ref(false)
|
||||
let setCloseNav = ()=>{
|
||||
closeNav.value = !closeNav.value
|
||||
let closeNav = ref(0)
|
||||
let setCloseNav = (num)=>{
|
||||
if(closeNav.value == num){
|
||||
closeNav.value = -1
|
||||
}else{
|
||||
closeNav.value = num
|
||||
}
|
||||
}
|
||||
|
||||
function multiselect() {
|
||||
// let multiselect = ()=>{
|
||||
// console.log(canvas);
|
||||
// multiselectJS(canvas)
|
||||
// }
|
||||
function multiselect() {//获取整体宽高
|
||||
canvas.discardActiveObject() // 丢弃当前活动的对象和触发事件。 如果fabric作为鼠标事件的结果调用该函数，则将该事件作为参数传递给自定义事件的fire函数。 当作为一个方法使用时，参数没有任何应用。
|
||||
const sel = new fabric.ActiveSelection(canvas.getObjects(), {
|
||||
canvas
|
||||
@@ -621,50 +581,110 @@ export default defineComponent({
|
||||
}
|
||||
|
||||
}
|
||||
let currentType = ref()
|
||||
let onDragstart = (type)=>{
|
||||
console.log(type);
|
||||
currentType.value = type
|
||||
let currentType = ref({
|
||||
type:'',
|
||||
data:'',
|
||||
})
|
||||
let onDragstart = (type,imgItem)=>{
|
||||
currentType.value.type = type
|
||||
currentType.value.data = imgItem
|
||||
}
|
||||
let canvasOnDrop = ()=>{
|
||||
canvas.on('drop', function(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) {
|
||||
case 'disposeMoodboard':
|
||||
createRect(pointerVpt.y, pointerVpt.x)
|
||||
break
|
||||
case 'circle':
|
||||
createCircle(pointerVpt.y, pointerVpt.x)
|
||||
break
|
||||
case 'img':
|
||||
createImg(pointerVpt.y, pointerVpt.x)
|
||||
break
|
||||
}
|
||||
// 创建完元素，把当前操作的元素类型设置回 null
|
||||
currentType.value = null
|
||||
})
|
||||
|
||||
// 创建矩形
|
||||
function createRect(top, left) {
|
||||
canvas.add(new fabric.Rect({
|
||||
top,
|
||||
left,
|
||||
width: 60,
|
||||
height: 60,
|
||||
fill: 'pink'
|
||||
}))
|
||||
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':
|
||||
createRect(pointerVpt.y, pointerVpt.x,currentType.value.type)
|
||||
break
|
||||
default :
|
||||
createRect(pointerVpt.y, pointerVpt.x,currentType.value.type)
|
||||
break
|
||||
}
|
||||
// 创建完元素，把当前操作的元素类型设置回 null
|
||||
currentType.value.type = null
|
||||
currentType.value.data = null
|
||||
})
|
||||
}
|
||||
let setGroup = (data)=>{
|
||||
var text = new fabric.Text(data.tcx,{
|
||||
left: 0,
|
||||
top: 60,
|
||||
fontSize: 14,
|
||||
fontFamily: "Arial",
|
||||
textAlign: "left",
|
||||
fill: "black",
|
||||
});
|
||||
let text1 = new fabric.Text(data.name,{
|
||||
left: 0,
|
||||
top: 80,
|
||||
width: 20,
|
||||
fontSize: 14,
|
||||
fontFamily: "Arial",
|
||||
textAlign: "left",
|
||||
});
|
||||
let width = 110 > text1.width ? 110 : text1.width;
|
||||
var color = new fabric.Rect({
|
||||
width: width,
|
||||
height: 60,
|
||||
textAlign: "left",
|
||||
fill: `rgb(${data.rgbValue.r},${data.rgbValue.g},${data.rgbValue.b})`,
|
||||
});
|
||||
let rect = {text,text1,color,width}
|
||||
return rect
|
||||
}
|
||||
let setCanvasColor = (top,left,rect)=>{
|
||||
var group = new fabric.Group([rect.color, rect.text, rect.text1],{
|
||||
left,
|
||||
top,
|
||||
width: rect.width,
|
||||
fill: "rgb(255,255,255)",
|
||||
cornerSize: 10, // 选中时，角的大小为20
|
||||
transparentCorners: false, // 选中时，角是被填充了。true 空心；false 实心
|
||||
stroke: "#212121",
|
||||
strokeWidth: 1,
|
||||
});
|
||||
// 将矩形对象添加到 canvas 中
|
||||
|
||||
canvas.add(group);
|
||||
return group
|
||||
}
|
||||
// 创建矩形
|
||||
let createRect = (top, left,key)=> {
|
||||
let itemCanvasImg = currentType.value.data.imgUrl
|
||||
if(key == 'likeDesignCollectionList'){
|
||||
itemCanvasImg = currentType.value.data.designOutfitUrl;
|
||||
}
|
||||
fabric.Image.fromURL(itemCanvasImg,(img) => {
|
||||
setCanvasImage(img,key,left,top)//设置图片
|
||||
canvas.add(img);
|
||||
},{ crossOrigin: "Anonymous" });
|
||||
}
|
||||
//撤回
|
||||
let historyState = (index)=> {
|
||||
if(index<=0){
|
||||
index = 0
|
||||
}else if (index >canvasState.value.length){
|
||||
index = canvasState.value.length-1
|
||||
}
|
||||
isLoadCanvas = true;
|
||||
canvas.loadFromJSON(canvasState.value[index], () => {
|
||||
canvas.renderAll();
|
||||
stateIndex.value = index;
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(() => {});
|
||||
|
||||
return {
|
||||
@@ -680,6 +700,8 @@ export default defineComponent({
|
||||
setCloseNav,
|
||||
multiselect,
|
||||
onDragstart,
|
||||
historyState,
|
||||
stateIndex,
|
||||
};
|
||||
},
|
||||
data(prop) {
|
||||
@@ -700,7 +722,9 @@ export default defineComponent({
|
||||
// }
|
||||
// },
|
||||
},
|
||||
methods: {},
|
||||
methods: {
|
||||
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@@ -757,8 +781,8 @@ export default defineComponent({
|
||||
.icon{
|
||||
transition: all .3s;
|
||||
}
|
||||
&.icon-rotate{
|
||||
transform: rotate(90deg);
|
||||
.icon-rotate{
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
}
|
||||
.exportCanvasBox_intro{
|
||||
@@ -772,11 +796,11 @@ export default defineComponent({
|
||||
width: 25rem;
|
||||
height: 100%;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.exportCanvasBox_left {
|
||||
label {
|
||||
label {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
div {
|
||||
width: 5rem;
|
||||
}
|
||||
@@ -784,13 +808,21 @@ export default defineComponent({
|
||||
width: 10em;
|
||||
}
|
||||
}
|
||||
.exportCanvasBox_img.closeNav{
|
||||
max-height: 1000rem;
|
||||
}
|
||||
}
|
||||
.exportCanvasBox_left::-webkit-scrollbar,
|
||||
.exportCanvasBox_right::-webkit-scrollbar{display: none;}
|
||||
.exportCanvasBox_left {
|
||||
|
||||
.exportCanvasBox_img {
|
||||
transition: .3s all;
|
||||
transition: all .3s;
|
||||
overflow: hidden;
|
||||
height: auto;
|
||||
&.closeNav{
|
||||
// height: 0;
|
||||
}
|
||||
// height: auto;
|
||||
max-height: 0;
|
||||
transform: translate3d(0, 0, 0);
|
||||
|
||||
.exportCanvasBox_allItem {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@@ -811,6 +843,12 @@ export default defineComponent({
|
||||
.exportCanvasBox_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 */
|
||||
}
|
||||
}
|
||||
.exportCanvasBox_item_dispose{
|
||||
img{
|
||||
@@ -821,6 +859,23 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
}
|
||||
.exportCanvasBox_right{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
.exportCanvasBox_right_definition{
|
||||
// display: flex;
|
||||
flex: 1;
|
||||
}
|
||||
.exportCanvasBox_right_btn{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.subitOkPreviewBtn{
|
||||
position: initial;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.exportCanvasBox_center {
|
||||
height: 100%;
|
||||
overflow-x: hidden;
|
||||
|
||||
@@ -36,7 +36,7 @@
|
||||
<div
|
||||
class="trialApproval button_second credits hideChecked"
|
||||
>
|
||||
Credits :
|
||||
Credits:
|
||||
<span :title="credits">
|
||||
<!-- <div>{{ String(credits.value[credits.value.legnth-1]) }}</div> -->
|
||||
<div class="credits_item" v-for="item in String(credits)" :style="{'transform': 'translateY('+item*-100+'%)'}">
|
||||
|
||||
Reference in New Issue
Block a user