Skip to content

H
hs-app-project
Commit 1f810274 authored by 李星剑's avatar 李星剑
Browse files
Options

fix:面料建模

parent 9026175e
Show whitespace changes
Inline Side-by-side
Showing with 218 additions and 158 deletions
src/pages/home/components/fabricTitle.vue
View file @ 1f810274
<template>
<view>
<view class="home_con_content_order u-m-t-30" v-for="item,index in tableData" @click="goDetail(item)"
<view class="home_con_content_order u-m-t-30" v-for="(item,index) in tableData" @click="goDetail(item)"
:key="index">
<image style="width: 100%;height: 160rpx;" src="../../../static/images/home/1@2x.png" mode=""></image>
<view class="order_tit">
......@@ -11,7 +11,7 @@
</span>
</view>
<view class="u-font-24 u-m-t-20 color_6F6F72">
<span v-for="itemMater,indexMater in dataList" :key="indexMater"> <span class="u-m-r-10"
<span v-for="itemMater in dataList" :key="indexMater"> <span class="u-m-r-10"
v-if="itemMater.id==item.category"> {{itemMater.name}}</span></span>
|
<span class="u-m-l-10 u-m-r-10">{{item.clothWidth}}cm</span>
......@@ -51,8 +51,8 @@
},
methods: {
goDetail(item) {
console.log(333)
this.$router.push({
// console.log(333)
this.$Router.push({
path: "/pages/home/detail",
query: {
id: item.id
......
src/pages/home/detail.vue
View file @ 1f810274
......@@ -2,9 +2,11 @@
<view class="whole">
<view class="back">
<view style="display:flex">
<view class="u-flex">
<u-navbar :is-back="true" :background="{ backgroundColor: '#F5F5F5' }" title="面料详情">
<template v-slot:right>
<view class="nav-nav" @click="edit()">编辑</view>
</template>
</u-navbar>
</view>
......@@ -137,7 +139,7 @@
});
},
edit() {
this.$router.push({
this.$Router.push({
path: "/pages/home/editFabric",
query: {
id: this.id
......
src/pages/index/canvas.js
View file @ 1f810274
// import mergeImages from "./mergeImages";
export default {
data() {
data(){
return {
system_info: {}, //system info
canvas_width: 0, //canvas width px
canvas_height: 0, //canvas height px
ctx: null, //canvas object
canvas_id: null, //canvas id
hidden: false, //Whether to hide canvas
scale: 1, //canvas scale
r_canvas_scale: 1,
if_ctx: true
system_info:{}, //system info
canvas_width:0, //canvas width px
canvas_height:0, //canvas height px
ctx:null, //canvas object
canvas_id:null, //canvas id
hidden:false, //Whether to hide canvas
scale:1, //canvas scale
r_canvas_scale:1,
if_ctx:true
}
},
methods: {
methods:{
/**
* Compatibility px
* @param {Object} size
......@@ -31,9 +31,14 @@ export default {
resetCompatibilitySize(size) {
return (parseFloat(size / 2) / this.system_info.windowWidth) * 750
},
init(config) {
return new Promise(async (resolve, reject) => {
if (!config.canvas_id) {
async init(config){
if(config.path){
// 存一下实际图片大小 用于缩放比
this.imagesConfig = await this.scaleImageInfo(config.path);
}
return new Promise(async (resolve,reject)=>{
if(!config.canvas_id){
reject("Canvas ID cannot be empty, please refer to the usage example")
return;
}
......@@ -41,130 +46,149 @@ export default {
this.canvas_id = config.canvas_id
let system_info = await uni.getSystemInfoSync()
this.system_info = system_info
this.scale = config.scale && parseFloat(config.scale) > 0 ? parseInt(config.scale) : 1
this.scale = config.scale && parseFloat(config.scale)>0?parseInt(config.scale):1
this.canvas_width = (config.canvas_width ? this.compatibilitySize(config.canvas_width) : system_info.windowWidth) * this.scale
this.canvas_height = (config.canvas_height ? this.compatibilitySize(config.canvas_height) : system_info.windowHeight) * this.scale,
this.r_canvas_scale = 1 / this.scale
this.ctx = uni.createCanvasContext(this.canvas_id, this)
this.r_canvas_scale = 1/this.scale
this.ctx = uni.createCanvasContext(this.canvas_id,this)
resolve()
})
},
draw(callback) {
return new Promise((resolve, reject) => {
let stop = setTimeout(() => {
this.ctx.draw(false, setTimeout(() => {
draw(callback){
return new Promise((resolve,reject)=>{
let stop = setTimeout(()=>{
this.ctx.draw(false,setTimeout(()=>{
uni.canvasToTempFilePath({
canvasId: this.canvas_id,
quality: 1,
success: (res) => {
success: (res)=>{
// console.log("--draw--"+ this.canvas_id)
resolve(res)
callback && callback(res)
},
fail: (err) => {
reject(JSON.stringify(err) || "Failed to generate poster:101")
fail:(err)=>{
reject(JSON.stringify(err)|| "Failed to generate poster:101")
}
}, this)
}, 300))
},this)
},300))
clearTimeout(stop)
}, 300)
},300)
})
},
clearCanvas(callback) {
return new Promise(async (resolve, reject) => {
if (!this.ctx) {
clearCanvas(callback){
return new Promise(async (resolve,reject)=>{
if(!this.ctx){
reject("canvas is not initialized:101")
return
} else {
this.ctx.clearRect(0, 0,
parseFloat(this.canvas_width) * this.scale,
parseFloat(this.canvas_height) * this.scale
}else{
this.ctx.clearRect(0,0,
parseFloat(this.canvas_width)*this.scale,
parseFloat(this.canvas_height)*this.scale
)
this.ctx.draw(false, callback)
this.ctx.draw(false,callback)
resolve()
}
})
},
readFile(url) {
readFile(url){
return new Promise((resolve, reject) => {
plus.io.resolveLocalFileSystemURL(url, (obj) => {
obj.file((file) => {
plus.io.resolveLocalFileSystemURL(url,(obj)=>{
obj.file((file)=>{
let fileReader = new plus.io.FileReader()
fileReader.onload = (res) => {
fileReader.onload = (res)=>{
resolve(res.target.result)
}
fileReader.onerror = (err) => {
fileReader.onerror = (err)=>{
reject(err)
}
fileReader.readAsDataURL(file)
}, (err) => {
}, (err)=>{
reject(err)
})
}, (err) => {
},(err)=>{
reject(err)
})
})
},
// 下载图片资源
downLoadNetworkFile(url) {
downLoadNetworkFile(url){
// #ifdef APP-PLUS
if (url.indexOf('http') > -1) {
return new Promise((resolve, reject) => {
if(url.indexOf('http') > -1){
return new Promise((resolve,reject)=>{
uni.downloadFile({
url,
success: (res) => {
success:(res)=>{
// console.log(res.tempFilePath)
if (res.statusCode == 200) {
if(res.statusCode == 200){
resolve(res.tempFilePath)
} else {
}else{
reject("Download Image Fail:102")
}
},
fail: (err) => {
fail:(err)=>{
reject("Download Image Fail:101")
}
})
})
} else {
}else{
return this.readFile(url);
}
// #endif
// #ifdef H5
return new Promise((resolve,reject)=>{
uni.downloadFile({
url,
success:(res)=>{
// console.log(res.tempFilePath)
if(res.statusCode == 200){
resolve(res.tempFilePath)
}else{
reject("Download Image Fail:102")
}
},
urlToBase64(config) {
return new Promise(async (resolve, reject) => {
fail:(err)=>{
reject("Download Image Fail:101")
}
})
})
// #endif
},
urlToBase64(config){
return new Promise(async (resolve,reject)=>{
if (typeof window != 'undefined') {
await this.downLoadNetworkFile(config.url).then(res => { // two function
await this.downLoadNetworkFile(config.url).then(res=>{ // two function
resolve(res)
}).catch(err => {
}).catch(err=>{
reject(err)
})
} else if (typeof plus != 'undefined') {
plus.io.resolveLocalFileSystemURL(config.url, (obj) => {
obj.file((file) => {
}else if (typeof plus != 'undefined') {
plus.io.resolveLocalFileSystemURL(config.url,(obj)=>{
obj.file((file)=>{
let fileReader = new plus.io.FileReader()
fileReader.onload = (res) => {
fileReader.onload = (res)=>{
resolve(res.target.result)
}
fileReader.onerror = (err) => {
fileReader.onerror = (err)=>{
reject(err)
}
fileReader.readAsDataURL(file)
}, (err) => {
}, (err)=>{
reject(err)
})
}, (err) => {
},(err)=>{
reject(err)
})
} else if (typeof wx != 'undefined') {
}else if(typeof wx != 'undefined'){
wx.getFileSystemManager().readFile({
filePath: config.url,
encoding: 'base64',
success: function (res) {
success: function(res) {
resolve('data:image/png;base64,' + res.data)
},
fail: function (error) {
fail: function(error) {
reject(error)
}
})
......@@ -173,7 +197,7 @@ export default {
},
mergeImageByColor(image, color, borderWidth = 0) {
mergeImageByColor(image,color,borderWidth = 0){
let ctx = this.ctx;
const dArr = [-1, -1, 0, -1, 1, -1, -1, 0, 1, 0, -1, 1, 0, 1, 1, 1]; // offset array
// 平移图像
......@@ -183,115 +207,139 @@ export default {
ctx.globalCompositeOperation = "source-in";
ctx.fillStyle = color;
ctx.globalAlpha = 1;
ctx.fillRect(0, 0, this.canvas_width, this.canvas_height);
ctx.fillRect(0, 0, this.canvas_width,this.canvas_height);
// 添加原图
ctx.globalCompositeOperation = "source-atop";
ctx.drawImage(image, 0, 0);
ctx.draw();
},
async mergeImageByImg(item, target) {
async mergeImageByImg(item,target){
let ctx = this.ctx;
ctx.globalCompositeOperation = "source-over";
let fileList = [
await this.downLoadNetworkFile(item),
await this.downLoadNetworkFile(target),
]
let options = this.getScaleOptions();
return new Promise((resolve, reject) => {
resolve(
Promise.all(fileList)
.then((images) => {
.then((images) =>{
const borderWidth = 0;
const dArr = [-1, -1, 0, -1, 1, -1, -1, 0, 1, 0, -1, 1, 0, 1, 1, 1]; // offset array
// 平移图像
for (let i = 0; i < dArr.length; i += 4)
ctx.drawImage(images[0], dArr[i] * borderWidth, dArr[i + 1] * borderWidth, this.canvas_width, this.canvas_height);
ctx.drawImage(images[0], dArr[i] * borderWidth, dArr[i + 1] * borderWidth,this.canvas_width, this.canvas_height);
// 填充描边色
ctx.globalCompositeOperation = "source-in";
ctx.fillRect(0, 0, this.canvas_width, this.canvas_height);
// // 添加原图
ctx.globalCompositeOperation = "source-atop";
ctx.drawImage(images[1], 0, 0, this.canvas_width, this.canvas_height);
ctx.drawImage(images[1], 0, 0,options.width, options.height);
ctx.draw();
})
)
})
},
mergeImages(sources = []) {
return new Promise((resolve, reject) => {
mergeImages(sources = []){
let options = this.getScaleOptions();
return new Promise((resolve,reject) =>{
// Load sources
let fileList = sources.map((source) => {
return this.downLoadNetworkFile(source);
});
resolve(
Promise.all(fileList)
.then((images) => {
console.log(images)
.then((images) =>{
// Draw images to canvas
images.forEach((image) => {
this.ctx.globalAlpha = image.opacity ? image.opacity : 1;
return this.ctx.drawImage(image, 0, 0);
return this.ctx.drawImage(image, 0, 0 ,options.width,options.height);
// return this.ctx.drawImage(image, 0, 0 , this.canvas_width,this.canvas_height);
});
this.ctx.draw();
})
)
})
},
scaleImage() {
let config = {
};
scaleImageInfo(src){
return new Promise((resolve,reject) =>{
uni.getImageInfo({
src: src,
success(res){
resolve(res);
},
fail:(error) =>{
reject(JSON.stringify(error))
}
})
})
},
getScaleOptions(){
let {
width,height
} = this.imagesConfig;
if(width > height){
return {
width: 375,
height: Number(parseFloat(this.canvas_height * (this.canvas_width / width)).toFixed(2))
}
}else{
return {
width: this.compatibilitySize(parseFloat(config.w) * this.scale),
height: this.compatibilitySize(parseFloat(config.h) * this.scale)
width: Number(parseFloat(this.canvas_width * (this.canvas_height / height)).toFixed(2)),
height: 375,
}
}
},
drawImage(config) {
return new Promise(async (resolve, reject) => {
if (config.url) {
drawImage(config){
return new Promise(async (resolve,reject)=>{
if(config.url){
let type = 0 // 1、network image 2、native image 3、base64 image
let image_url
let reg = /^https?/ig;
if (reg.test(config.url)) {
if(reg.test(config.url)){
type = 1
} else {
if ((config.url.indexOf("data:image/png;base64") != -1) || config.url.indexOf("data:image/jpeg;base64") != -1) {
}else{
if((config.url.indexOf("data:image/png;base64") != -1) || config.url.indexOf("data:image/jpeg;base64") != -1){
type = 3
} else {
}else{
type = 2
}
}
if (type == 1) {
if(type == 1){
// network image
await this.downLoadNetworkFile(config.url).then(res => { // two function
await this.downLoadNetworkFile(config.url).then(res=>{ // two function
image_url = res
}).catch(err => {
}).catch(err=>{
reject(err)
return;
})
} else if (type == 2) {
}else if(type == 2){
// native image
const imageInfoResult = await uni.getImageInfo({
src: config.url
});
try {
if (imageInfoResult.length <= 1) {
try{
if(imageInfoResult.length <= 1){
reject(imageInfoResult[0].errMsg + ':404')
return
}
} catch (e) {
reject(e + ':500')
}catch(e){
reject(e+':500')
return
}
let base64 = await this.urlToBase64({ url: imageInfoResult[1].path })
let base64 = await this.urlToBase64({url:imageInfoResult[1].path})
// #ifdef MP-WEIXIN
await this.base64ToNative({ url: base64 }).then(res => {
await this.base64ToNative({url:base64}).then(res=>{
image_url = res
}).catch(err => {
reject(JSON.stringify(err) + ":501")
}).catch(err=>{
reject(JSON.stringify(err)+":501")
return;
})
// #endif
......@@ -299,81 +347,81 @@ export default {
image_url = base64
// #endif
} else if (type == 3) {
}else if(type == 3){
// #ifdef MP-WEIXIN
await this.base64ToNative({ url: config.url }).then(res => {
await this.base64ToNative({url:config.url}).then(res=>{
image_url = res
}).catch(err => {
reject(JSON.stringify(err) + ":500")
}).catch(err=>{
reject(JSON.stringify(err)+":500")
return;
})
// #endif
// #ifndef MP-WEIXIN
image_url = config.url
// #endif
} else {
}else{
reject("Other Type Errors:101")
return
}
if (config.border_width) {
if(config.border_width){
let border_radius = 0
if (config.border_radius) {
if(config.border_radius){
let multiple = config.w / config.border_radius
border_radius = (parseFloat(config.w) + parseFloat(config.border_width)) / multiple
}
// drawRect
await this.drawRect({
x: parseFloat(config.x) - parseFloat(config.border_width) / 2,
y: parseFloat(config.y) - parseFloat(config.border_width) / 2,
w: parseFloat(config.w) + parseFloat(config.border_width),
h: parseFloat(config.h) + parseFloat(config.border_width),
color: config.border_color,
border_radius: border_radius,
border_width: config.border_width,
is_radius: config.is_radius
x:parseFloat(config.x) - parseFloat(config.border_width)/2,
y:parseFloat(config.y) - parseFloat(config.border_width)/2,
w:parseFloat(config.w) + parseFloat(config.border_width),
h:parseFloat(config.h) + parseFloat(config.border_width),
color:config.border_color,
border_radius:border_radius,
border_width:config.border_width,
is_radius:config.is_radius
})
}
if (config.border_radius) {
if(config.border_radius){
this.setNativeBorderRadius(config)
} else if (config.is_radius) {
}else if(config.is_radius){
//已废弃 is_radius
this.ctx.setStrokeStyle("rgba(0,0,0,0)")
this.ctx.save()
this.ctx.beginPath()
this.ctx.arc(this.compatibilitySize(parseFloat(config.x) * this.scale + parseFloat(config.w) * this.scale / 2), this.compatibilitySize(parseFloat(config.y) * this.scale + parseFloat(config.h) * this.scale / 2), this.compatibilitySize(parseFloat(config.w) * this.scale / 2), 0, 2 * Math.PI, false)
this.ctx.arc(this.compatibilitySize(parseFloat(config.x)*this.scale+parseFloat(config.w)*this.scale/2), this.compatibilitySize(parseFloat(config.y)*this.scale+parseFloat(config.h)*this.scale/2), this.compatibilitySize(parseFloat(config.w)*this.scale/2), 0, 2 * Math.PI, false)
this.ctx.stroke();
this.ctx.clip()
}
await this.ctx.drawImage(image_url, this.compatibilitySize(parseFloat(config.x) * this.scale), this.compatibilitySize(parseFloat(config.y) * this.scale), this.compatibilitySize(parseFloat(config.w) * this.scale), this.compatibilitySize(parseFloat(config.h) * this.scale))
await this.ctx.drawImage(image_url,this.compatibilitySize(parseFloat(config.x)*this.scale),this.compatibilitySize(parseFloat(config.y)*this.scale),this.compatibilitySize(parseFloat(config.w)*this.scale),this.compatibilitySize(parseFloat(config.h)*this.scale))
this.ctx.restore() //Restore previously saved drawing context
resolve()
} else {
}else{
let err_msg = "Links cannot be empty:101"
reject(err_msg)
}
})
},
exportImg() {
return new Promise((resolve, reject) => {
setTimeout(() => {
exportImg(){
return new Promise((resolve,reject) => {
setTimeout(() =>{
uni.canvasToTempFilePath({
canvasId: this.canvas_id,
quality: 1,
success: (res) => {
success: (res)=>{
// console.log('res',res.tempFilePath)
resolve(res.tempFilePath)
},
fail: (err) => {
reject(JSON.stringify(err) || "Failed to generate poster:101")
fail:(err)=>{
reject(JSON.stringify(err)|| "Failed to generate poster:101")
}
}, this)
}, 1200)
},this)
},1200)
})
}
......
src/pages/material/createMaterial.vue
View file @ 1f810274
......@@ -425,17 +425,20 @@ export default {
this.$nextTick(async ()=>{
await this.getItem(this.id);
let canvas = this.$refs.eCanvas;
let BASE_URL = this.getBaseUrl();
await canvas.init({
canvas_id: "eCanvas",
canvas_width: 375,
canvas_height: 375,
path: `${BASE_URL}${this.detail.originalImageCode}`
})
await this.$refs['eCanvasHelp'].init({
canvas_id: "eCanvasHelp",
canvas_width: 375,
canvas_height: 375,
path: `${BASE_URL}${this.detail.originalImageCode}`
})
let BASE_URL = this.getBaseUrl();
let sources = [`${BASE_URL}${this.detail.originalImageCode}`].concat(
this.parts.map((item) => `${BASE_URL}${item.pictureCode}`)
);
......@@ -611,7 +614,7 @@ export default {
this.toggleCanvasEditCallback
);
}
this.isEdit = false;
// this.isEdit = false;
} else {
if(this.activeColor.colourId){
this.ontherPartTrigger(
......@@ -660,7 +663,6 @@ export default {
})
let base64 = await this.$refs['eCanvas'].exportImg();
let res = await this.uploadImg(base64);
// console.log(data)
// return;
this.$http("stylelibraryorder.addToShelves", Object.assign({},data,{fileCode: res.fileCode})).then((res) => {
let { code, msg } = res;
......
src/pages/material/entrustManagement.vue
View file @ 1f810274
......@@ -283,7 +283,10 @@ export default {
}
}
},
created() {
// created() {
// this.getList();
// },
onShow(){
this.getList();
},
methods:{
......
src/pages/material/selectType.vue
View file @ 1f810274
......@@ -39,16 +39,18 @@
class="u-flex u-m-b-20">
<view class="item item--round u-flex ">
<view class="item-img u-relative">
<image :src="`${$IMG_URL}${item.effectPictureCode}`" mode="fit" style="width:100%; height: 100%"></image>
<image :src="`${$IMG_URL}${item.effectPictureCode}`"
mode="fit"
style="width:100%; height: 100%"></image>
<u-image width="100rpx" height="100rpx" v-if="item.putawayStatus === 1"
class="item--status"
mode="widthFix"
src="@/static/images/material/status.png">
</u-image>
</view>
<view class="u-flex-1 u-p-l-20 u-p-r-30 u-border-left">
<view class="u-p-l-20 u-p-r-30 u-border-left item-content">
<view class="item-title u-flex ">
<view class="u-flex-1 u-line-1 u-font-32 u-p-t-20 u-p-b-8">{{item.category}}</view>
<view class="u-flex-1 u-line-1 u-font-32 u-p-t-20 u-p-b-8">{{item.styleTag}}</view>
<u-icon size="24" color="#000" name="arrow-right"></u-icon>
</view>
<view class="item-desc u-font-24">{{ item.styleCode }}</view>
......@@ -340,6 +342,9 @@ $main-color: #fff;
height: 150rpx;
//height: 100%
}
&-content{
width: calc(100% - 160rpx)
}
&-title{}
&-desc{}
&-tags{
......
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