@@ -337,7 +331,7 @@ export default defineComponent({
// let canvasDom = ref()
let canvasWH = ref({
width: 400,
- height: 100,
+ height: 0,
});
let pencilbtnStyle = ref({
background:'',
@@ -368,7 +362,8 @@ export default defineComponent({
y: 0,
height: 0,
};
- let sketchGrouping = 3; //sketch分组
+ let canvasScale = 1; //canvas放大缩小倍率
+ let sketchGrouping = 6; //sketch分组
let likeDesign = 4; //整体图分组
let disposeMoodboardShow = true;
let canvasState = ref()//存放canvas操作
@@ -391,50 +386,9 @@ export default defineComponent({
"likeDesignCollectionList",
productData.key,
];
- // isShowMark.value = true
- nextTick(async ()=>{
- let oldExportCanvas
- let localCanvas = localStorage.getItem('canvasContent')
- let localUserlikeGroupId = localStorage.getItem('userlikeGroupId')
- let currentTime = localStorage.getItem('currentTime')
- oldExportCanvas = await new Promise((resolve, reject) => {
- if(localUserlikeGroupId == userlikeGroupId && (new Date().getTime() - currentTime < 21600000)){
- Modal.confirm({
- title: useI18.t('exportModel.jsContent8'),
- okText: 'Yes',
- cancelText: 'No',
- mask:false,
- centered:true,
- onOk() {
- localCanvas = localCanvas?JSON.parse(localCanvas):null
- resolve(localCanvas)
- },
- onCancel(){
- resolve(null)
- }
- });
- }else{
- resolve(null)
- }
- })
- if(!oldExportCanvas){
- let data = {
- userLikeGroupId:userlikeGroupId
- }
- oldExportCanvas = await new Promise((resolve, reject) => {
- Https.axiosPost(Https.httpUrls.exportSearch, data)
- .then((rv) => {
- resolve(rv)
- })
- .catch((rv) => {
- resolve(null)
- });
- })
- }
- createCanvas(oldExportCanvas)
- })
+ createCanvas()
}
- let setCanvasData = ()=>{
+ let setCanvasData = async (oldExportCanvas)=>{
let oldKey = "";
let margin = 20; //每个图形边距
let maxHeight = 0
@@ -451,114 +405,115 @@ export default defineComponent({
canvas.loadFromJSON(oldExportCanvas, () => {});
isShowMark.value = false
}else{
+ canvasWH.value.height = 500
+ canvas.setHeight(canvasWH.value.height);
isShowMark.value = false
-
- // await nextTick(async ()=>{
- // for (const item of arr) {
- // for (const key in allBoardData.value) {
- // if (item == key) {
- // //循环渲染顺序
- // let sketchGroupingItem = [];
- // if (
- // item == "moodboardFiles" &&
- // !disposeMoodboardShow
- // ) {
- // continue;
- // }
- // for (const [allItemIndex, allItem,] of allBoardData.value[key].entries()) {
- // await new Promise(async (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;
- // }
- // 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") {
+ await nextTick(async ()=>{
+ for (const item of contentKeyList) {
+ for (const key in allBoardData.value) {
+ if (item == key) {
+ //循环渲染顺序
+ let sketchGroupingItem = [];
+ if (
+ item == "moodboardFiles" &&
+ !disposeMoodboardShow
+ ) {
+ continue;
+ }
+ for (const [allItemIndex, allItem,] of allBoardData.value[key].entries()) {
+ await new Promise(async (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;
+ }
+ 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) => {
- // if(item == 'likeDesignCollectionList')imgWidth[item] = setImageWidth(key,img);
- // let scaleWH = imgWidth[item] / 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;
- // }
- // }
- // 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];
- // }
+ itemCanvasImg =
+ allItem.designOutfitUrl;
+ }
+ fabric.Image.fromURL(itemCanvasImg,(img) => {
+ if(item == 'likeDesignCollectionList')imgWidth[item] = setImageWidth(key,img);
+ let scaleWH = imgWidth[item] / 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;
+ }
+ }
+ setCanvasImage(img,key,position.x,position.y,allItem)//设置图片
+ position.height = img.height * scaleWH + margin;
+ if (key == "sketchboardFiles") {
+ if (sketchGroupingItem.length
sketchGrouping) {
+ 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;
- // oldKey = key;
- // resolve()
- // canvas.add(img);
+ }
+ }
+ if(key == "sketchboardFiles" && sketchGroupingItem.length >sketchGrouping){
+ }else{
+ position.x += img.width * scaleWH + margin;
+ }
+ img.lock_rotation = true;
+ oldKey = key;
+ resolve()
+ canvas.add(img);
- // },{ crossOrigin: "Anonymous" });
- // }
- // });
- // }
- // }
- // }
- // if(position.y+position.height>canvasWH.value.height){
- // canvasWH.value.height = Math.floor(position.y+position.height)
- // canvas.setHeight(canvasWH.value.height);
- // }
- // }
- // })
+ },{ crossOrigin: "Anonymous" });
+ }
+ });
+ }
+ }
+ }
+ if(position.y+position.height>canvasWH.value.height){
+ canvasWH.value.height = Math.floor(position.y+position.height)
+ canvas.setHeight(canvasWH.value.height);
+ }
+ }
+ })
isShowMark.value = false
}
updateCanvasState('')//加载完成后记录一下
@@ -566,7 +521,6 @@ export default defineComponent({
let createCanvas = (oldExportCanvas) => {
showUpgradePlan.value = true;
clearTimeout(submitCanvasContent)
- canvasWH.value.height = 100
normalCanvasState.value = []
reverseCanvasState.value = []
allBoardData.value.likeDesignCollectionList =
@@ -649,69 +603,47 @@ export default defineComponent({
if(driver__.value.driver){
driverObj__.moveNext()
}
-
- let canvasBoxDom = document.querySelector('.exportCanvasBox .exportCanvasBox_center')
- let scrollBox = document.querySelector('.exportCanvasBox_scroll div')
- let height = canvasBox.offsetHeight / (canvasWH.value.height / canvasBox.offsetHeight )
- let scale = (canvasWH.value.height - canvasBoxDom.offsetHeight) / (canvasBoxDom.offsetHeight - height)
- let mouseDownOperation = (event)=>{//按下
- let position = {
- y:event.screenY,
- top : scrollBox.style.marginTop?scrollBox.style.marginTop.split('px')[0]*1:0
+ nextTick(async ()=>{
+ let oldExportCanvas
+ let localCanvas = localStorage.getItem('canvasContent')
+ let localUserlikeGroupId = localStorage.getItem('userlikeGroupId')
+ let currentTime = localStorage.getItem('currentTime')
+ oldExportCanvas = await new Promise((resolve, reject) => {
+ if(localUserlikeGroupId == userlikeGroupId && (new Date().getTime() - currentTime < 21600000)){
+ Modal.confirm({
+ title: useI18.t('exportModel.jsContent8'),
+ okText: 'Yes',
+ cancelText: 'No',
+ mask:false,
+ centered:true,
+ onOk() {
+ localCanvas = localCanvas?JSON.parse(localCanvas):null
+ resolve(localCanvas)
+ },
+ onCancel(){
+ resolve(null)
+ }
+ });
+ }else{
+ resolve(null)
+ }
+ })
+ if(!oldExportCanvas){
+ let data = {
+ userLikeGroupId:userlikeGroupId
+ }
+ oldExportCanvas = await new Promise((resolve, reject) => {
+ Https.axiosPost(Https.httpUrls.exportSearch, data)
+ .then((rv) => {
+ resolve(rv)
+ })
+ .catch((rv) => {
+ resolve(null)
+ });
+ })
}
- // let top =
- let scrollMousemove = (e)=>{
- let height = scrollBox.style.height.split('px')[0]*1
- let offsetTop = position.top+e.screenY - position.y
- offsetTop = offsetTop <= 0? 0 : offsetTop
- offsetTop = height+offsetTop >= canvasBoxDom.offsetHeight? canvasBoxDom.offsetHeight - height : offsetTop
- scrollBox.style.marginTop = offsetTop+'px'
- canvasBoxDom.scroll({
- top: offsetTop*scale, // 纵向滚动距离
- left: 0, // 横向滚动距离
- });
- }
- let mouseMove = function(event){
- let e = getMousePosition(event,false)
- scrollMousemove(e)
- }
- let touchmove = function(event){
- let e = getMousePosition(event,true)
- scrollMousemove(e)
- }
- let mouseup = function(){
- document.removeEventListener('mousemove',mouseMove)
- document.removeEventListener('touchmove',touchmove)
- document.removeEventListener('mouseup',mouseup)
- document.removeEventListener('touchend',mouseup)
- //移动端
- }
- document.addEventListener('mousemove', mouseMove);
- document.addEventListener('touchmove', touchmove);
- document.addEventListener('mouseup', mouseup);
- document.addEventListener('touchend', mouseup);
-
- // document.addEventListener('touchmove',scrollMousemove)
- // scrollBox.addEventListener('touchend',mouseup)
- }
- canvasBoxDom.addEventListener('scroll', function() {
- const scrollTop = canvasBoxDom.scrollTop;
- scrollBox.style.marginTop = scrollTop/scale+'px'
- });
- let mousedown = function(event){
- let e = getMousePosition(event,false)
- mouseDownOperation(e)
- }
-
- let touchstart = function(event){
- let e = getMousePosition(event,true)
- mouseDownOperation(e)
- }
- scrollBox.addEventListener('mousedown',mousedown)
- scrollBox.addEventListener('touchstart',touchstart)
- // scrollBox.removeEventListener('touchstart',mousedown)
- // scrollBox.addEventListener('touchstart',mousedown)
-
+ setCanvasData(oldExportCanvas)
+ })
});
};
@@ -751,12 +683,16 @@ export default defineComponent({
) {
//如果是mood 需要判断用户是否点击layout
disposeMoodboardShow = false;
+
+ imgWidth = canvasWH.value.width / 2;
}
if(key == 'upImgFiles'){
- imgWidth = canvasWH.value.width / 4;
+ imgWidth = canvasWH.value.width / 8;
+ // imgWidth = canvasWH.value.width / 4;
}
if (key == "printboardFiles") {
- imgWidth = canvasWH.value.width / 8;
+ imgWidth = canvasWH.value.width / 14;
+ // imgWidth = canvasWH.value.width / 8;
}
if (key == "sketchboardFiles"||key == 'moodboardFiles'||key == 'FinalizeImage') {
imgWidth =
@@ -768,7 +704,7 @@ export default defineComponent({
if(img){
let imgObj = JSON.parse(JSON.stringify(img))
let height = imgObj.height
- imgObj.height = canvasWH.value.width / 4 * 1.8
+ imgObj.height = canvasWH.value.width / 8 * 1.8
let heightScale = imgObj.height / height
imgWidth = imgObj.width * heightScale
}
@@ -990,6 +926,7 @@ export default defineComponent({
y: 0,
height: 0,
};
+ canvasWH.value.height = 0
operation.value = 'move'
operation.value = 'fill'
},
@@ -1337,6 +1274,9 @@ export default defineComponent({
setText()
JSchangeType(canvas,'init')
pencilbtnStyle.value.display = `none`
+ }else if(str == 'zoomIn' || str == 'zoomOut'){
+ pencilbtnStyle.value.display = `none`
+ canvas.forEachObject((obj) =>obj.selectable = false);
}else if(str){
pencilbtnStyle.value.display = `none`
canvas.forEachObject((obj) =>obj.selectable = false);
@@ -1692,10 +1632,35 @@ export default defineComponent({
pencilbtnStyle.value.top = parentY + canvasBox.parentElement.scrollTop + pointer.y+'px'
canvas.requestRenderAll()
}
+ let setCanvasZoom = (opt)=>{
+ console.log(123);
+
+ let zoom = canvas.getZoom() // 获取画布当前缩放值
+ let num = -100
+ if(operation.value == 'zoomOut') num = 100
+
+ zoom *= 0.999 ** num
+ if (zoom > 20) zoom = 20
+ if (zoom < 0.01) zoom = 0.01
+
+ // console.log(zoom);
+ canvas.zoomToPoint(
+ { // 关键点
+ x: opt.e.offsetX,
+ y: opt.e.offsetY
+ },
+ zoom
+ )
+ opt.e.preventDefault()
+ opt.e.stopPropagation()
+ }
//设置再画布上按下
let setCanvasDown = (event)=>{
//设置移动端按下添加元素
-
+ if(operation.value == 'zoomIn' || operation.value == 'zoomOut'){
+ setCanvasZoom(event)
+ return
+ }
if(isMoible && present.upScaleChecked){
present.upScaleChecked = false
present = {}
@@ -2179,6 +2144,7 @@ export default defineComponent({
watch: {
'canvasWH.height':{
handler(newVal,oldVal){
+
let canvasBox = document.querySelector('.exportCanvasBox .exportCanvasBox_center')
let scrollBox = document.querySelector('.exportCanvasBox_scroll div')
if(!canvasBox || !scrollBox)return
@@ -2189,6 +2155,66 @@ export default defineComponent({
scrollBox.style.marginTop = 0+'px'
let height = canvasBox.offsetHeight / (newVal / canvasBox.offsetHeight )
scrollBox.style.height = height +'px'
+ if(oldVal != 0)return
+ let canvasBoxDom = document.querySelector('.exportCanvasBox .exportCanvasBox_center')
+ let scale = (newVal - canvasBoxDom.offsetHeight) / (canvasBoxDom.offsetHeight - height)
+ let mouseDownOperation = (event)=>{//按下
+ let position = {
+ y:event.screenY,
+ top : scrollBox.style.marginTop?scrollBox.style.marginTop.split('px')[0]*1:0
+ }
+ // let top =
+ let scrollMousemove = (e)=>{
+ let height = scrollBox.style.height.split('px')[0]*1
+ let offsetTop = position.top+e.screenY - position.y
+ offsetTop = offsetTop <= 0? 0 : offsetTop
+ offsetTop = height+offsetTop >= canvasBoxDom.offsetHeight? canvasBoxDom.offsetHeight - height : offsetTop
+ scrollBox.style.marginTop = offsetTop+'px'
+ canvasBoxDom.scroll({
+ top: offsetTop*scale, // 纵向滚动距离
+ left: 0, // 横向滚动距离
+ });
+ }
+ let mouseMove = function(event){
+ let e = getMousePosition(event,false)
+ scrollMousemove(e)
+ }
+ let touchmove = function(event){
+ let e = getMousePosition(event,true)
+ scrollMousemove(e)
+ }
+ let mouseup = function(){
+ document.removeEventListener('mousemove',mouseMove)
+ document.removeEventListener('touchmove',touchmove)
+ document.removeEventListener('mouseup',mouseup)
+ document.removeEventListener('touchend',mouseup)
+ //移动端
+ }
+ document.addEventListener('mousemove', mouseMove);
+ document.addEventListener('touchmove', touchmove);
+ document.addEventListener('mouseup', mouseup);
+ document.addEventListener('touchend', mouseup);
+
+ // document.addEventListener('touchmove',scrollMousemove)
+ // scrollBox.addEventListener('touchend',mouseup)
+ }
+ canvasBoxDom.addEventListener('scroll', ()=> {
+ let height = canvasBox.offsetHeight / (this.canvasWH.height / canvasBox.offsetHeight )
+ let scale = (this.canvasWH.height - canvasBoxDom.offsetHeight) / (canvasBoxDom.offsetHeight - height)
+ const scrollTop = canvasBoxDom.scrollTop;
+ scrollBox.style.marginTop = scrollTop/scale+'px'
+ });
+ let mousedown = function(event){
+ let e = getMousePosition(event,false)
+ mouseDownOperation(e)
+ }
+
+ let touchstart = function(event){
+ let e = getMousePosition(event,true)
+ mouseDownOperation(e)
+ }
+ scrollBox.addEventListener('mousedown',mousedown)
+ scrollBox.addEventListener('touchstart',touchstart)
}
},
},
@@ -2213,6 +2239,7 @@ export default defineComponent({
.icon-rotate{
transform: rotate(-180deg);
}
+
.exportCanvasBox {
flex: 1;
overflow-x: hidden;
@@ -2281,6 +2308,15 @@ export default defineComponent({
}
}
}
+ .exportCanvasBox_left_item{
+ width: 20rem;
+ .exportCanvasBox_title{
+ .exportCanvasBox_left_tool_item{
+ display: flex;
+ }
+ }
+
+ }
.exportCanvasBox_left_item.closeNav{
// max-height: 1000rem;
// height: auto;
@@ -2309,6 +2345,12 @@ export default defineComponent({
flex-direction: column;
}
+ .exportCanvasBox_left_tool_item_more{
+ flex-wrap: wrap;
+ flex-direction: row;
+ justify-content: flex-start;
+ padding: 1rem;
+ }
}
.exportCanvasBox_left_item{
overflow: hidden;
@@ -2326,6 +2368,11 @@ export default defineComponent({
top: 7rem;
position: absolute;
}
+ .exportCanvasBox_left_item.exportCanvasBox_left_tool{
+ top: 100%;
+ transform: translateY(-110%);
+ left: 100%;
+ }
.exportCanvasBox_imgbor {
// height: auto;
@@ -2337,9 +2384,11 @@ export default defineComponent({
.exportCanvasBox_allItem {
display: flex;
flex-wrap: wrap;
- justify-content: space-between;
+ // justify-content: space-between;
+ justify-content: flex-start;
.exportCanvasBox_item {
text-align: center;
+ margin-right: 1rem;
.exportCanvasBox_img{
position: relative;
margin-bottom: 2rem;
@@ -2453,6 +2502,12 @@ export default defineComponent({
border-radius: .4rem;
}
}
+ .icon-xiala{
+ transform: rotate(-90deg);
+ &.icon-rotate-tool{
+ transform: rotate(90deg);
+ }
+ }
.uploadImage{
width: 4rem;
height: 4rem;
diff --git a/src/component/HomePage/scaleImage.vue b/src/component/HomePage/scaleImage.vue
index c6780bae..7aae316d 100644
--- a/src/component/HomePage/scaleImage.vue
+++ b/src/component/HomePage/scaleImage.vue
@@ -441,7 +441,7 @@ export default defineComponent({