aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

push Develop

Browse Source
This commit is contained in:
X1627315083
2024-06-17 09:39:01 +08:00
parent c93483e36f
commit 363b880276
55 changed files with 5880 additions and 1359 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -42,7 +42,7 @@
>
</div>
</div>
<div class="exportCanvasBox_img exportCanvasBox_left_item" :class="{'closeNav' :closeNav.nav}">
<div class="exportCanvasBox_img exportCanvasBox_left_item" :class="{'closeNav':closeNav.nav}">
<div
class="exportCanvasBox_allItem"
v-for="(item,key) in allBoardData"
@@ -54,23 +54,26 @@
<div v-if="item[0] && key == 'colorBoards'" class="exportCanvasBox_intro">Color</div>
<div v-if="item[0] && key == 'sketchboardFiles'" class="exportCanvasBox_intro">Sketch</div>
<div v-if="item[0] && key == 'likeDesignCollectionList'" class="exportCanvasBox_intro">Selected Design</div>
<div class="exportCanvasBox_item_color" v-if="key == 'colorBoards'" v-for="colorItem in item" :class="{active:colorItem.checked}" draggable="true" @dragstart="onDragstart(key,colorItem)" @click="isMoible?setDragstart(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>
<div v-if="item[0] && key == 'likePorductImg'" class="exportCanvasBox_intro">Selected Product</div>
<div class="exportCanvasBox_item_color" v-if="key == 'colorBoards'" v-for="colorItem in item" :class="{active:colorItem.upScaleChecked}" draggable="true" @dragstart="onDragstart(key,colorItem)" @click="isMoible?setDragstart(key,colorItem):''">
<div class="color_content" v-if="colorItem.gradient" :style="{height:'10rem','background-image':colorItem?.gradient?`linear-gradient(${colorItem?.gradient.angle}deg,${setGradient(colorItem?.gradient)}`:'none'}"></div>
<div v-if="!colorItem.gradient">
<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>
</div>
</div>
<div
class="exportCanvasBox_item"
v-for="imgItem in item"
:class="[key == 'disposeMoodboard'?'exportCanvasBox_item_dispose':'',imgItem?.checked?'active':'']"
:class="[key == 'disposeMoodboard'?'exportCanvasBox_item_dispose':'',imgItem?.upScaleChecked?'active':'']"
draggable
@dragstart="onDragstart(key,imgItem)"
@click="isMoible?setDragstart(key,imgItem):''"
>
<div class="exportCanvasBox_img">
<!-- <div v-if="key == 'likeDesignCollectionList'">{{ imgItem.designOutfitUrl }}</div> -->
<img :src="key == 'likeDesignCollectionList'?imgItem?.designOutfitUrl:imgItem?.imgUrl" alt="" />
</div>
</div>
@@ -192,6 +195,8 @@
</div>
<div class="exportCanvasBox_left_btn">
<div class="subitOkPreviewBtn" :class="{active:allBoardData.printboardFiles.length<=0}" :title="allBoardData.printboardFiles.length<=0?$t('exportModel.jsContent2'):''" @click="setHDExport">{{ $t('exportModel.HDExport') }}</div>
<div class="subitOkPreviewBtn" @click="setSubmit">Save</div>
<div class="subitOkPreviewBtn" @click="setShare">Share</div>
<div class="subitOkPreviewBtn Guide_1_32" @click="setExport">{{ $t('exportModel.Export') }}</div>
</div>
</div>
@@ -273,6 +278,7 @@
<div class="generalModelOperate_btn_ok" :class="[credits < (allExportSR.filter(item=> item.checked ).length*5)?'active':'']" @click="setExportSR">OK</div>
</div>
</a-modal>
<publish ref="publish"></publish>
</a-modal>
</template>
<script>
@@ -289,14 +295,16 @@ import { message, Modal } from "ant-design-vue";
import domTurnImg from '@/tool/domTurnImg'
import { openGuide,driverObj__ } from "@/tool/guide";
const FileSaver = require("file-saver");
import { exportSele,JSRectUpdata,JSchangeType,JScanvasMouseDown,JScanvasMouseMove,JScreateCheck,JSSetTexture } from "@/tool/canvasDrawing";
import { exportSele,JSRectUpdata,JSchangeType,JScanvasMouseDown,JScanvasMouseMove,JScreateCheck,JSSetTexture,JSSetRemoveImage } from "@/tool/canvasDrawing";
import { useI18n } from "vue-i18n";
import {isMoible} from '@/tool/util'
import {isMoible,calculateGradientCoordinate,base64ToFile} from '@/tool/util'
import publish from "@/component/WorksPage/publish.vue";
export default defineComponent({
components: {
scaleImage,
ExportNewCoolection,
publish,
},
props: ["msg", "sketchCatecoryList"],
setup(props,{emit}) {
@@ -314,6 +322,7 @@ export default defineComponent({
height: 100,
});
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(() => {
@@ -326,7 +335,7 @@ export default defineComponent({
let likeDesignCollectionList = computed(() => {
return store.state.HomeStoreModule.likeDesignCollectionList;
});
let isShowMark = false;
let isShowMark = ref(false);
// let allImage = Object.assign(allBoardData.value,{likeDesignCollectionList:likeDesignCollectionList.value})
let position = {
//设置每个图形位置的初始值
@@ -343,15 +352,19 @@ export default defineComponent({
let reverseCanvasState = ref([])//存放canvas操作
let normalCanvasState = ref([])//存放canvas操作
let isLoadCanvas = false//撤回或者反撤回false为撤回
let init = () => {
let userlikeGroupId = 0
let beenPublished = 0
let init = (productData) => {
beenPublished = productData.beenPublished
userlikeGroupId = productData.userlikeGroupId
canvasWH.value.height = 100
normalCanvasState.value = []
reverseCanvasState.value = []
showUpgradePlan.value = true;
allBoardData.value.likeDesignCollectionList =
likeDesignCollectionList;
allBoardData.value[productData.key] = productData.imgList;
nextTick().then(async () => {
let exportCanvasBoxCanvas = document.querySelector('.exportCanvasBox_center')
canvasWH.value.width = exportCanvasBoxCanvas.offsetWidth - 10
@@ -369,7 +382,12 @@ export default defineComponent({
});
brushIndicator = clearBrushIndicator()
canvasOnDrop()//开启鼠标到画布事件
setRemoveImage()//设置元素删除
if(!fabric.Object.prototype.controls.deleteControl){//设置元素删除
JSSetRemoveImage(deleteObject)
}else{
fabric.Object.prototype.controls.deleteControl.mouseUpHandler = deleteObject
}
// setRemoveImage()//设置元素删除
canvas.on("object:modified", ()=>{
updateCanvasState()
});
@@ -411,117 +429,138 @@ export default defineComponent({
"colorBoards",
"sketchboardFiles",
"likeDesignCollectionList",
productData.key,
];
let oldKey = "";
let margin = 20; //每个图形边距
let maxHeight = 0
let sketchXy = {x:0,y:0}
let data = {
userLikeGroupId:userlikeGroupId
}
isShowMark.value = true
let oldExportCanvas = await new Promise((resolve, reject) => {
Https.axiosPost(Https.httpUrls.exportSearch, data)
.then((rv) => {
resolve(rv)
isShowMark.value = false
})
.catch((rv) => {
resolve(null)
isShowMark.value = false
});
})
// arr.forEach((item,index)=>{
for (const item of arr) {
for (const key in allBoardData.value) {
if (item == key) {
//循环渲染顺序
let imgWidth = setImageWidth(key); //这是设置画布等宽
let sketchGroupingItem = [];
if (
item == "moodboardFiles" &&
!disposeMoodboardShow
) {
continue;
}
for (const [allItemIndex, allItem,] of allBoardData.value[key].entries()) {
await new Promise((resolve, reject) => {
if(!allItem){
resolve()
}
maxHeight = position.y + position.height>maxHeight?position.y +position.height:maxHeight
if (key == "colorBoards") {
let rect = setGroup(allItem)
if (position.x + rect.width > canvasWH.value.width || oldKey != key) {
position.x = 0;
position.y = maxHeight;
if(oldExportCanvas){
canvasWH.value.height = oldExportCanvas.canvasHeight
canvas.setHeight(canvasWH.value.height);
canvas.loadFromJSON(oldExportCanvas, () => {});
}else{
for (const item of arr) {
for (const key in allBoardData.value) {
if (item == key) {
//循环渲染顺序
let imgWidth = setImageWidth(key); //这是设置画布等宽
let sketchGroupingItem = [];
if (
item == "moodboardFiles" &&
!disposeMoodboardShow
) {
continue;
}
for (const [allItemIndex, allItem,] of allBoardData.value[key].entries()) {
await new Promise((resolve, reject) => {
if(!allItem){
resolve()
}
let group = setCanvasColor(position.y,position.x,rect)
oldKey = key;
position.x += rect.width + margin;
position.height = group.height + margin;
resolve();
} else {
let itemCanvasImg = allItem.imgUrl;
if (key == "likeDesignCollectionList") {
itemCanvasImg =
allItem.designOutfitUrl;
}
fabric.Image.fromURL(itemCanvasImg,(img) => {
let scaleWH = imgWidth / img.width; //计算放到画布上缩小倍率
if(key == "sketchboardFiles"){
if(allItemIndex == 0){
position.x = 0;
position.y = maxHeight;
}
}else{
if (position.x + img.width * scaleWH > canvasWH.value.width || oldKey != key) {
position.x = 0;
position.y = maxHeight;
}
maxHeight = position.y + position.height>maxHeight?position.y +position.height:maxHeight
if (key == "colorBoards") {
let rect = setGroup(allItem)
if (position.x + rect.width > canvasWH.value.width || oldKey != key) {
position.x = 0;
position.y = maxHeight;
}
console.log(allItem,key);
setCanvasImage(img,key,position.x,position.y,allItem)//设置图片
position.height = img.height * scaleWH + margin;
if (key == "sketchboardFiles") {
if (sketchGroupingItem.length <3) {
sketchGroupingItem.push(JSON.parse(JSON.stringify(position)));
}
if (sketchGroupingItem.length >2) {
let sketchXyIndex = {
maxIndex: 0,
maxNum: 0,
minNum: 999999,
minIndex: 0,
};
sketchGroupingItem.forEach(
(sketchItem,sketchIndex) => {
if (sketchItem.y + sketchItem.height < sketchXyIndex.minNum) {
// console.log(sketchItem.x,sketchItem.y);
sketchXyIndex.minNum = sketchItem.y + sketchItem.height
sketchXyIndex.minIndex = sketchIndex;
}
if (sketchItem.y + sketchItem.height > sketchXyIndex.maxNum) {
sketchXyIndex.maxNum = sketchItem.y + sketchItem.height
sketchXyIndex.maxIndex = sketchIndex;
}
}
);
sketchGroupingItem[sketchXyIndex.minIndex].y = sketchXyIndex.minNum
// sketchGroupingItem[sketchXyIndex.maxIndex].y = sketchXyIndex.maxNum
if (allBoardData.value[key].length == allItemIndex + 1) {
maxHeight = sketchXyIndex.maxNum
} else {
position = sketchGroupingItem[sketchXyIndex.minIndex];
let group = setCanvasColor(position.y,position.x,rect)
oldKey = key;
position.x += rect.width + margin;
position.height = group.height + margin;
resolve();
} else {
let itemCanvasImg = allItem.imgUrl;
if (key == "likeDesignCollectionList") {
itemCanvasImg =
allItem.designOutfitUrl;
}
fabric.Image.fromURL(itemCanvasImg,(img) => {
let scaleWH = imgWidth / img.width; //计算放到画布上缩小倍率
if(key == "sketchboardFiles"){
if(allItemIndex == 0){
position.x = 0;
position.y = maxHeight;
}
}else{
if (position.x + img.width * scaleWH > canvasWH.value.width || oldKey != key) {
position.x = 0;
position.y = maxHeight;
}
}
}
if(key == "sketchboardFiles" && sketchGroupingItem.length >2){
}else{
position.x += img.width * scaleWH + margin;
}
img.lock_rotation = true;
canvas.add(img);
oldKey = key;
// setTimeout(() => {
resolve()
// }, 1000);
},{ crossOrigin: "Anonymous" });
}
});
}
}
}
if(position.y+position.height>canvasWH.value.height){
canvasWH.value.height = Math.floor(position.y+position.height)
canvas.setHeight(canvasWH.value.height);
setCanvasImage(img,key,position.x,position.y,allItem)//设置图片
position.height = img.height * scaleWH + margin;
if (key == "sketchboardFiles") {
if (sketchGroupingItem.length <3) {
sketchGroupingItem.push(JSON.parse(JSON.stringify(position)));
}
if (sketchGroupingItem.length >2) {
let sketchXyIndex = {
maxIndex: 0,
maxNum: 0,
minNum: 999999,
minIndex: 0,
};
sketchGroupingItem.forEach(
(sketchItem,sketchIndex) => {
if (sketchItem.y + sketchItem.height < sketchXyIndex.minNum) {
sketchXyIndex.minNum = sketchItem.y + sketchItem.height
sketchXyIndex.minIndex = sketchIndex;
}
if (sketchItem.y + sketchItem.height > sketchXyIndex.maxNum) {
sketchXyIndex.maxNum = sketchItem.y + sketchItem.height
sketchXyIndex.maxIndex = sketchIndex;
}
}
);
sketchGroupingItem[sketchXyIndex.minIndex].y = sketchXyIndex.minNum
// sketchGroupingItem[sketchXyIndex.maxIndex].y = sketchXyIndex.maxNum
if (allBoardData.value[key].length == allItemIndex + 1) {
maxHeight = sketchXyIndex.maxNum
} else {
position = sketchGroupingItem[sketchXyIndex.minIndex];
}
}
}
if(key == "sketchboardFiles" && sketchGroupingItem.length >2){
}else{
position.x += img.width * scaleWH + margin;
}
img.lock_rotation = true;
canvas.add(img);
oldKey = key;
// setTimeout(() => {
resolve()
// }, 1000);
},{ crossOrigin: "Anonymous" });
}
});
}
}
}
if(position.y+position.height>canvasWH.value.height){
canvasWH.value.height = Math.floor(position.y+position.height)
canvas.setHeight(canvasWH.value.height);
}
}
}
}
updateCanvasState('')//加载完成后记录一下
if(driver__.value.driver){
driverObj__.moveNext()
@@ -554,34 +593,7 @@ export default defineComponent({
// canvas.renderAll(); // 重新渲染 Canvas
updateCanvasState('remove')
}
let setRemoveImage = ()=>{
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 setImageWidth = (key)=>{
let imgWidth = canvasWH.value.width; //这是设置画布等宽
@@ -594,7 +606,9 @@ export default defineComponent({
//如果是mood 需要判断用户是否点击layout
disposeMoodboardShow = false;
}
if(key == 'upImgFiles'){
imgWidth = canvasWH.value.width / 4;
}
if (key == "printboardFiles") {
imgWidth = canvasWH.value.width / 8;
}
@@ -604,7 +618,7 @@ export default defineComponent({
(sketchGrouping - 1) * 20) /
sketchGrouping;
}
if (key == "likeDesignCollectionList") {
if (key == "likeDesignCollectionList" || key == 'likePorductImg') {
imgWidth =
(canvasWH.value.width -
(likeDesign - 1) * 20) /
@@ -614,23 +628,24 @@ export default defineComponent({
}
let setCanvasImage = (img,key,left,top,data)=>{
// data
console.log(data);
let imgId = 0
let designType = ''//表示收藏或者generate
let level1Type = ''//表示sketch或者print
if(key == 'disposeMoodboard'){
imgId = data.id
}else if(key == 'moodboardFiles'){
}else if(key == 'sketchboardFiles'){
}else if(key == 'printboardFiles'){
}else if(key == 'likeDesignCollectionList'){
let minioUrl = ''//表示收藏或者generate
if(key == 'likeDesignCollectionList'){
imgId = data.designOutfitId
minioUrl = data.url
}else if(key == 'upImgFiles'){
imgId = data
minioUrl = data.url
}else if(key == 'likePorductImg'){
imgId = data.id
}else if(key == 'disposeMoodboard'){
let url = data.imgUrl.split('?')[0]
var match = url.match(/:(\d+)\/(.*)/);
minioUrl = match[2]
console.log(match[2]);
// data.imgUrl
}else{
minioUrl = data.minIOPath?data.minIOPath:data.resData.minIOPath
}
// let id =
let proportion = img.height / img.width; //计算图形宽高比例
@@ -641,6 +656,8 @@ export default defineComponent({
// height: canvasWH.value.height/img.height,
left,
top,
imgId,
minioUrl,
scaleX:
imgWidth / img.width,
scaleY:(img.width * proportion * scaleWH) / img.height,
@@ -684,6 +701,10 @@ export default defineComponent({
if (key == "likeDesignCollectionList") {
data.imgUrl = item.designOutfitUrl;
data.name = "result" + index + "." + data.imgUrl.split(".").pop().split("?").shift();;
}
if (key == "likePorductImg") {
data.imgUrl = item.designOutfitUrl;
data.name = "porduct" + index + "." + data.imgUrl.split(".").pop().split("?").shift();;
}
img.push(data);
index++;
@@ -746,17 +767,18 @@ export default defineComponent({
zip.generateAsync({ type: "blob" }).then((content) => {
// 生成二进制流
FileSaver.saveAs(content, "DesignFiles"); // 利用file-saver保存文件 自定义文件名
isShowMark = false;
isShowMark.value = false;
});
if(driver__.value.driver){
driverObj__.moveNext()
}
setSubmit()//导出的时候保存
initAligningGuidelines(canvas,true)
})
.catch((res) => {
// message.warning(t('HomeView.jsContent3'));
isShowMark = false;
isShowMark.value = false;
initAligningGuidelines(canvas,true)
});
};
@@ -781,7 +803,7 @@ export default defineComponent({
operation.value = 'fill'
},
// onCancel(){
// _this.isShowMark = false
// _this.isShowMark.value = false
// resolve(false)
// }
});
@@ -842,11 +864,11 @@ export default defineComponent({
let present = {}
let setDragstart = (type,imgItem)=>{
currentType.value.type = type
present.checked = false
present.upScaleChecked = false
present = {}
if(imgItem.checked){
if(imgItem.upScaleChecked){
}else{
imgItem.checked = true
imgItem.upScaleChecked = true
present = imgItem
}
currentType.value.data = imgItem
@@ -881,34 +903,82 @@ export default defineComponent({
})
}
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}
let rect
if(data.gradient){
let colorStops = []
data.gradient.gradientList.forEach(item=>{
let obj = {
offset:item.left.split('%')[0]/100,
color:`rgba(${item.rgba.r},${item.rgba.g},${item.rgba.b},${item.rgba.a})`
}
colorStops.push(obj)
})
let { x0, y0, x1, y1 } = calculateGradientCoordinate(100,120,data.gradient.angle)
let linear = new fabric.Gradient({
type: 'linear', // 线性渐变
// coords: { x1: 0, y1: 0, x2: 200, y2: 0 }, // 渐变方向
coords: { x1:x0, y1:y0, x2:x1, y2:y1 }, // 渐变方向
colorStops: colorStops,
})
var color = new fabric.Rect({
top:0,
left:0,
width: 110,
height: 130,
textAlign: "left",
fill: linear // 设置渐变填充
// fill: `rgb(${data.rgbValue.r},${data.rgbValue.g},${data.rgbValue.b})`,
});
var text = new fabric.Text('',{
left: 0,
top: 0,
fontSize: 0,
fontFamily: "Arial",
textAlign: "left",
fill: "black",
});
let text1 = new fabric.Text('',{
left: 0,
top: 0,
width: 20,
fontSize: 0,
fontFamily: "Arial",
textAlign: "left",
});
rect = {text,text1,color,width:110}
}else{
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})`,
});
rect = {text,text1,color,width}
}
return rect
}
let setCanvasColor = (top,left,rect)=>{
var group = new fabric.Group([rect.color, rect.text, rect.text1],{
let group
group = new fabric.Group([rect.color,rect.text,rect.text1],{
left,
top,
width: rect.width,
@@ -922,12 +992,13 @@ export default defineComponent({
// 创建矩形
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)//设置图片
setCanvasImage(img,key,left,top,data)//设置图片
canvas.add(img);
resolve()
},{ crossOrigin: "Anonymous" });
@@ -937,10 +1008,6 @@ export default defineComponent({
//设置画布监听修改添加事件，用来做撤回功能
let updateCanvasState = (str) =>{
const canvasAsJson = JSON.stringify(canvas.toJSON());
console.log(canvas.toJSON());
var json = canvas.toJSON(['aaaID']);
const d = canvas.toObject(['myFabricType1', 'myFabricType2'])
console.log(json,d);
if(str == 'loadingCompleted'){
// reverseCanvasState.value.push(canvasAsJson);
}
@@ -1030,7 +1097,6 @@ export default defineComponent({
// 检查是否鼠标离开了画布
// if (x < 0 || x > canvas.width || y < 0 || y > canvas.height) {
// // 执行你的操作
// console.log('鼠标离开了画布');
// }
// if(!x || !y){
// document.removeEventListener('keydown',canvasKeyDown);
@@ -1152,10 +1218,16 @@ export default defineComponent({
if (file) {
const reader = new FileReader();
reader.onload = (e) => {
fabric.Image.fromURL(e.target.result,(img) => {
setCanvasImage(img,"upImgFiles",0,canvas.wrapperEl.parentNode.scrollTop,e.target.result)
canvas.add(img);
},{ crossOrigin: "Anonymous" })
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)=>{
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);
@@ -1413,8 +1485,8 @@ export default defineComponent({
let setCanvasDown = (event)=>{
// brushIndicator.set({fill: '#FFF',strokeWidth:0});
//设置移动端按下添加元素
if(isMoible && present.checked){
present.checked = false
if(isMoible && present.upScaleChecked){
present.upScaleChecked = false
present = {}
let pointerVpt = canvas.restorePointerVpt(event.pointer)
switch (currentType.value.type) {
@@ -1597,7 +1669,7 @@ export default defineComponent({
// });
// },
// // onCancel(){
// // _this.isShowMark = false
// // _this.isShowMark.value = false
// // resolve(false)
// // }
// });
@@ -1656,6 +1728,7 @@ export default defineComponent({
if(img.width*scaleSR.value>2048 || img.height*scaleSR.value>2048){
arr.push(index)
}
img.remove()
resolve(img)
}
img.src = item.imgUrl
@@ -1688,9 +1761,47 @@ export default defineComponent({
});
}
let toSvg = ()=>{
// console.log(canvas.toSvg());
}
let setShare = ()=>{
initAligningGuidelines(canvas,false)
let publishModal = publish.value
publishModal.publishMask = true
var imageDataURL = canvas.toDataURL({
format: "jpeg", // 导出格式为 PNG
quality: 1, // 图片质量为 1（最高质量）
});
let data = {
"imgUrl":imageDataURL,
userlikeGroupId:userlikeGroupId,
beenPublished
}
publishModal.init(data)
}
let setSubmit = ()=>{
let data = setCanvasContent()
data.canvasHeight = canvasWH.value.height
let blob = new Blob([JSON.stringify(data)], { type: "application/json" });
let formData = new FormData();
formData.append("file", blob, "data.json");
formData.append('userLikeGroupId', userlikeGroupId);
let config = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*' }}
Https.axiosPost(Https.httpUrls.exportSave, formData,config).then((rv)=>{
message.success('save successfully')
})
}
let setCanvasContent = ()=>{
var json = canvas.toJSON(['imgId','minioUrl']);
// console.log(JSON.stringify(json));
json.objects.forEach(item=>{
if(item.type == 'image'){
delete item.src
}
})
return json
}
onMounted(() => {});
return {
toSvg,
@@ -1698,6 +1809,7 @@ export default defineComponent({
toSvg,
showUpgradePlan,//当前弹窗是否打开
canvasWH,//画布初始宽高
publish,//发布作品广场
credits,//积分 用来判断HD导出积分是否够用
init,//首页点击导出后初始化
setExport,//导出所有内容
@@ -1740,6 +1852,8 @@ export default defineComponent({
selectAllImg,//控制全选
selectImg,//选中单个图片
setExportSR,//设置SR导出
setShare,
setSubmit,
};
},
data(prop) {
@@ -1747,6 +1861,26 @@ export default defineComponent({
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: {
'canvasWH.height':{
handler(newVal,oldVal){
@@ -1766,7 +1900,6 @@ export default defineComponent({
let mousedown = (event)=>{//按下
// console.log(event.target.getBoundingClientRect());
let position = {
y:event.touches[0].screenY,
top : scrollBox.style.marginTop?scrollBox.style.marginTop.split('px')[0]*1:0
@@ -1777,7 +1910,6 @@ export default defineComponent({
let offsetTop = position.top+e.touches[0].screenY - position.y
offsetTop = offsetTop <= 0? 0 : offsetTop
offsetTop = height+offsetTop >= canvasBox.offsetHeight? canvasBox.offsetHeight - height : offsetTop
console.log();
scrollBox.style.marginTop = offsetTop+'px'
canvasBox.scroll({
top: offsetTop*scale, // 纵向滚动距离
@@ -1897,14 +2029,24 @@ export default defineComponent({
display: flex;
justify-content: space-between;
padding-top: 2rem;
flex-wrap: wrap;
.subitOkPreviewBtn{
position: initial;
transform: none;
margin-bottom: 2rem;
width: 40%;
text-align: center;
&.active{
opacity: .7;
cursor: not-allowed;
}
}
.subitOkPreviewBtn:nth-child(2n){
margin-left: 1rem;
}
.subitOkPreviewBtn:nth-child(3),.subitOkPreviewBtn:nth-child(4){
margin-bottom: 0;
}
}
}