Skip to content

C
custom-platform
Commit f4fd2dd1 authored by zhangdy's avatar zhangdy
Browse files
Options

diy

parent 990e6c8c
Show whitespace changes
Inline Side-by-side
Showing with 767 additions and 0 deletions
src/router/index.js
View file @ f4fd2dd1
......@@ -4,6 +4,7 @@ import order from './order/index'
import logistics from './logistics/index'
import selectionProduct from './selectionProduct/index'
const login = resolve => require(['@/views/Login'], resolve);
const designDiy = resolve => require(['@/views/design/designDiy'], resolve);
const missing = resolve => require(['@/views/404'], resolve);
const Home = resolve => require(['@/views/Home'], resolve);//子页面
......@@ -20,6 +21,12 @@ const routes = [
name: '',
hidden: true
},
{
path: '/design/designDiy',
component:designDiy,
name: '',
hidden: true
},
// ...login,
// 通用页面
// {
......
src/views/design/designDiy.vue 0 → 100644
View file @ f4fd2dd1
<template>
<div class="content-height">
<!-- <div class="myorder-content"> -->
<div id="content">
<!-- 渲染场景 列表 -->
<div id="private-items-vue-app">
<ul class="private-items">
<li class="private-item" v-for="(item, index) in items" v-on:click="selectItem(item)" :key="index">
<img :src="getCover(item.cover)">
<div>{{item.name}}</div>
</li>
</ul>
</div>
<div id="three-content">
<!-- 1、 2d画布编辑容器 -->
<div id="edit-tow-canvas">
<!-- 1-1、左侧导航 -->
<div class="nav">
<div class="navbtn" @click="tabLeftNav('background')">
<svg t="1616551637863" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9919" width="30" height="30"><path d="M128.299 128C92.788 128 64 156.788 64 192.299v639.4C64 867.212 92.788 896 128.299 896H895.7c35.512 0 64.3-28.788 64.3-64.299V192.299C960 156.788 931.212 128 895.701 128H128.299zM128 588.313l178.162-178.162c24.795-24.795 64.996-24.795 89.792 0L817.803 832H128V588.313z m768 231.375L666.385 590.073l64.718-64.718c25.153-25.152 65.933-25.152 91.085 0L896 599.167v220.521zM694.65 471.299l-73.519 73.519L432.653 356.34c-45.064-45.064-118.127-45.064-163.19 0L128 497.803V192h768v316.657l-37.358-37.358c-45.286-45.285-118.707-45.285-163.992 0z" p-id="9920"></path></svg>
<span>
编辑背景
</span>
</div>
<div class="navbtn" @click="tabLeftNav('themeDesign')">
<svg t="1616551857325" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15779" width="30" height="30"><path d="M947.960675 199.328791l-92.764753 92.548836-123.656321-123.434264 92.768847-92.548836c17.024745-17.029862 44.745087-17.029862 61.824067 0l61.828161 61.715597C965.044772 154.637939 965.044772 182.305069 947.960675 199.328791zM298.47437 600.418772l123.656321 123.434264-164.803463 41.091884L298.47437 600.418772zM824.308447 322.766125 453.287295 693.022866 329.634044 569.586556l370.962823-370.256742L824.308447 322.766125zM154.843112 196.272175l0 673.501254 673.503301 0L828.346413 383.884111l87.855954-87.853907L916.202367 913.702941c0 24.287149-19.641339 43.930535-43.927465 43.930535L110.91667 957.633477c-24.282033 0-43.927465-19.642362-43.927465-43.930535L66.989205 152.34471c0-24.281009 19.645432-43.926442 43.927465-43.926442l620.184955 0-87.85493 87.853907L154.843112 196.272175z" p-id="15780"></path></svg>
<span>
主题设计
</span>
</div>
<div class="navbtn" @click="tabLeftNav('uploadImage')" >
<svg t="1616551787543" class="icon" viewBox="0 0 1029 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13066" width="30" height="30"><path d="M661.23 1003.042H119.672c-64.034 0-116.053-51.883-116.053-115.712V115.917C3.618 52.224 55.638 0.068 119.671 0.068H893.27c63.898 0 115.985 52.02 115.985 115.849v539.99c0 21.23-17.34 38.775-38.707 38.775s-38.912-17.34-38.912-38.776v-539.99c0-21.23-17.34-38.638-38.57-38.638H119.67c-21.299 0-38.912 17.408-38.912 38.639v771.14c0 21.231 17.613 38.639 38.912 38.639h541.492c21.162 0 38.707 17.203 38.707 38.639 0.068 21.3-17.545 38.707-38.64 38.707z" fill="" p-id="13067"></path><path d="M42.325 771.755c-9.762 0-19.729-4.028-27.238-11.606-14.95-14.95-14.95-39.458 0-54.408l192.785-192.034c35.157-35.158 89.156-44.169 133.803-21.777L551.39 596.65c14.814 7.578 32.768 4.643 44.373-7.167l347.614-346.317c14.95-15.019 39.458-15.019 54.682 0 15.223 14.882 15.087 39.39 0 54.545l-347.75 346.317c-35.09 35.089-88.816 43.759-133.667 21.367L306.86 561.084c-14.95-7.578-32.7-4.506-44.374 7.168L69.7 760.012c-7.51 7.578-17.34 11.743-27.375 11.743zM351.71 385.775c-63.898 0-116.053-51.746-116.053-115.712 0-63.898 51.882-115.712 116.053-115.712 63.76 0 116.053 51.883 116.053 115.712 0 63.898-52.36 115.712-116.053 115.712z m0-154.146c-21.163 0-38.776 17.271-38.776 38.502 0 21.368 17.477 38.64 38.776 38.64 21.163 0 38.639-17.272 38.639-38.64 0-21.23-17.34-38.502-38.64-38.502zM834.833 1024c-21.367 0-38.844-17.203-38.844-38.775V753.869c0-21.095 17.204-38.64 38.844-38.64 21.163 0 38.776 17.34 38.776 38.64v231.356c-0.069 21.572-17.545 38.775-38.776 38.775z" fill="" p-id="13068"></path><path d="M989.389 868.284c-9.49 0-18.978-3.345-26.76-10.377l-127.864-120.15-128.478 120.15c-15.36 14.404-39.8 13.858-54.409-1.57-14.677-15.633-13.994-39.868 1.707-54.682L788.89 674.611c11.127-13.721 27.58-21.436 45.533-21.436 17.818 0 34.27 7.988 45.261 21.436l135.441 127.044c15.702 14.814 16.52 38.912 1.775 54.682-6.758 7.782-17.066 11.947-27.511 11.947z" fill="" p-id="13069"></path></svg>
<span>
上传图片
</span>
</div>
<div class="navbtn" @click="tabLeftNav('addText')" >
<svg t="1616552211161" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="30519" width="30" height="30"><path d="M928 1024H96c-38.4 0-64-25.6-64-64V64c0-38.4 25.6-64 64-64h832c38.4 0 64 25.6 64 64v896c0 38.4-25.6 64-64 64zM96 64v896h832V64H96z m0-32V64 32z" p-id="30520"></path><path d="M256 179.2h505.6v96H256z" p-id="30521"></path><path d="M467.2 204.8h96v518.4H467.2zM256 768h505.6v96H256z" p-id="30522"></path></svg>
<span>
添加文字
</span>
</div>
</div>
<!-- 1-2、编辑面板 -->
<div class="edit-panel">
<!-- 1-2-1 编辑背景 -->
<div v-show="type === 'background'">
<h3>
编辑背景
</h3>
<div>
<span @click="backType= 'img'">
图片
</span>
<span @click="backType= 'color'">
颜色
</span>
</div>
<ul v-show="backType === 'img'" style="display: flex;flex-wrap: wrap;justify-content: space-between;">
<li style="border: 1px solid #ddd" v-for="(item, index) in backList" @click="setBackground(item)" :key="index">
<img style="height: 88px;width: 88px" :src="getCover(item.cover)">
<h4 style="overflow: hidden; white-space: nowrap;text-overflow: ellipsis; width: 100%;padding: 0;font-size: 14px;height: 24px;line-height: 24px;margin: 0;text-align: center">
{{item.name}}
</h4>
</li>
</ul>
<div v-show="backType === 'color'">
<ul class="back-color-list">
<li style="background-color: #2a2e34;" @click="setBackColor('#2a2e34')"></li>
<li style="background-color: #fbfbfb;" @click="setBackColor('#fbfbfb')"></li>
<li style="background-color: #8b8b8b;" @click="setBackColor('#8b8b8b')"></li>
<li style="background-color: #644135;" @click="setBackColor('#644135')"></li>
<li style="background-color: #e62c17;" @click="setBackColor('#e62c17')"></li>
<li style="background-color: #e84017;" @click="setBackColor('#e84017')"></li>
<li style="background-color: #f08118;" @click="setBackColor('#f08118')"></li>
<li style="background-color: #f6b213;" @click="setBackColor('#f6b213')"></li>
<li style="background-color: #f5e723;" @click="setBackColor('#f5e723')"></li>
<li style="background-color: #b8d21e;" @click="setBackColor('#b8d21e')"></li>
<li style="background-color: #6db62d;" @click="setBackColor('#6db62d')"></li>
<li style="background-color: #319e39;" @click="setBackColor('#319e39')"></li>
<li style="background-color: #008270;" @click="setBackColor('#008270')"></li>
<li style="background-color: #4a6774;" @click="setBackColor('#4a6774')"></li>
<li style="background-color: #00a4c0;" @click="setBackColor('#00a4c0')"></li>
<li style="background-color: #2e83c6;" @click="setBackColor('#2e83c6')"></li>
<li style="background-color: #2d6db6;" @click="setBackColor('#2d6db6')"></li>
<li style="background-color: #4c318f;" @click="setBackColor('#4c318f')"></li>
<li style="background-color: #7c2f8d;" @click="setBackColor('#7c2f8d')"></li>
<li style="background-color: #a71858;" @click="setBackColor('#a71858')"></li>
</ul>
</div>
</div>
<!-- 1-2-2 主题设计 -->
<div v-show="type === 'themeDesign'">
<h3>
主题设计
</h3>
<ul style="display: flex;flex-wrap: wrap;justify-content: space-between;">
<li style="border: 1px solid #ddd" v-for="(item, index) in themeList" @click="setTheme(item)" :key="index">
<img style="height: 88px;width: 88px" :src="getCover(item.cover)">
<h4 style="overflow: hidden; white-space: nowrap;text-overflow: ellipsis; width: 100%;padding: 0;font-size: 14px;height: 24px;line-height: 24px;margin: 0;text-align: center">
{{item.name}}
</h4>
</li>
</ul>
</div>
<!-- 1-2-3 编辑背景 -->
<div v-show="type === 'uploadImage'">
<h3>
上传图片
</h3>
<input @change="setUploadImg()" ref="inputer" type="file">
<ul style="display: flex;flex-wrap: wrap;justify-content: space-between;">
<li style="border: 1px solid #ddd" v-for="(item, index) in uploadImgList" @click="setAddUploadImg(item)" :key="index">
<img style="height: 88px;width: 88px" :src="item.url">
<h4 style="overflow: hidden; white-space: nowrap;text-overflow: ellipsis; width: 100%;padding: 0;font-size: 14px;height: 24px;line-height: 24px;margin: 0;text-align: center">
{{item.name}}
</h4>
</li>
</ul>
</div>
<!-- 1-2-4 添加文字 -->
<div v-show="type === 'addText'">
<h3>
{{ textInfo.isEdit? '编辑文字' : '添加文字' }}
</h3>
<!-- 添加文字 -->
<div v-show="!textInfo.isEdit" >
<input v-model="textInfo.text" style="display: block;width: 100%;height: 47px;margin: 0 auto 30px;text-align: center;" type="text" placeholder="请输入要设置的文字">
<button @click="setText()">添加</button>
</div>
<div v-show="textInfo.isEdit">
<div>
<label>
文字
<input type="text" v-model="textInfo.text">
</label>
</div>
<div>
<label>
字体大小
<input type="text" v-model="textInfo.fontSize">
</label>
</div>
<div>
<label>
文字加粗
<input type="radio" name="radios" :value="true" v-model="textInfo.fontWeight"><label>true</label>
<input type="radio" name="radios" :value="false" v-model="textInfo.fontWeight"><label>false</label>
</label>
</div>
<div>
<label>
文字颜色
<input type="text" v-model="textInfo.fill">
</label>
</div>
<div>
<label>
文字框背景颜色
<input type="text" v-model="textInfo.textBackgroundColor">
</label>
</div>
<div>
<label>
文字描边颜色
<input type="text" v-model="textInfo.stroke">
</label>
</div>
<div>
<label>
文字描边尺寸
<input type="text" v-model="textInfo.strokeWidth">
</label>
</div>
<button @click="editText()">编辑</button>
</div>
</div>
<!-- 1-2-5 层列表 -->
<div class="layer-list">
<h3>图层</h3>
<ul class="diy-image-list scrollbar">
<li class="designerInfo" v-for="(item, index) in objects" :key="index">
<div class="designerImage">
<span class="icon-text" v-show="item.type === 'text'">
<svg t="1617177722372" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2095" width="30" height="30"><path d="M64.1 66v303.7l39.5-1.3c13.6-110.8 102.6-186.4 153.2-199 50.7-12.6 148.3 1.1 148.3 1.1s-1.3 625.2-1.3 669.2c0 44.1-59.3 63-59.3 63l-79 1.3-1.2 55.4h493.1v-54.1h-90.2c-40.8-3.8-65.4-56.7-65.4-56.7l1.1-684.5s61.8-11.3 150.8 5.1c89 16.4 164.3 204.1 164.3 204.1h39.5V66H64.1z" p-id="2096"></path></svg>
</span>
<span v-show="item.type === 'text'" :style="{fontFamily: item.fontFamily}">
{{item.text}}
</span>
<span v-show="item.type === 'img'">
<img :src="item.img" alt="">
{{ item.name}}
</span>
<span v-show="item.type === 'backColor'" style="padding: 5px 15px;margin-top: 5px" :style="{background: item.fill}"></span>
<span v-show="item.type === 'backColor'">
{{ item.name}}
</span>
</div>
<div class="designerImageIcon">
<span v-show="!item.hideIcon" :title="'下移'" @click="sendBackwards(item)">
<svg t="1617098193738" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2698" width="30" height="30"><path d="M804.318208 753.152l-256 256a58.88 58.88 0 0 1-16.896 10.752 51.2 51.2 0 0 1-38.912 0 47.616 47.616 0 0 1-16.896-10.752l-256-256a51.2 51.2 0 0 1 72.704-72.704L460.766208 849.408V51.2a51.2 51.2 0 0 1 102.4 0v798.208l168.448-168.96a51.2 51.2 0 0 1 72.704 72.704z" p-id="2699"></path></svg>
</span>
<span v-show="!item.hideIcon" :title="'上移'" @click="bringForward(item)">
<svg t="1617098166617" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2551" width="30" height="30"><path d="M804.253763 270.928955l-255.972483-255.972483a58.873671 58.873671 0 0 0-16.894184-10.750844 47.098937 47.098937 0 0 0-38.907817 0 47.610882 47.610882 0 0 0-16.894184 10.750844l-255.972483 255.972483a51.194497 51.194497 0 0 0 72.696185 72.696185L460.738691 174.683302V972.805503a51.194497 51.194497 0 0 0 102.388993 0V174.683302l168.429894 168.941838a51.194497 51.194497 0 0 0 72.696185-72.696185z" p-id="2552"></path></svg>
</span>
<span :title="'隐藏'" v-show="item.visible" @click="hideObject(item)">
<svg t="1617178297702" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2206" width="30" height="30"><path d="M511.999488 252.461919c-174.547385 0-324.652078 108.241236-384.02942 261.84973 59.377342 153.60747 209.481012 261.84973 384.02942 261.84973 174.551478 0 324.70529-108.241236 384.02942-261.84973C836.703755 360.702132 686.550966 252.461919 511.999488 252.461919M511.999488 688.862103c-97.731882 0-174.547385-76.767408-174.547385-174.550455 0-97.782024 76.815503-174.551478 174.547385-174.551478 97.785094 0 174.551478 76.769454 174.551478 174.551478C686.550966 612.094696 609.784582 688.862103 511.999488 688.862103M511.999488 409.573189c-59.32413 0-104.737436 45.413306-104.737436 104.738459 0 59.328223 45.413306 104.739483 104.737436 104.739483 59.377342 0 104.740506-45.412282 104.740506-104.739483C616.739994 454.986495 571.376831 409.573189 511.999488 409.573189" p-id="2207"></path></svg>
</span>
<span v-show="!item.visible" :title="'显示'" @click="hideObject(item)">
<svg t="1617178308299" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2351" width="30" height="30"><path d="M513.661338 319.136457c98.212836 0 175.365007 77.098959 175.365007 175.284165 0 21.061688-3.541663 45.61592-14.020318 63.130829l101.655238 101.678774c52.593845-45.560662 94.662986-101.678774 119.220289-164.809603-59.58712-154.250106-210.397894-262.99481-385.713782-262.99481-49.103348 0-94.666056 10.527774-140.27686 24.576745l77.200266 77.107145C468.099652 322.599326 492.603743 319.136457 513.661338 319.136457M163.038772 224.438679l80.644715 80.648808 14.021342 14.048971c-59.637262 45.530986-105.198947 105.195877-129.750109 175.284165 59.58098 154.279782 210.395848 262.99481 385.706619 262.99481 52.601009 0 105.198947-10.504238 154.304342-28.019147l14.024411 13.997805 101.703333 101.729939 45.561685-45.610804-620.654652-620.687398L163.038772 224.438679zM355.864452 417.268452l52.602032 52.601009 0 24.551162c0 59.609633 45.610804 105.197924 105.194854 105.197924 7.039323 0 14.026458 0 24.554232-3.51915l52.597939 52.601009c-24.551162 14.048971-49.054229 21.035082-77.152171 21.035082-98.1586 0-175.310771-77.102029-175.310771-175.314865C338.350566 466.400452 345.336678 441.819614 355.864452 417.268452M506.67625 389.225769l108.691491 108.742656 0-7.062859c0-59.58712-45.561685-105.20304-105.19997-105.20304C510.168794 389.225769 510.168794 389.225769 506.67625 389.225769" p-id="2352"></path></svg>
</span>
<span v-show="!item.hideIcon" :title="'旋转'" @click="straighten(item)">
<svg t="1617270906787" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3215" width="30" height="30"><path d="M716.8 290.133333c-110.933333-102.4-281.6-106.666667-396.8-12.8S170.666667 537.6 247.466667 665.6c59.733333 106.666667 179.2 166.4 302.933333 149.333333s221.866667-102.4 256-221.866666c8.533333-34.133333 42.666667-51.2 76.8-42.666667 34.133333 8.533333 51.2 42.666667 42.666667 76.8-68.266667 226.133333-302.933333 354.133333-524.8 290.133333C174.933333 853.333333 42.666667 618.666667 106.666667 392.533333c42.666667-145.066667 153.6-256 298.666666-298.666666s298.666667 0 405.333334 102.4l81.066666-81.066667c8.533333-8.533333 21.333333-12.8 34.133334-8.533333 4.266667 12.8 12.8 21.333333 12.8 34.133333v264.533333c0 17.066667-12.8 29.866667-29.866667 29.866667h-260.266667c-12.8 0-25.6-8.533333-29.866666-17.066667s0-25.6 8.533333-34.133333l89.6-93.866667zM512 601.6c-46.933333 0-85.333333-38.4-85.333333-89.6s38.4-89.6 85.333333-89.6 85.333333 38.4 85.333333 89.6-38.4 89.6-85.333333 89.6z" p-id="3216" fill="#2c2c2c"></path></svg>
</span>
<span :title="'删除'" v-show="item.selectable" @click="removeObject(item)">
<svg t="1617178360105" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3199" width="30" height="30"><path d="M587.19 506.246l397.116-397.263a52.029 52.029 0 0 0 0-73.143l-2.194-2.194a51.98 51.98 0 0 0-73.143 0l-397.068 397.8-397.068-397.8a51.98 51.98 0 0 0-73.143 0l-2.146 2.194a51.054 51.054 0 0 0 0 73.143l397.069 397.263L39.544 903.461a52.029 52.029 0 0 0 0 73.142l2.146 2.195a51.98 51.98 0 0 0 73.143 0L511.9 581.583l397.068 397.215a51.98 51.98 0 0 0 73.143 0l2.194-2.146a52.029 52.029 0 0 0 0-73.143L587.19 506.246z" p-id="3200"></path></svg>
</span>
<span :title="'删除'" v-show="item.type === 'backColor'"@click="removeObject(item)">
<svg t="1617178360105" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3199" width="30" height="30"><path d="M587.19 506.246l397.116-397.263a52.029 52.029 0 0 0 0-73.143l-2.194-2.194a51.98 51.98 0 0 0-73.143 0l-397.068 397.8-397.068-397.8a51.98 51.98 0 0 0-73.143 0l-2.146 2.194a51.054 51.054 0 0 0 0 73.143l397.069 397.263L39.544 903.461a52.029 52.029 0 0 0 0 73.142l2.146 2.195a51.98 51.98 0 0 0 73.143 0L511.9 581.583l397.068 397.215a51.98 51.98 0 0 0 73.143 0l2.194-2.146a52.029 52.029 0 0 0 0-73.143L587.19 506.246z" p-id="3200"></path></svg>
</span>
</div>
</li>
</ul>
</div>
</div>
<!-- 1-3 2d画布 -->
<div class="two-canvas">
<div id="getCanvas">
<canvas id="htmlCanvas" style="touch-action: none;cursor: grab;"/>
</div>
<div style="position: fixed;bottom: 10px;left: 50%;transform: translateX(-50%)">
<button @click="sendBackwards(activeObject)">
下移
</button>
<button @click="bringForward(activeObject)">
上移
</button>
<button @click="editActiveObject('bottom')">
置底
</button>
<button @click="editActiveObject('topFloor')">
置顶
</button>
<button @click="centerH(activeObject)">
水平居中
</button>
<button @click="centerV(activeObject)">
垂直居中
</button>
<button @click="hideObject(activeObject)">
隐藏
</button>
<button @click="straighten(activeObject)">
旋转（点击旋转45度）
</button>
<button @click="copyObject(activeObject)">
复制
</button>
<button @click="removeObject(activeObject)">
删除
</button>
<button @click="getData()">获取数据</button>
<button @click="getRenderImgBase64('center')">获取正面</button>
<button @click="getRenderImgBase64('left')">获取左侧</button>
<button @click="getRenderImgBase64('right')">获取右侧</button>
<button @click="getRenderImgBase64('back')">获取背面</button>
</div>
<!-- 切换分组 -->
<ul style="position: fixed; right: 30%;top: 200px;transform: translateX(100%);z-index: 1;}">
<li style="border: 1px solid #ddd" v-for="(item, index) in groups" @click="tabGroup(index)" :key="index">
<img style="height: 88px;width: 88px" :src="item.url"/>
</li>
</ul>
</div>
</div>
<!-- 2、 3d画布 -->
<div id="three" class="three-canvas"></div>
</div>
</div>
<!-- <img :src="finalImg"/> -->
<!-- </div> -->
</div>
</template>
<script>
export default {
data() {
return {
token:'',
api:'',
//场景列表
items:[],
//视图
viewer:'',
// 分组信息
groups: [],
// 要切换分组的下标
groupIndex: 0,
backType: 'img',
// 左侧切换类型,默认是编辑背景
type: 'background',
// 背景图片列表
backList: [],
// 主题图片列表
themeList: [],
// 自定义上传图片列表
uploadImgList: [],
// 图层数组
objects:[],
textInfo:{
text: null,
stroke: null,
strokeWidth: null,
canvasFill: '#000000',
textBackgroundColor: null,
canvasImage: '',
id: null,
opacity: null,
fill: null,
fontSize: null,
lineHeight: null,
charSpacing: null,
fontWeight: null,
fontStyle: null,
textAlign: null,
fontFamily: null,
TextDecoration: '',
isEdit: false
},
finalImg:''
}
},
mounted(){
this.getToken()
},
methods: {
//合成
exportImg() {
let that=this
html2canvas(document.querySelector('#htmlCanvas'),
{
// ignoreElements:(element)=>{
// if(element.id==='btnsOne')
// return true;
// },
scale: 4,
}).then((canvas) => {
var url = canvas.toDataURL('image/jpeg');
that.finalImg=url
});
},
getToken(){
let apiHost='https://api.3dreal.cn'
let accessKey='273201480322912256'
let accessSecret='3Inyre2PRMvEDq6mEqqOAbZ4jUQpMHtq'
this.axios({
url:apiHost + '/api/getAccessToken?appId=' + accessKey + '&appSecret=' + accessSecret,
method: "get"
}).then(res => {
if(res.data){
this.token = res.data.accessToken
this.api = new ThreeDRealAPI(this.token)
this.getScenes()
}
})
},
getScenes(){
this.api.fetchScenes(1, 'DIY').then((data)=>{
this.items=data.list
})
},
getCover(cover) {
return cover ? 'https://cdn.3dreal.cn/' + cover : 'https://www.3dreal.com/assets/default-cover.jpg';
},
selectItem(item){
document.getElementById('private-items-vue-app').style.display = 'none';
document.getElementById('three').style.display = 'block';
document.getElementById('three-content').style.display = 'flex';
this.run(item.id);
},
run (id) {
let that=this
// 3d渲染
var three = document.getElementById('three');
// 2d渲染
var app
that.api.getDiyView(three, id, function () {
console.log('loading success');
}, function (objects, textItem) { // 返回2d布片图层，以及选中文字时候触发被选中的文字信息
that.objects = objects.reverse();
console.log(that.objects)
if(textItem) {
console.log(textItem);
that.textInfo = textItem;
} else {
that.textInfo = {
text: null,
stroke: null,
strokeWidth: null,
canvasFill: '#000000',
textBackgroundColor: null,
canvasImage: '',
id: null,
opacity: null,
fill: null,
fontSize: null,
lineHeight: null,
charSpacing: null,
fontWeight: null,
fontStyle: null,
textAlign: null,
fontFamily: null,
TextDecoration: '',
isEdit: false
}
}
}).then((detailInfo) => {
// 获取返回的数据
var data = detailInfo.data;
// 获取 视图控制器
that.viewer = detailInfo.threedViewer;
that.groups=that.viewer.materialList,
that.backList=data.backList
that.themeList=data.patternList
}).catch((e) => {
console.log(e);
})
},
// 切换左侧导航
tabLeftNav(type) {
this.type = type;
},
// 切换分组
tabGroup(index) {
this.viewer.fabricEditor.setGroup(index);
},
// 设置背景图
setBackground(item) {
this.viewer.fabricEditor.setBackgroundImage(item);
},
// 设计背景颜色
setBackColor(color) {
this.viewer.fabricEditor.editBackgroundColor(color);
},
// 设置主题
setTheme(item) {
this.viewer.fabricEditor.setTheme(item);
},
// 设置上传图片
setUploadImg() {
this.viewer.fabricEditor.setUploadImg(this.$refs.inputer.files[0]);
// 返回上传图片对象数组 {name: '', url: Base64}
this.uploadImgList = this.viewer.fabricEditor.getUploadFile();
},
// 设置上传图片再次添加到2d版片
setAddUploadImg(item) {
this.viewer.fabricEditor.setAddUploadImg(item);
},
// 设置文字
setText(){
this.viewer.fabricEditor.addText(this.textInfo.text);
setTimeout(()=>{
this.exportImg()
},1000)
},
// 编辑文字
editText() {
this.viewer.fabricEditor.editText(this.textInfo)
},
// 下移图层
sendBackwards(item) {
this.viewer.fabricEditor.sendBackwards(item)
},
// 上移图层
bringForward(item) {
this.viewer.fabricEditor.bringForward(item);
},
// 置顶置底
editActiveObject(type) {
viewer.fabricEditor.editActiveObject(type);
},
// 复制图层
copyObject(item) {
viewer.fabricEditor.copy(item);
},
// 垂直居中
centerV(item) {
viewer.fabricEditor.centerV(item);
},
// 水平居中
centerH(item) {
viewer.fabricEditor.centerH(item);
},
// 隐藏图层
hideObject(item) {
this.viewer.fabricEditor.hideObject(item);
},
// 旋转图层
straighten(item) {
this.viewer.fabricEditor.straighten(item);
},
// 删除图层
removeObject(item) {
this.viewer.fabricEditor.removeObject(item);
},
// 获取数据
getData() {
console.log('这是场景所有数据',this.viewer.fabricEditor.getData());
},
// 获取截图信息
getRenderImgBase64(type) {
viewer.renderToBase64(type, 512).then((img) => { // 第二个参数是图片的大小可以根据自己需求定义
// console.log(img);
this.backImg = img
})
},
}
};
</script>
<style lang="less" scoped>
ul, ul li {
list-style:none;
padding: 0;
margin: 0;
}
#private-items-vue-app {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.private-items {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.private-items .private-item {
width: 10vw;
height: 12vw;
margin: 10px;
background-color: burlywood;
}
.private-items .private-item img {
width: 10vw;
height: 10vw;
}
.private-items .private-item div {
width: 10vw;
height: 2vw;
text-align: center;
font-size: 14px;
line-height: 2vw;
}
#content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
overflow:hidden;
}
#three-content {
width: 100%;
height: 100%;
overflow:hidden;
background: #fff;
display: none;
}
#edit-tow-canvas{
width: 70%;
height: 100%;
display: flex;
}
/* 左侧导航 */
#three-content .nav {
width: 8%;
border-right: 1px solid #ddd;
}
.navbtn{
cursor: pointer;
color: #000000A6;
font-size: 12px;
text-align: center;
margin-top: 40px;
}
.navbtn > span {
display: block;
}
/* 编辑面板 */
#three-content .edit-panel{
width: 40%;
height: 100%;
border-right: 1px solid #dbd9da;
position: relative;
padding: 0 10px;
}
/*图层列表*/
.edit-panel .layer-list{
position: absolute;
bottom: 0;
height: 260px;
}
/*2d 画布*/
#three-content .two-canvas{
width: 52%;
height: 100%;
background: url('https://www.3dreal.com/dian.4cda7e3fbfea958326a2.png') repeat 0 0;
}
/* 3d 画布*/
#three-content .three-canvas{
width: 30%;
height: 100%;
display: none;
}
.selection {
margin-left: 60px;
position: relative;
}
.selection .list-style {
margin: 10px;
overflow: scroll;
background: gray;
border-radius:5px;
flex: 1;
}
.list-style .title {
width: inherit;
text-align: center;
background: gray;
border-radius:5px;
}
.tabs {
background: gray;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
}
.tabs .tab {
margin: 20px 0;
width: 50px;
height: 50px;
cursor: pointer;
}
.tabs .tab img {
width: 50px;
height: 50px;
cursor: pointer;
}
.tabs .tab span {
font-size: 14px;
}
::-webkit-scrollbar {
width:0px;
}
#image-render-button {
margin: 10px;
width: 100px;
height: 50px;
background: gray;
border-radius: 5px;
cursor: pointer;
line-height: 50px;
text-align: center;
font-size: 16px;
}
#image-view-mask {
z-index: 100;
display: flex;
align-items: center;
position: fixed;
background: rgba(255, 255, 255, 0.5);
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#image-view {
flex: 1;
display: flex;
justify-content: center;
width: 80%;
height: 40%;
margin: 0 20px;
}
#image-view img {
width: 100px;
flex-grow: 1;
display: inline-flex;
align-self: flex-start;
margin: 0 10px;
border-radius: 5px;
}
.diy-image-list{
max-height: 200px;
overflow: auto;
}
.diy-image-list .designerInfo {
display: -webkit-box;
display: flex;
height: 40px;
line-height: 40px;
cursor: pointer;
width: 100%;
background-color: #ebebeb;
margin-top: 10px;
}
.diy-image-list .designerInfo .designerImage {
-webkit-box-flex: 1;
flex: 1;
position: relative;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.diy-image-list .designerInfo img{
width: 30px;
height: 30px;
}
.back-color-list > li {
border: 1px solid #d1d1d1;
border-radius: 2px;
width: 18px;
height: 18px;
display: inline-block;
margin-right: 5px;
margin-bottom: 6px;
cursor: pointer;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment