Skip to content

W
wechat_currency
Commit a6e04c53 by huahua
Options

提交

parent 0667be6b
Showing with 913 additions and 1606 deletions
pages.json
...@@ -3,25 +3,15 @@ ...@@ -3,25 +3,15 @@
"path": "pages/index/mall", "path": "pages/index/mall",
"style": { "style": {
"navigationBarTitleText": "", "navigationBarTitleText": "",
// "navigationStyle":"custom",//禁用uni-app默认的头部导航
"enablePullDownRefresh": true, "enablePullDownRefresh": true,
"navigationStyle": "custom" "navigationStyle": "custom"
} }
}, },
/*{
"path": "pages/index/machineDetail",
"style": {
"navigationBarTitleText": "色彩高尔夫",
// "navigationStyle":"custom",//禁用uni-app默认的头部导航
"enablePullDownRefresh": true
}
} */
{ {
"path": "pages/index/machineDetail", "path": "pages/index/machineDetail",
"style": { "style": {
"navigationBarTitleText": "", "navigationBarTitleText": "",
"navigationStyle": "custom" //禁用uni-app默认的头部导航 "navigationStyle": "custom" //禁用uni-app默认的头部导航
} }
}, },
{ {
...@@ -29,10 +19,8 @@ ...@@ -29,10 +19,8 @@
"style": { "style": {
"navigationBarTitleText": "", "navigationBarTitleText": "",
"navigationStyle": "custom" //禁用uni-app默认的头部导航 "navigationStyle": "custom" //禁用uni-app默认的头部导航
} }
} }
], ],
"globalStyle": { "globalStyle": {
"navigationBarTextStyle": "#ffffff", "navigationBarTextStyle": "#ffffff",
...@@ -52,7 +40,6 @@ ...@@ -52,7 +40,6 @@
{ {
"root": "pages/mall", "root": "pages/mall",
"pages": [ "pages": [
{ {
"path": "lineUp", "path": "lineUp",
"style": { "style": {
...@@ -72,7 +59,6 @@ ...@@ -72,7 +59,6 @@
"navigationStyle": "custom" "navigationStyle": "custom"
} }
}, },
{ {
"path": "self_help_payment_details_new", "path": "self_help_payment_details_new",
"style": { "style": {
...@@ -80,7 +66,6 @@ ...@@ -80,7 +66,6 @@
"navigationStyle": "custom" "navigationStyle": "custom"
} }
}, },
{ {
"path": "order", "path": "order",
"style": { "style": {
......
pages/index/index.vue
...@@ -262,12 +262,6 @@ ...@@ -262,12 +262,6 @@
style="width: 96upx; height: 96upx;"></image> style="width: 96upx; height: 96upx;"></image>
</view> </view>
</view> </view>
<!-- 切换商品 -->
<!-- <view :class="operation" v-if="!active && !guide_left" @click="changeGoods()"
style="display:flex;z-index: 99;position: fixed; left: 0; bottom:300upx; ">
<image src="../../static/icon_change_good.png" mode="aspectFill"
style="width: 84upx; height: 98upx;"></image>
</view> -->
<!-- 拖拽删除图库 --> <!-- 拖拽删除图库 -->
<view v-if="delete_wrap_state" class="delete-wrap" :class="{'delete-wrap-active':deleteWrap}" <view v-if="delete_wrap_state" class="delete-wrap" :class="{'delete-wrap-active':deleteWrap}"
...@@ -814,7 +808,6 @@ ...@@ -814,7 +808,6 @@
methods: { methods: {
//点击显示动画 //点击显示动画
oclikGifImage() { oclikGifImage() {
this.isShowGif = false; this.isShowGif = false;
...@@ -1828,36 +1821,21 @@ ...@@ -1828,36 +1821,21 @@
}, },
// 边框移动 // 边框移动
edgeStart(e, type) { edgeStart(e, type) {
// 获取当前选中的部件 //获取当前选中的部件
var item = items[index]; var item = items[index];
item.typetext = type //判断边框 item.typetext = type //判断边框
//获取作为移动前坐标 //获取作为移动前坐标
item.edgestartX = e.touches[0].clientX; item.edgestartX = e.touches[0].clientX;
item.edgestartY = e.touches[0].clientY; item.edgestartY = e.touches[0].clientY;
item.min_width = item.width //记录坐标
item.min_height = item.height
if (item.min_width == 50) {
item.min_width = 55
}
if (item.min_height == 50) {
item.min_height = 55
}
// 记录坐标
item.scaleone = item.width / item.height item.scaleone = item.width / item.height
item.initRightBottomPoint = item.rightBottomPoint
item.initRightTopPoint = item.rightTopPoint
item.initLeftTopPoint = item.leftTopPoint
item.initLeftBottomPoint = item.leftBottomPoint
item.initLeftMiddlePoint = item.leftMiddlePoint
item.initRightMiddlePoint = item.rightMiddlePoint
item.initTopMiddlePoint = item.topMiddlePoint
item.initBottomMiddlePoint = item.bottomMiddlePoint
item.initCenterPos = item.centerPos item.initCenterPos = item.centerPos
// 获取编辑框的左边距和上边距 // 获取编辑框的左边距和上边距
var mLeft = this.getLeft(); var mLeft = this.getLeft();
var mTop = this.getTop(); var mTop = this.getTop();
item.mLeft = mLeft item.mLeft = mLeft
item.mTop = mTop item.mTop = mTop
drag.recordPressDownData(item);
}, },
// 边框移动结束 // 边框移动结束
edgeEnd(e) { edgeEnd(e) {
...@@ -1912,14 +1890,12 @@ ...@@ -1912,14 +1890,12 @@
that.Worksdetaildata(item) that.Worksdetaildata(item)
} }
} else if (this.e_active == 2 || this.e_active == 23) { } else if (this.e_active == 2 || this.e_active == 23) {
//''console.log("进来壁纸")
that.Worksdetaildata(item) that.Worksdetaildata(item)
} else if (this.e_active == 22) { //特效 } else if (this.e_active == 22) { //特效
this.shape_image = item.image this.shape_image = item.image
this.shape_id = item.id this.shape_id = item.id
this.shape_price = item.sales_price this.shape_price = item.sales_price
if (this.shape_image != '' && this.data.itemList.length == 0) { if (this.shape_image != '' && this.data.itemList.length == 0) {
// console.log(this.data.itemList.length)
this.showone = !this.showone this.showone = !this.showone
} }
} else if (this.e_active == 99) { } else if (this.e_active == 99) {
...@@ -2132,7 +2108,7 @@ ...@@ -2132,7 +2108,7 @@
frame_top: null, // 裁剪窗口y frame_top: null, // 裁剪窗口y
image_top: null, // 图片y image_top: null, // 图片y
}) })
// 提示用户此贴图可用卷 // 提示用户此贴图可用卷
if (result.is_discount == '1') { if (result.is_discount == '1') {
if (this.$base.coupon_flag_desc == '') return; if (this.$base.coupon_flag_desc == '') return;
...@@ -2324,9 +2300,7 @@ ...@@ -2324,9 +2300,7 @@
this.queryPage.shape_category_id = item.id this.queryPage.shape_category_id = item.id
this.currentId = index; this.currentId = index;
this.currentIndex = Math.max(0, index - 1); this.currentIndex = Math.max(0, index - 1);
/*this.$nextTick(() => {
this.$refs['shapeScrollView'].open(this.queryPage)
})*/
} else if (this.e_active == 23) { //壁纸 } else if (this.e_active == 23) { //壁纸
this.currentId_wallpaper = index; this.currentId_wallpaper = index;
this.currentIndex_wallpaper = Math.max(0, index - 1); this.currentIndex_wallpaper = Math.max(0, index - 1);
...@@ -2366,7 +2340,6 @@ ...@@ -2366,7 +2340,6 @@
//this.currentIndex = this.currentIndex; //this.currentIndex = this.currentIndex;
this.collection_currentId = this.currentId; this.collection_currentId = this.currentId;
this.collection_currentIndex = this.currentIndex; this.collection_currentIndex = this.currentIndex;
this.$nextTick(() => { this.$nextTick(() => {
setTimeout(function() { setTimeout(function() {
this.$refs['scrollList'].open({ this.$refs['scrollList'].open({
...@@ -2450,39 +2423,12 @@ ...@@ -2450,39 +2423,12 @@
if (e == 1) { //模板 if (e == 1) { //模板
} else if (e == 2) { //贴图 } else if (e == 2) { //贴图
this.Adlists = this.diy_bannerList
this.queryPage.goods_id = this.data.goods_id
this.brands = this.Material_category
this.currentId = this.currentId_Material; this.category(2)
this.currentIndex = this.currentIndex_Material;
this.queryPage.s = 'Material.list'
this.queryPage.works_category_id = null
this.queryPage.material_category_id = null
if (this.brands[this.currentId].title == '热门') {
this.queryPage.is_hot = '1'
this.queryPage.is_new = null
} else if (this.brands[this.currentId].title == '最新') {
this.queryPage.is_new = '1'
this.queryPage.is_hot = null
} else {
this.queryPage.is_hot = null
this.queryPage.is_new = null
this.queryPage.material_category_id = this.Material_category[0].id
if (this.Material_category_id) {
this.queryPage.material_category_id = this.Material_category_id
}
}
if (this.mapping_material_series_currentId != 0) {
this.queryPage.material_series_id = this.mapping_material_series_currentId
this.material_series_currentId = this.mapping_material_series_currentId
}
this.MaterialseriesList()
this.$nextTick(() => {
this.$refs['scrollList'].open({
e: e,
queryPage: this.queryPage,
})
})
} else if (e == 3) { //文本 } else if (e == 3) { //文本
index = null index = null
this.addtext = true this.addtext = true
...@@ -2504,40 +2450,11 @@ ...@@ -2504,40 +2450,11 @@
} else if (e == 22) { //形状 } else if (e == 22) { //形状
} else if (e == 23) { //壁纸 } else if (e == 23) { //壁纸
this.Adlists = this.diy_backList
this.queryPage.goods_id = this.data.goods_id this.category(23)
this.brands = this.wallpaper_category //壁纸分类
this.currentId = this.currentId_wallpaper; /* 控制被选中 */
this.currentIndex = this.currentIndex_wallpaper; /* 控制位置 */
this.queryPage.s = 'Material.list'
this.queryPage.works_category_id = null //作品选中分类id
this.queryPage.material_category_id = null //贴图选中分类
if (this.wallpaper_material_series_currentId != 0) {
this.queryPage.material_series_id = this.wallpaper_material_series_currentId
this.material_series_currentId = this.wallpaper_material_series_currentId
}
//console.log("brands="+this.currentId); /* this.brands.length */
if (this.brands[this.currentId].title == '热门') {
this.queryPage.is_hot = '1'
this.queryPage.is_new = null
} else if (this.brands[this.currentId].title == '最新') {
this.queryPage.is_new = '1'
this.queryPage.is_hot = null
} else {
this.queryPage.is_hot = null
this.queryPage.is_new = null
this.queryPage.material_category_id = this.wallpaper_category[0].id
if (this.wallpaper_category_id) {
this.queryPage.material_category_id = this.wallpaper_category_id
}
}
this.MaterialseriesList()
this.$nextTick(() => {
this.$refs['scrollList'].open({
e: e,
queryPage: this.queryPage,
})
})
} else if (e == 24) { } else if (e == 24) {
this.Adlists = this.diy_bannerList this.Adlists = this.diy_bannerList
this.backgroundColor = true; this.backgroundColor = true;
...@@ -2588,154 +2505,7 @@ ...@@ -2588,154 +2505,7 @@
}, },
//打开弹框 1模板 2贴图 3字体
/*showPopup(e) {
this.delete_wrap_state = false
this.showone = false
this.e_active = e
this.togglePopup('bottom', 'share')
this.$refs['textsettingsshare'].close()
this.queryPage.page = 1
if (e == 1) { //模板
} else if (e == 2) { //贴图
this.backgroundColor = false
this.Adlists = this.diy_bannerList
this.queryPage.goods_id = null;
this.brands = this.Material_category
this.currentId = this.currentId_Material;
this.currentIndex = this.currentIndex_Material;
this.queryPage.s = 'Material.list'
this.queryPage.works_category_id = null
this.queryPage.material_category_id = null
if (this.brands[this.currentId].title == '热门') {
this.queryPage.is_hot = 1
this.queryPage.is_new = null
} else if (this.brands[this.currentId].title == '最新') {
this.queryPage.is_new = 1
this.queryPage.is_hot = null
} else {
this.queryPage.is_hot = null
this.queryPage.is_new = null
this.queryPage.material_category_id = this.Material_category[0].id
if (this.Material_category_id) {
this.queryPage.material_category_id = this.Material_category_id
}
}
this.MaterialseriesList()
this.$nextTick(() => {
this.$refs['scrollList'].open({
e: e,
queryPage: this.queryPage,
})
})
} else if (e == 3) { //文本
index = null
this.addtext = true
this.data.currentText = ''
this.$nextTick(() => {
this.$refs['textsettings'].open({
data: this.data,
bg_text_color: this.bg_text_color
})
})
} else if (e == 4) {
this.addtext = false
this.$nextTick(() => {
this.$refs['textsettings'].open({
data: this.data,
bg_text_color: this.bg_text_color
})
})
} else if (e == 22) { //形状
this.queryPage.goods_id = this.data.goods_id
this.brands = this.Works_category
this.currentId = this.currentId_Works;
this.currentIndex = this.currentIndex_Works;
this.queryPage.s = 'Material.getShapeList'
this.queryPage.material_category_id = null
this.queryPage.works_category_id = null
this.queryPage.shape_category_id = null
this.queryPage.is_hot = null
this.queryPage.is_new = null
this.queryPage.shape_category_id = this.Works_category[0].id
if (this.Works_category_id) {
this.queryPage.shape_category_id = this.Works_category_id
}
this.$nextTick(() => {
this.$refs['shapeScrollView'].open(this.queryPage)
})
} else if (e == 23) { //壁纸
this.Adlists = this.diy_backList
this.queryPage.goods_id = this.data.goods_id
this.brands = this.wallpaper_category //壁纸分类
this.currentId = this.currentId_wallpaper; /* 控制被选中 */
/* this.currentIndex = this.currentIndex_wallpaper; /* 控制位置 */
/* this.queryPage.s = 'Material.list'
this.queryPage.works_category_id = null
this.queryPage.material_category_id = null
if (this.brands[this.currentId].title == '热门') {
this.queryPage.is_hot = '1'
this.queryPage.is_new = null
} else if (this.brands[this.currentId].title == '最新') {
this.queryPage.is_new = '1'
this.queryPage.is_hot = null
} else {
this.queryPage.is_hot = null
this.queryPage.is_new = null
this.queryPage.material_category_id = this.wallpaper_category[0].id
if (this.wallpaper_category_id) {
this.queryPage.material_category_id = this.wallpaper_category_id
}
}
this.MaterialseriesList()
this.$nextTick(() => {
this.$refs['scrollList'].open({
e: e,
queryPage: this.queryPage,
})
})
} else if (e == 25) {
this.Adlists = this.diy_bannerList
this.queryPage.goods_id = null
this.brands = this.Material_category
this.currentId = this.currentId_Material;
this.currentIndex = this.currentIndex_Material;
this.queryPage.s = 'Material.list'
this.queryPage.works_category_id = null
this.queryPage.material_category_id = null
if (this.brands[this.currentId].title == '热门') {
this.queryPage.is_hot = 1
this.queryPage.is_new = null
} else if (this.brands[this.currentId].title == '最新') {
this.queryPage.is_new = 1
this.queryPage.is_hot = null
} else {
this.queryPage.is_hot = null
this.queryPage.is_new = null
this.queryPage.material_category_id = this.Material_category[0].id
if (this.Material_category_id) {
this.queryPage.material_category_id = this.Material_category_id
}
}
this.MaterialseriesList()
this.e_active = 2
this.queryPage.page = 1
this.backgroundColor = true
this.$nextTick(() => {
this.$refs['bgColor'].open()
})
} else if (e == 28) {
this.Adlists = this.diy_backList
this.backgroundColor = true
this.$nextTick(() => {
setTimeout(function() {
this.$refs['bgColor'].open()
}.bind(this), 200)
})
}
}, */
cancel(type) { //关闭弹框 cancel(type) { //关闭弹框
this.isShowGif = false; this.isShowGif = false;
...@@ -3201,6 +2971,11 @@ ...@@ -3201,6 +2971,11 @@
if (item.type == 1) { if (item.type == 1) {
currentText = item.content; currentText = item.content;
} }
item.mLeft = item.left;
item.mTop = item.top;
drag.recordPressDownData(item);
//赋值 //赋值
this.data.listActive = true this.data.listActive = true
this.data.cidx = index this.data.cidx = index
...@@ -3288,20 +3063,14 @@ ...@@ -3288,20 +3063,14 @@
item.r = this.computeDistance(item.x, item.y, item.left, item.top); item.r = this.computeDistance(item.x, item.y, item.left, item.top);
// 记录坐标 // 记录坐标
item.scaleone = item.width / item.height item.scaleone = item.width / item.height
item.initRightBottomPoint = item.rightBottomPoint
item.initRightTopPoint = item.rightTopPoint
item.initLeftTopPoint = item.leftTopPoint
item.initLeftBottomPoint = item.leftBottomPoint
item.initLeftMiddlePoint = item.leftMiddlePoint
item.initRightMiddlePoint = item.rightMiddlePoint
item.initTopMiddlePoint = item.topMiddlePoint
item.initBottomMiddlePoint = item.bottomMiddlePoint
item.initCenterPos = item.centerPos item.initCenterPos = item.centerPos
// 获取编辑框的左边距和上边距 // 获取编辑框的左边距和上边距
var mLeft = this.getLeft(); var mLeft = this.getLeft();
var mTop = this.getTop(); var mTop = this.getTop();
item.mLeft = mLeft item.mLeft = mLeft
item.mTop = mTop item.mTop = mTop
drag.recordPressDownData(item);
//赋值 //赋值
this.data.listActive = true this.data.listActive = true
}, },
...@@ -3513,8 +3282,6 @@ ...@@ -3513,8 +3282,6 @@
}, },
// 移除图片 // 移除图片
removedeleteItem(item, ix) { removedeleteItem(item, ix) {
//this.active = false;
//this.guide_left = false
if (!this.active) { if (!this.active) {
index = items.length - 1 index = items.length - 1
items.splice(index, 1); // 删除指定的部件 items.splice(index, 1); // 删除指定的部件
...@@ -3615,10 +3382,8 @@ ...@@ -3615,10 +3382,8 @@
} }
return; return;
} }
var item = items[index]; var item = items[index];
item.content = e.detail.value; item.content = e.detail.value;
var that = this; var that = this;
//赋值 //赋值
this.data.currentText = e.detail.value this.data.currentText = e.detail.value
...@@ -3633,9 +3398,6 @@ ...@@ -3633,9 +3398,6 @@
var width = res[0].width; var width = res[0].width;
var rate = item.width / width; var rate = item.width / width;
var tmpSize = item.font_size * rate; var tmpSize = item.font_size * rate;
/* console.log("tmpSizewidth=" + width + "item.width=" + item.width + "diyWidth=" + that.data
.editorWidth) */
//console.log("输入tmpSize大小=" + tmpSize)
if (tmpSize > maxFontSize) { if (tmpSize > maxFontSize) {
item.font_size = maxFontSize; item.font_size = maxFontSize;
item.height = maxFontSize * heightRate; item.height = maxFontSize * heightRate;
...@@ -3654,7 +3416,6 @@ ...@@ -3654,7 +3416,6 @@
}, },
async text_await(e) { async text_await(e) {
// 获取当前选中的部件 // 获取当前选中的部件
var item = items[index]; var item = items[index];
if (e.detail.value != item.content) { if (e.detail.value != item.content) {
...@@ -3669,41 +3430,20 @@ ...@@ -3669,41 +3430,20 @@
var query = wx.createSelectorQuery(); var query = wx.createSelectorQuery();
query.select('#item-text').boundingClientRect(); query.select('#item-text').boundingClientRect();
query.exec(function(res) { query.exec(function(res) {
console.log(res) //console.log(res)
var width = res[0].width; var width = res[0].width;
var rate = item.width / width; var rate = item.width / width;
/* console.log(res)
console.log("输入tmpSizewidth=" + width + "item.width=" + item.width + "diyWidth=" + that
.data.editorWidth)*/
var tmpSize = item.font_size * rate; var tmpSize = item.font_size * rate;
/* console.log("输入tmpSize大小=" + tmpSize) */
if (tmpSize > maxFontSize) { if (tmpSize > maxFontSize) {
item.font_size = maxFontSize; item.font_size = maxFontSize;
item.height = maxFontSize * heightRate; item.height = maxFontSize * heightRate;
item.top = item.y - (item.height / 2); item.top = item.y - (item.height / 2);
/* } else if (tmpSize < 11) { //判断字体小于10等于10
let differWid = 0;
if (width > item.width) {
differWid = width - item.width;
var fontSize = 10 - differWid / 10;
item.font_size = fontSize;
item.height = fontSize * heightRate;
item.top = item.y - (item.height / 2);
} else {
item.font_size = 9;
item.height = 9 * heightRate;
item.top = item.y - (item.height / 2);
} */
} else { } else {
item.font_size = item.font_size * rate; item.font_size = item.font_size * rate;
item.height = item.height * rate; item.height = item.height * rate;
item.top = item.y - (item.height / 2); item.top = item.y - (item.height / 2);
} }
// that.setData({itemList:items});
that.setData({ that.setData({
data: that.data data: that.data
}) })
...@@ -3796,23 +3536,16 @@ ...@@ -3796,23 +3536,16 @@
uni.getImageInfo({ uni.getImageInfo({
src: result.front_image_old, src: result.front_image_old,
success: (front_image) => { success: (front_image) => {
// this.data.bgHeight = (front_image.height + 600) * (this.data.bgWidth / front_image.width) // 画布高度
this.data.bgHeight = this.data.bgHeight // 画布高度 this.data.bgHeight = this.data.bgHeight // 画布高度
this.editory = (this.data.bgHeight - (result.design_height * this.data this.editory = (this.data.bgHeight - (result.design_height * this.data.pixelRate)) / 2; //辅助线距离
.pixelRate)) / 2; //辅助线距离
this.data.editorWidth = result.design_width * this.data.pixelRate // 设计宽度 this.data.editorWidth = result.design_width * this.data.pixelRate // 设计宽度
this.data.editorHeight = result.design_height * this.data.pixelRate // 设计高度 this.data.editorHeight = result.design_height * this.data.pixelRate // 设计高度
this.editor_top = this.data.editorHeight * Number(this this.editor_top = this.data.editorHeight * Number(this.location_scale) //辅助线距离
.location_scale) //辅助线距离 this.design_widthrate = (result.design_width / result.print_width) // 设计区放大宽度比率
this.design_widthrate = (result.design_width / result this.design_heightrate = (result.design_height / result.print_height) // 设计区放大高度比率
.print_width) // 设计区放大宽度比率
this.design_heightrate = (result.design_height / result
.print_height) // 设计区放大高度比率
this.front_image_long = true this.front_image_long = true
} }
}) })
//console.log("this.data.bgHeight=" + this.data.bgHeight);
this.data.bgImage = result.front_image // 背景图 this.data.bgImage = result.front_image // 背景图
this.data.bgImage_old = result.front_image_old // 旧背景图 this.data.bgImage_old = result.front_image_old // 旧背景图
//this.data.bgImage_old = result.front_image; //this.data.bgImage_old = result.front_image;
...@@ -3832,87 +3565,190 @@ ...@@ -3832,87 +3565,190 @@
}); });
}); });
}, },
category() { category(type) {
//查询贴图分类 key=0贴图 //查询贴图分类 key=0贴图
homeservice.queryList({ if (type == 2) {
s: 'Material.category', homeservice.queryList({
machine_id: this.machine_id, s: 'Material.category',
key: 0, machine_id: this.machine_id,
}).then(result => { key: 0,
this.Material_category = result }).then(result => {
this.Material_category.unshift({ this.Material_category = result
icon: "../../static/image/icon_new_default.png", this.Material_category.unshift({
icon_click: "../../static/image/icon_new_pressed.png", icon: "../../static/image/icon_new_default.png",
title: "最新" icon_click: "../../static/image/icon_new_pressed.png",
}, ) title: "最新"
}).catch(err => { }, )
uni.showToast({ this.Adlists = this.diy_bannerList
title: err.msg, this.queryPage.goods_id = this.data.goods_id
icon: 'none' this.brands = this.Material_category
}) this.currentId = this.currentId_Material;
}); this.currentIndex = this.currentIndex_Material;
this.queryPage.s = 'Material.list'
this.queryPage.works_category_id = null
this.queryPage.material_category_id = null
if (this.brands[this.currentId].title == '热门') {
this.queryPage.is_hot = '1'
this.queryPage.is_new = null
} else if (this.brands[this.currentId].title == '最新') {
this.queryPage.is_new = '1'
this.queryPage.is_hot = null
} else {
this.queryPage.is_hot = null
this.queryPage.is_new = null
this.queryPage.material_category_id = this.Material_category[0].id
if (this.Material_category_id) {
this.queryPage.material_category_id = this.Material_category_id
}
}
if (this.mapping_material_series_currentId != 0) {
this.queryPage.material_series_id = this.mapping_material_series_currentId
this.material_series_currentId = this.mapping_material_series_currentId
}
this.MaterialseriesList()
this.$nextTick(() => {
this.$refs['scrollList'].open({
e: 2,
queryPage: this.queryPage,
})
})
//查询壁纸分类 key=1壁纸 }).catch(err => {
homeservice.queryList({ uni.showToast({
s: 'Material.category', title: err.msg,
machine_id: this.machine_id, icon: 'none'
key: 1, })
}).then(result => { });
console.log("壁纸") }
this.wallpaper_category = result
this.wallpaper_category.unshift({
icon: "../../static/image/icon_new_default.png",
icon_click: "../../static/image/icon_new_pressed.png",
title: "最新"
}, )
}).catch(err => { if (type == 23) {
uni.showToast({ //查询壁纸分类 key=1壁纸
title: err.msg, homeservice.queryList({
icon: 'none' s: 'Material.category',
machine_id: this.machine_id,
key: 1,
}).then(result => {
this.wallpaper_category = result
this.wallpaper_category.unshift({
icon: "../../static/image/icon_new_default.png",
icon_click: "../../static/image/icon_new_pressed.png",
title: "最新"
}, )
this.Adlists = this.diy_backList
this.queryPage.goods_id = this.data.goods_id
this.brands = this.wallpaper_category //壁纸分类
this.currentId = this.currentId_wallpaper; /* 控制被选中 */
this.currentIndex = this.currentIndex_wallpaper; /* 控制位置 */
this.queryPage.s = 'Material.list'
this.queryPage.works_category_id = null //作品选中分类id
this.queryPage.material_category_id = null //贴图选中分类
if (this.wallpaper_material_series_currentId != 0) {
this.queryPage.material_series_id = this.wallpaper_material_series_currentId
this.material_series_currentId = this.wallpaper_material_series_currentId
}
if (this.brands[this.currentId].title == '热门') {
this.queryPage.is_hot = '1'
this.queryPage.is_new = null
} else if (this.brands[this.currentId].title == '最新') {
this.queryPage.is_new = '1'
this.queryPage.is_hot = null
} else {
this.queryPage.is_hot = null
this.queryPage.is_new = null
this.queryPage.material_category_id = this.wallpaper_category[0].id
if (this.wallpaper_category_id) {
this.queryPage.material_category_id = this.wallpaper_category_id
}
}
this.MaterialseriesList()
this.$nextTick(() => {
this.$refs['scrollList'].open({
e: 23,
queryPage: this.queryPage,
})
})
}).catch(err => {
uni.showToast({
title: err.msg,
icon: 'none'
});
}); });
}); }
},
/* homeservice.queryList({ //获取自定义产品数据详情
s: 'Material.getShapeCategory', getCustomDetail() {
'machine_id': this.machine_id || null this.isReady = false;
}).then(result => { this.front_image_long = false
this.Works_category = result
}).catch(err => {
uni.showToast({
title: err.msg,
icon: 'none'
})
});
homeservice.queryList({ homeservice.queryList({
s: 'Material.category', s: 'Product.getCustomize',
'machine_id': this.machine_id || null id: this.data.goods_id
}).then(result => { }).then(result => {
this.Material_category = result this.queryPage.goods_category_id = result.goods_category_id //星形接口列表增加，产品分类参数
this.Material_category.unshift({ //读取背景图
icon: "../../static/image/icon_new_default.png", uni.getImageInfo({
icon_click: "../../static/image/icon_new_pressed.png", src: result.front_image,
title: "最新" success: (front_image) => {
}, ) this.data.bgHeight = front_image.height * (this.data.bgWidth / front_image.width) // 画布高度
this.editory = result.center_scale * (this.data.bgWidth / front_image.width) //辅助线距离
this.front_image_long = true
}
})
this.titlename = this.options.name
uni.setNavigationBarTitle({
title: this.titlename
}) //修改头部名称
this.data.bgImage = result.front_image // 背景图
this.data.bgImage_old = result.front_image_old // 旧背景图
if (this.$base.surfaceData.surface_type == 0 || this.$base.surfaceData.surface_type == 2) { //默认
this.background_color = 'none' //手机底色
}
this.mix_scale = result.mix_scale //上传图片比率
this.design_height = result.design_height // 设计宽度
this.design_width = result.design_width // 设计高度
this.print_height = result.print_height // 设计基础宽度
this.print_width = result.print_width // 设计基础高度
this.design_widthrate = result.design_width / result.print_width // 设计区放大宽度比率
this.design_heightrate = result.design_height / result.print_height // 设计区放大高度比率
this.data.editorWidth = this.design_width * this.data.pixelRate // 设计宽度
this.data.editorHeight = this.design_height * this.data.pixelRate // 设计高度
this.center_scale = result.center_scale // 设计区中心点比率
this.location_scale = result.location_scale // 辅助线比率
this.editor_top = this.data.editorHeight * Number(this.location_scale) //辅助线距离
let scaleWidth = this.data.editorWidth / 100;
let scaleHeight = this.data.editorHeight / 185;
this.real_print_height = (this.options.HeightIndex / 3) * scaleWidth; // 设计宽度
this.real_print_width = (this.options.WidthIndex / 3) * scaleHeight;
this.clipLeft = (this.data.editorWidth - this.real_print_width) / 2;
this.clipRight = this.clipLeft;
this.clipTop = (this.data.editorHeight - this.real_print_height) / 2;
this.clipButtom = this.clipTop;
this.filletSize = (this.options.fillet / 3) * scaleWidth;
if (snapshot.length > 0) {
let listSnapshot = []
snapshot.forEach((item, index) => {
let list = JSON.parse(item)
list.bgImage = this.data.bgImage
list.bgImage_old = this.data.bgImage_old
list.goods_id = this.data.goods_id
listSnapshot.push(JSON.stringify(list))
})
snapshot = listSnapshot
}
}).catch(err => { }).catch(err => {
uni.showToast({ uni.showToast({
title: err.msg, title: err.msg,
icon: 'none' icon: 'none'
}) });
}); */ });
}, },
itemlongtap(e) { //长按事件 itemlongtap(e) { //长按事件
var item = items[index]; // 获取当前选中的部件 var item = items[index]; // 获取当前选中的部件
// if(!this.isRotate && this.system_config.golf_diy.value == 1){
// if (item.type != 1) {
// this.$nextTick(() => {
// this.$refs['replacebottom'].open()
// })
// }
// }
}, },
itemTouchStart: infoListTouchEvent.start.bind(infoListTouchEvent), itemTouchStart: infoListTouchEvent.start.bind(infoListTouchEvent),
itemTouchMove: infoListTouchEvent.move.bind(infoListTouchEvent), itemTouchMove: infoListTouchEvent.move.bind(infoListTouchEvent),
...@@ -3920,11 +3756,8 @@ ...@@ -3920,11 +3756,8 @@
itemTouchCancel: infoListTouchEvent.cancel.bind(infoListTouchEvent) itemTouchCancel: infoListTouchEvent.cancel.bind(infoListTouchEvent)
}, },
onLoad(options) { onLoad(options) {
// machine_id=100036&key=2
// console.log(options)
items = [] items = []
this.data.goods_id = options.good_id; this.data.goods_id = options.good_id;
//console.log("this.data.goods_id="+options.good_id)
let that = this; let that = this;
wx.createSelectorQuery().select('.delete-wrap').boundingClientRect(function(rect) { wx.createSelectorQuery().select('.delete-wrap').boundingClientRect(function(rect) {
if (rect != null) { if (rect != null) {
...@@ -3953,8 +3786,7 @@ ...@@ -3953,8 +3786,7 @@
} else { } else {
that.isShowGif = false; that.isShowGif = false;
var curTime = e.timeStamp var curTime = e.timeStamp
var lastTime = e.currentTarget.dataset var lastTime = e.currentTarget.dataset.time // 通过e.currentTarget.dataset.time 访问到绑定到该组件的自定义数据
.time // 通过e.currentTarget.dataset.time 访问到绑定到该组件的自定义数据
if (curTime - lastTime > 0) { if (curTime - lastTime > 0) {
if (curTime - lastTime < 300) { //是双击事件 if (curTime - lastTime < 300) { //是双击事件
if (items[index].type == 0) { if (items[index].type == 0) {
...@@ -3962,7 +3794,7 @@ ...@@ -3962,7 +3794,7 @@
that.$refs.index.init(); that.$refs.index.init();
} }
} else { } else {
// 点击选中部件 //点击选中部件
that.itemClick(e); that.itemClick(e);
} }
} }
...@@ -3983,14 +3815,13 @@ ...@@ -3983,14 +3815,13 @@
that.dragEnd(e) that.dragEnd(e)
let item = items[index]; let item = items[index];
if (item.scale != 1) { if (item.scale != 1) {
// 初始化的位置 //初始化的位置
drag.initPosscale(item) drag.initPosscale(item)
drag.getTransferPositionangle(item.left, item.top, item.width, item.height, item.angle, drag.getTransferPositionangle(item.left, item.top, item.width, item.height, item.angle,item.centerPos, item)
item.centerPos, item) //缩放
// 缩放
item.scale = 1; item.scale = 1;
item.lastScale = 1 item.lastScale = 1
// //图片放大响应的右下角按钮同比缩小 //图片放大响应的右下角按钮同比缩小
item.oScale = 1 / item.scale; item.oScale = 1 / item.scale;
} }
//底部删除框出现动画 //底部删除框出现动画
...@@ -4005,9 +3836,7 @@ ...@@ -4005,9 +3836,7 @@
} }
}, },
touchCancel: function(e) { touchCancel: function(e) {
that.isShowGif = false; that.isShowGif = false;
that.$refs['textsettingsshare'].close() that.$refs['textsettingsshare'].close()
if (items.length > 0) { if (items.length > 0) {
let item = items[index]; let item = items[index];
...@@ -4059,7 +3888,7 @@ ...@@ -4059,7 +3888,7 @@
} }
} }
}) })
//console.log("machine_id="+options.machine_id);
//获取屏幕宽高 //获取屏幕宽高
wx.getSystemInfo({ wx.getSystemInfo({
success: function(res) { success: function(res) {
...@@ -4069,17 +3898,14 @@ ...@@ -4069,17 +3898,14 @@
that.data.bgWidth = res.windowWidth // 画布宽度 that.data.bgWidth = res.windowWidth // 画布宽度
that.data.bgHeight = res.windowHeight // (861 / 1196) // 画布高度 高度比率 * (861 / 1196) that.data.bgHeight = res.windowHeight // (861 / 1196) // 画布高度 高度比率 * (861 / 1196)
that.data.pixelRate = pixelRate // 屏幕宽度比率 that.data.pixelRate = pixelRate // 屏幕宽度比率
//if(options.machine_id != undefined) { // 判断是从设备进来
that.machine_id = options.machine_id || null // 设备id that.machine_id = options.machine_id || null // 设备id
that.queryPage.machine_id = options.machine_id || null // 设备id that.queryPage.machine_id = options.machine_id || null // 设备id
//that.data.goods_id = 100 // 商品id
that.key = 2 that.key = 2
that.goodslist() // 获取产品详情数据 that.goodslist() // 获取产品详情数据
//}
that.category() // 作品分类 贴图分类
} }
}) })
}, },
onShow() { onShow() {
var _this = this var _this = this
wx.request({ wx.request({
...@@ -4365,9 +4191,7 @@ ...@@ -4365,9 +4191,7 @@
position: absolute; position: absolute;
z-index: 99; z-index: 99;
right: 4upx; right: 4upx;
/* width: 6upx; */
height: 40upx; height: 40upx;
/* background: #5CE6B5; */
top: calc(50% - 20upx); top: calc(50% - 20upx);
} }
...@@ -4469,12 +4293,6 @@ ...@@ -4469,12 +4293,6 @@
margin: auto; margin: auto;
} }
// .tool_li_text {
// text-align: center;
// color: #FFFFFF;
// font-size: 15upx;
// margin-top: 10upx;
// }
} }
} }
...@@ -4515,25 +4333,6 @@ ...@@ -4515,25 +4333,6 @@
align-items: center; align-items: center;
height: 98upx; height: 98upx;
right: 0; right: 0;
// background: #292933;
// .tool_li {
// width: 25%;
// .tool_li_img {
// width: 44upx;
// height: 40upx;
// display: block;
// margin: auto;
// }
// .tool_li_text {
// text-align: center;
// color: #FFFFFF;
// font-size: 22upx;
// margin-top: 10upx;
// }
// }
.tool_add { .tool_add {
width: 207upx; width: 207upx;
......
pages/index/js/drag.js
...@@ -2,977 +2,455 @@ const drag = { ...@@ -2,977 +2,455 @@ const drag = {
/** /**
* 部件缩放中事件四角缩放 * 部件缩放中事件四角缩放
*/ */
scaleMove(e,item,data) { scaleMove(e, item, data, allLineListData, designWidth, designHeight) {
var minwwidth = 50
var minwheight = 50 item.isShowLineV = false; //初始化默认不显示
var shock = true item.isShowLineH = false; //初始化默认不显示
var minwwidth = 20
if(item.type == 0 || item.type == 2){ var minwheight = 20
minwwidth = 50 if (item.type == 0 || item.type == 2) {
minwheight = 50 minwwidth = 20
shock = true minwheight = 20
}else if(item.type == 1){ } else if (item.type == 1) {
minwwidth = 50 minwwidth = 20
minwheight = 20 minwheight = 20
shock = false
} }
//记录移动后的位置 item.touchMoveX = e.touches[0].clientX; //记录移动后的x位置
item.touchMoveX = e.touches[0].clientX; item.touchMoveY = e.touches[0].clientY; //记录移动后的y位置
item.touchMoveY = e.touches[0].clientY;
//属性 //属性
item.active = false //辅助线 item.active = false //辅助线
item.activeguide = false //辅助线 item.activeguide = false //辅助线
item.activescale = false // 旋转状态 item.activescale = false // 旋转状态
item.activehorn = true // 角状态 item.activehorn = true // 角状态
item.activeedge = false // 边状态 item.activeedge = false // 边状态
// 记录移动的距离 let width = item.touchMoveX - item.touchX //计算手指移动x轴距离
var ax = item.touchMoveX - item.touchX; let height = item.touchMoveY - item.touchY //计算手指移动y轴距离
var ay = item.touchMoveY - item.touchY; let c = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2)) //使用三角公式计算边c长度
var x1 = item.left; let angle = this.getAngle(width, height) //计算移动位置角度差
var y1 = item.top; let rad = (Math.PI / 180) * (angle - item.newRotate) //旋转角度转换公式
var x2 = item.left + item.width; let diffY = (Math.sin(rad) * c) //计算角度差x轴
var y2 = item.top + item.height; let diffX = (Math.cos(rad) * c) //计算角度差y轴
// 计算角度 item.elmX = item.lastElmX
let roat = Math.abs(item.angle) % 360 item.elmY = item.lastElmY
if(item.angle < 0){ item.elmW = item.lastElmW
let multiple = Math.ceil(Math.abs(item.angle) / 360) item.elmH = item.lastElmH
roat = item.angle + multiple * 360 let scale = item.elmW / item.elmH; //计算宽高比例
} let fixed;
if (item.typetext == "left-top") { if (item.typetext == "left-top") {
// 2020-11-18 fixed = {
// 获取图片宽度，处理图片拉伸自适应 x: 'right',
let initialScaleWidth = item.initialWidth * item.initialScale //获取图片宽度 y: 'bottom'
let initialscalingWidth = item.initialWidth * item.initialscaling //获取图片初始宽度
let initialScaleHeight = item.initialHeight * item.initialScale //获取图片高度
let initialscalingHeight = item.initialHeight * item.initialscaling //获取图片初始高度
let Margin = initialScaleHeight - Math.abs(item.image_top) //视图可移动高度
let Marginleft = initialScaleHeight - item.image_top //判断上边框移动是放大还是缩小
let Margining = initialscalingHeight - Math.abs(item.image_top) //原来视图高度
x1 += ax;
y1 += ay;
item.centerPos = {
x: Math.floor((e.touches[0].clientX + item.rightBottomPoint.x) / 2),
y: Math.floor((e.touches[0].clientY + item.rightMiddlePoint.y) / 2)
}
// 计算旋转为水平角度的两点坐标
let newLeftTopPoint = this.getRotatedPoint({
x: e.touches[0].clientX - item.mLeft,
y: e.touches[0].clientY - item.mTop
}, item.centerPos, -item.angle)
let newRightBottomPoint = this.getRotatedPoint(item.rightBottomPoint, item.centerPos, -item.angle)
let newWidth = newRightBottomPoint.x - newLeftTopPoint.x
let newHeight = newRightBottomPoint.y - newLeftTopPoint.y
// if (this.isScale) { 开启等比例缩放
if (newWidth / newHeight > item.scaleone) {
newLeftTopPoint.x = newLeftTopPoint.x + Math.abs(newWidth - newHeight * item.scaleone)
newWidth = newHeight * item.scaleone
} else {
newLeftTopPoint.y = newLeftTopPoint.y + Math.abs(newHeight - newWidth / item.scaleone)
newHeight = newWidth / item.scaleone
}
// 计算出左上角等比角度变换后水平坐标后，再计算旋转后的角度
var rotateLeftTopPoint = this.getRotatedPoint(newLeftTopPoint, item.centerPos, item.angle)
item.centerPos = {
x: Math.floor((rotateLeftTopPoint.x + item.rightBottomPoint.x) / 2),
y: Math.floor((rotateLeftTopPoint.y + item.rightBottomPoint.y) / 2)
}
item.x = item.centerPos.x // 方块圆心
item.y = item.centerPos.y; // 方块圆心
newLeftTopPoint = this.getRotatedPoint(rotateLeftTopPoint, item.centerPos, -item.angle)
newRightBottomPoint = this.getRotatedPoint(item.rightBottomPoint, item.centerPos, -item.angle)
newWidth = newRightBottomPoint.x - newLeftTopPoint.x
newHeight = newRightBottomPoint.y - newLeftTopPoint.y
let scaleWidth = newWidth / item.width
let scaleHeight = newHeight / item.height
// }
if (newWidth <= minwwidth) {
newWidth = minwwidth
newHeight = Math.floor(newWidth / item.scaleone)
newLeftTopPoint.x = newRightBottomPoint.x - newWidth
newLeftTopPoint.y = newRightBottomPoint.y - newHeight
}
if (newHeight <= minwheight) {
newHeight = minwheight
newWidth = Math.floor(newHeight * item.scaleone)
newLeftTopPoint.y = newRightBottomPoint.y - newHeight
newLeftTopPoint.x = newRightBottomPoint.x - newWidth
}
if (newHeight > minwheight && newWidth > minwwidth) {
item.left = newLeftTopPoint.x
item.top = newLeftTopPoint.y
item.width = newWidth
item.height = newHeight
if(item.left != 0 && item.top != 0){
// 修改初始化原始图片比率-坐标
item.initialScale = item.initialScale * scaleWidth
item.initialscaling = item.initialscaling * scaleWidth
}
if(item.image_left < 0){
if(item.left != 0){
item.image_left = item.image_left * scaleWidth
}
}else{
item.image_left = 0.001
}
if(item.image_top < 0){
if(item.top != 0){
item.image_top = item.image_top * scaleHeight
}
}else{
item.image_top = 0.001
}
// 文本
item.fontscale = item.fontscale * scaleHeight
item.font_size = item.font_size * scaleHeight
item.lineheight = item.lineheight * scaleHeight
/* 2020-11-18 */
// 计算左上角吸附效果
if(item.type == 0 || item.type == 2){
if (roat == 0 || roat == 180 || roat == 360) {
if (item.left > -5 && item.left < 5) { //左边框
// console.log('left')
// 修改初始化原始图片比率-坐标
item.initialScale = item.initialScale * (item.width + item.left) / item.width
item.initialscaling = item.initialscaling * (item.width + item.left) / item.width
// 裁剪区左边框磁性吸附
item.width = newRightBottomPoint.x
item.left = 0
if(shock){
wx.vibrateShort(); // 使手机振动15ms
}
}else if(item.top > -5 && item.top < 5) { //上边框
//console.log('top')
if(item.top < 5 && item.top > 0){ //上边框偏下
if(Marginleft < item.height){ //上边框放大
item.initialScale = item.initialScale * (item.height + item.top) / item.height
item.initialscaling = item.initialscaling * (item.height + item.top) / item.height
}else{ //上边框缩小
// item.initialScale = item.initialScale * (item.height + item.top) / item.height
// item.initialscaling = item.initialscaling * (item.height + item.top) / item.height
}
}
// 裁剪区上边框磁性吸附
item.height = newRightBottomPoint.y
item.top = 0
if(shock){
wx.vibrateShort(); // 使手机振动15ms
}
}
this.getTransferPosition(item.left, item.top, item.width, item.height, item.angle, item.centerPos, item)
}
}
} }
diffX = -diffX;
item.elmW += diffX //计算高度
item.elmH = item.elmW / scale; //计算宽度 对应比例
} else if (item.typetext == "left-bottom") { } else if (item.typetext == "left-bottom") {
x1 += ax; fixed = {
y2 += ay; x: 'right',
item.centerPos = { y: 'top'
x: Math.floor((e.touches[0].clientX + item.rightTopPoint.x) / 2),
y: Math.floor((e.touches[0].clientY + item.rightTopPoint.y) / 2)
}
// 计算旋转为水平角度的两点坐标
let newLeftBottomPoint = this.getRotatedPoint({
x: e.touches[0].clientX - item.mLeft,
y: e.touches[0].clientY - item.mTop
}, item.centerPos, -item.angle)
let newRightTopPoint = this.getRotatedPoint(item.rightTopPoint, item.centerPos, -item.angle)
let newWidth = newRightTopPoint.x - newLeftBottomPoint.x
let newHeight = newLeftBottomPoint.y - newRightTopPoint.y
//if(item.isScale) {开启等比例缩放
if (newWidth / newHeight > item.scaleone) {
newLeftBottomPoint.x = newLeftBottomPoint.x + Math.abs(newWidth - newHeight * item.scaleone)
newWidth = newHeight * item.scaleone
} else {
newLeftBottomPoint.y = newLeftBottomPoint.y - Math.abs(newHeight - newWidth / item.scaleone)
newHeight = newWidth / item.scaleone
}
// 计算出左上角等比角度变换后水平坐标后，再计算旋转后的角度
var rotatedLeftBottomPoint = this.getRotatedPoint(newLeftBottomPoint, item.centerPos, item.angle)
item.centerPos = {
x: Math.floor((rotatedLeftBottomPoint.x + item.rightTopPoint.x) / 2),
y: Math.floor((rotatedLeftBottomPoint.y + item.rightTopPoint.y) / 2)
}
item.x = item.centerPos.x // 方块圆心
item.y = item.centerPos.y; // 方块圆心
newLeftBottomPoint = this.getRotatedPoint(rotatedLeftBottomPoint, item.centerPos, -item.angle)
newRightTopPoint = this.getRotatedPoint(item.rightTopPoint, item.centerPos, -item.angle)
newWidth = newRightTopPoint.x - newLeftBottomPoint.x
newHeight = newLeftBottomPoint.y - newRightTopPoint.y
let scaleWidth = newWidth / item.width
let scaleHeight = newHeight / item.height
//}
if (newHeight <= minwheight) {
newHeight = minwheight
newWidth = Math.floor(newHeight * item.scaleone)
newLeftBottomPoint = {
x: newRightTopPoint.x - newWidth,
y: newRightTopPoint.y + newHeight
}
}
if (newWidth <= minwwidth) {
newWidth = minwwidth
newHeight = Math.floor(newWidth / item.scaleone)
newLeftBottomPoint = {
x: newRightTopPoint.x - newWidth,
y: newRightTopPoint.y + newHeight
}
}
if (newHeight > minwheight && newWidth > minwwidth) {
item.left = newLeftBottomPoint.x
item.top = newRightTopPoint.y
item.width = newWidth
item.height = newHeight
//修改初始化原始图片比率-坐标
item.initialScale = item.initialScale * scaleWidth
item.initialscaling = item.initialscaling * scaleWidth
if(item.image_left < 0){
item.image_left = item.image_left * scaleWidth
}else{
item.image_left = 0.001
}
if(item.image_top < 0){
item.image_top = item.image_top * scaleHeight
}else{
item.image_top = 0.001
}
item.fontscale = item.fontscale * scaleHeight
item.font_size = item.font_size * scaleHeight
item.lineheight = item.lineheight * scaleHeight
} }
diffX = -diffX
item.elmW += diffX //计算高度
item.elmH = item.elmW / scale; //计算宽度 对应比例
} else if (item.typetext == "right-top") { } else if (item.typetext == "right-top") {
x2 += ax; fixed = {
y1 += ay; x: 'left',
y: 'bottom'
item.centerPos = {
x: Math.floor(( e.touches[0].clientX + item.leftBottomPoint.x) / 2),
y: Math.floor(( e.touches[0].clientY + item.leftBottomPoint.y) / 2)
} }
// 计算旋转为水平角度的两点坐标 item.elmW += diffX; //计算高度
let newRightTopPoint = this.getRotatedPoint({ item.elmH = item.elmW / scale; //计算宽度 对应比例
x: e.touches[0].clientX - item.mLeft, } else if (item.typetext == "right-bottom") {
y: e.touches[0].clientY - item.mTop fixed = {
}, item.centerPos, -item.angle) x: 'left',
let newLeftBottomPoint = this.getRotatedPoint(item.leftBottomPoint, item.centerPos, -item.angle) y: 'top'
let newWidth = newRightTopPoint.x - newLeftBottomPoint.x
let newHeight = newLeftBottomPoint.y - newRightTopPoint.y
// if (item.isScale) {开启等比例缩放
if (newWidth / newHeight > item.scaleone) {
newRightTopPoint.x = newRightTopPoint.x - Math.abs(newWidth - newHeight * item.scaleone)
newWidth = newHeight * item.scaleone
} else {
newRightTopPoint.y = newRightTopPoint.y + Math.abs(newHeight - newWidth / item.scaleone)
newHeight = newWidth / item.scaleone
}
// 计算出左上角等比角度变换后水平坐标后，再计算旋转后的角度
let rotatedRightTopPoint = this.getRotatedPoint(newRightTopPoint, item.centerPos, item.angle)
item.centerPos = {
x: Math.floor((rotatedRightTopPoint.x + item.leftBottomPoint.x) / 2),
y: Math.floor((rotatedRightTopPoint.y + item.leftBottomPoint.y) / 2)
}
item.x = item.centerPos.x // 方块圆心
item.y = item.centerPos.y; // 方块圆心
newLeftBottomPoint = this.getRotatedPoint(item.leftBottomPoint, item.centerPos, -item.angle)
newRightTopPoint = this.getRotatedPoint(rotatedRightTopPoint, item.centerPos, -item.angle)
newWidth = newRightTopPoint.x - newLeftBottomPoint.x
newHeight = newLeftBottomPoint.y - newRightTopPoint.y
let scaleWidth = newWidth / item.width
let scaleHeight = newHeight / item.height
// }
if (newWidth <= minwwidth) {
newWidth = minwwidth
newHeight = Math.floor(newWidth / item.scaleone)
newRightTopPoint = {
x: newLeftBottomPoint.x + newWidth,
y: newLeftBottomPoint.y - newHeight
}
} }
if (newHeight <= minwheight) { item.elmW += diffX; //计算高度
newHeight = minwheight item.elmH = item.elmW / scale; //计算宽度 对应比例
newWidth = Math.floor(newHeight * item.scaleone) }
newRightTopPoint = {
x: newLeftBottomPoint.x + newWidth, item.isDrag = true;
y: newLeftBottomPoint.y - newHeight if (item.elmW < minwwidth) {
} item.elmW = minwwidth //设置最小宽度
item.elmH = item.elmW / scale; //计算高度对应比例
if (item.type == 0 || item.type == 2) {
item.isDrag = false; //设置四周部件操作控件
} }
if (newWidth > minwwidth && newHeight > minwheight) { }
item.left = newLeftBottomPoint.x
item.top = newRightTopPoint.y if (item.elmH < minwheight) {
item.width = newWidth item.elmH = minwheight; //设置最小高度
item.height = newHeight item.elmW = item.elmH * scale; //计算宽度 对应比例
// 修改初始化原始图片比率-坐标 if (item.type == 0 || item.type == 2) {
item.initialScale = item.initialScale * scaleWidth item.isDrag = false; //设置四周部件操作控件
item.initialscaling = item.initialscaling * scaleWidth
if(item.image_left < 0){
item.image_left = item.image_left * scaleWidth
}else{
item.image_left = 0.001
}
if(item.image_top < 0){
item.image_top = item.image_top * scaleHeight
}else{
item.image_top = 0.001
}
item.fontscale = item.fontscale * scaleHeight
item.font_size = item.font_size * scaleHeight
item.lineheight = item.lineheight * scaleHeight
} }
} else if (item.typetext == "right-bottom") { }
x2 += ax;
y2 += ay; if (item.elmW > 800) {
item.elmW = 800 //设置最小宽度
item.centerPos = { item.elmH = item.elmW / scale; //计算高度对应比例
x: Math.floor((e.touches[0].clientX + item.leftTopPoint.x) / 2), }
y: Math.floor((e.touches[0].clientY + item.leftTopPoint.y) / 2)
if (item.elmH > 800) {
item.elmH = 800 //设置最小宽度
item.elmW = item.elmH * scale; //计算宽度 对应比例
}
let getNewData = this.fixedTo(item, fixed, item.newRotate) //计算对角差距数据
item.elmX = getNewData.x; //赋值x轴新数据
item.elmY = getNewData.y; //赋值y轴新数据
item.left = item.elmX; //重新赋值左上角x位置
item.top = item.elmY; //重新赋值左上角y位置
item.width = item.elmW //重新设置宽度
item.height = item.elmH //重新设置高度
let newScale = item.elmH / item.lastElmH //计算新比例
item.initialScale = item.lastInitialScale * newScale //乘以对应之前比例
item.initialscaling = item.lastInitialscaling * newScale //乘以对应之前比例
if (item.lastImageLeft < 0) { //判断是否图片有左右间距
item.image_left = item.lastImageLeft * newScale
} else {
item.image_left = 0
}
if (item.lastImageTop < 0) { //判断是否图片有上下间距
item.image_top = item.lastImageTop * newScale
} else {
item.image_top = 0
}
item.fontscale = (item.lastFontscale * newScale) //乘以对应之前比例
item.font_size = (item.lastFontSize * newScale) //乘以对应之前比例
item.lineheight = (item.lastLineheight * newScale) //乘以对应之前比例
//记录中心位置
item.centerPos = {
x: item.left + item.width / 2,
y: item.top + item.height / 2
}
item.x = item.centerPos.x;
item.y = item.centerPos.y;
item.edgestartX = e.touches[0].clientX; // 获取鼠标按下时光标x的值
item.edgestartY = e.touches[0].clientY; // 获取鼠标按下时光标Y的值
//计算圆角
this.getConterScale(item)
},
//计算相差角度
getAngle(x, y) {
let theta = Math.atan2(y, x) // range (-PI, PI]
theta = Math.round((180 / Math.PI) * theta) // rads to degs, range (-180, 180]
if (theta < 0) theta = 360 + theta // range [0, 360)
return theta
},
//计算位置
fixedTo(item, fixed, rotate) {
let rect = {
top: item.elmY,
right: item.elmX + item.elmW,
bottom: item.elmY + item.elmH,
left: item.elmX
}
let {
x: fixedX,
y: fixedY
} = this.rotatedPoint(
rect,
rotate,
fixed
)
let dX = item.fixedX - fixedX
let dY = item.fixedY - fixedY
return {
x: item.elmX + dX,
y: item.elmY + dY,
}
},
/**
* @description: 记录按下数据
*/
recordPressDownData(item) {
item.lastElmX = item.left; //记录按下x轴坐标
item.lastElmY = item.top; //记录按下y轴坐标
item.lastElmW = item.width; //记录按下宽度
item.lastElmH = item.height; //记录按下高度
item.lastInitialScale = item.initialScale; //记录按下比例
item.lastInitialscaling = item.initialscaling; //记录按下比例
item.lastImageLeft = item.image_left; //记录按下图片左距离
item.lastImageTop = item.image_top; //记录按下图片上距离
item.lastFontscale = item.fontscale; //记录按下字体比例
item.lastFontSize = item.font_size; //记录按下字体大小
item.lastLineheight = item.lineheight; //记录按下行高
let rotate = Math.abs(item.angle) % 360 //计算角度
if (item.angle < 0) {
let multiple = Math.ceil(Math.abs(item.angle) / 360) //Math.ceil
rotate = item.angle + multiple * 360
}
if (rotate == 360) {
rotate = 0;
}
item.newRotate = rotate; //设置新旋转角度
let fixed;
if (item.typetext == "left-top") {
fixed = {
x: 'right',
y: 'bottom'
} }
// 计算旋转为水平角度的两点坐标 } else if (item.typetext == "left-bottom" || item.typetext == "left") {
let newRightBottomPoint = this.getRotatedPoint({ fixed = {
x: e.touches[0].clientX - item.mLeft, x: 'right',
y: e.touches[0].clientY - item.mTop y: 'top'
}, item.centerPos, -item.angle)
let newLeftTopPoint = this.getRotatedPoint(item.leftTopPoint, item.centerPos, -item.angle)
let newWidth = newRightBottomPoint.x - newLeftTopPoint.x
let newHeight = newRightBottomPoint.y - newLeftTopPoint.y
// if (item.isScale) {开启等比例缩放
if (newWidth / newHeight > item.scaleone) {
newRightBottomPoint.x = newRightBottomPoint.x - Math.abs(newWidth - newHeight * item.scaleone)
newWidth = newHeight * item.scaleone
} else {
newRightBottomPoint.y = newRightBottomPoint.y - Math.abs(newHeight - newWidth / item.scaleone)
newHeight = newWidth / item.scaleone
}
// 计算出左上角等比角度变换后水平坐标后，再计算旋转后的角度
let rotatedRightBottomPoint = this.getRotatedPoint(newRightBottomPoint, item.centerPos, item.angle)
item.centerPos = {
x: Math.floor((rotatedRightBottomPoint.x + item.leftTopPoint.x) / 2),
y: Math.floor((rotatedRightBottomPoint.y + item.leftTopPoint.y) / 2)
}
item.x = item.centerPos.x // 方块圆心
item.y = item.centerPos.y; // 方块圆心
newLeftTopPoint = this.getRotatedPoint(item.leftTopPoint, item.centerPos, -item.angle)
newRightBottomPoint = this.getRotatedPoint(rotatedRightBottomPoint, item.centerPos, -item.angle)
newWidth = newRightBottomPoint.x - newLeftTopPoint.x
newHeight = newRightBottomPoint.y - newLeftTopPoint.y
let scaleWidth = newWidth / item.width
let scaleHeight = newHeight / item.height
// }
if (newWidth <= minwwidth) {
newWidth = minwwidth
newHeight = Math.floor(newWidth / item.scaleone)
newRightBottomPoint = {
x: newLeftTopPoint.x + newWidth,
y: newLeftTopPoint.y + newHeight
}
} }
if (newHeight <= minwheight) { } else if (item.typetext == "right-top" || item.typetext == "top") {
newHeight = minwheight fixed = {
newWidth = Math.floor(newHeight * item.scaleone) x: 'left',
newRightBottomPoint = { y: 'bottom'
x: newLeftTopPoint.x + newWidth,
y: newLeftTopPoint.y + newHeight
}
} }
if (newWidth > minwwidth && newHeight > minwheight) { } else if (item.typetext == "right-bottom" || item.typetext == "right" || item.typetext == "bottom") {
item.left = newLeftTopPoint.x fixed = {
item.top = newLeftTopPoint.y x: 'left',
item.width = newWidth y: 'top'
item.height = newHeight
// 修改初始化原始图片比率-坐标
item.initialScale = item.initialScale * scaleWidth
item.initialscaling = item.initialscaling * scaleWidth
if(item.image_left < 0){
item.image_left = item.image_left * scaleWidth
}else{
item.image_left = 0.001
}
if(item.image_top < 0){
item.image_top = item.image_top * scaleHeight
}else{
item.image_top = 0.001
}
item.fontscale = item.fontscale * scaleHeight
item.font_size = item.font_size * scaleHeight
item.lineheight = item.lineheight * scaleHeight
} }
} }
//追加改动值
// item.left = x1; //记录对应坐标点坐标
// item.top = y1; if (fixed != null) {
// item.width = x2 - x1; //初始化盒子上下左右位置
// item.height = y2 - y1; let rect = {
//把新的值赋给老的值 top: item.top,
item.edgestartX = e.touches[0].clientX; // 获取鼠标按下时光标x的值 right: item.left + item.width,
item.edgestartY = e.touches[0].clientY; // 获取鼠标按下时光标Y的值 bottom: item.top + item.height,
left: item.left
}
let fixedCoordinate = this.rotatedPoint(rect, rotate, fixed)
item.fixedX = fixedCoordinate.x //记录按下对角x轴坐标
item.fixedY = fixedCoordinate.y //记录按下对角y轴坐标
}
}, },
// 四边伸缩
edgeMove(e,item,data){
//记录移动后的位置 //计算旋转后坐标点
item.edgemoveX = e.touches[0].clientX; rotatedPoint(rect, rotate, point) {
item.edgemoveY = e.touches[0].clientY; let {
top,
right,
bottom,
left
} = rect
let rad = (Math.PI / 180) * rotate
let cos = Math.cos(rad)
let sin = Math.sin(rad)
let originX = (right - left) / 2 + left
let originY = (bottom - top) / 2 + top
let x = rect[point.x]
let y = rect[point.y]
x -= originX
y -= originY
return {
x: Math.floor((x * cos - y * sin + originX) * 10000) / 10000,
y: Math.floor((x * sin + y * cos + originY) * 10000) / 10000,
}
},
//四边伸缩
edgeMove(e, item, data, allLineListData, designWidth, designHeight) {
//修改属性状态 //修改属性状态
item.active = true //辅助线 item.active = true //辅助线
item.activeguide = false //辅助线 item.activeguide = false //辅助线
item.activescale = false // 旋转状态 item.activescale = false // 旋转状态
item.activehorn = false // 角状态 item.activehorn = false // 角状态
item.activeedge = true // 边状态 item.activeedge = true // 边状态
//追加改动值 item.isShowLineV = false; //初始化默认不显示
let startX = item.edgestartX item.isShowLineH = false; //初始化默认不显示
let moveX = item.edgemoveX item.edgemoveX = e.touches[0].clientX; //手指移动后x轴位置
let startY = item.edgestartY item.edgemoveY = e.touches[0].clientY; //手指移动后y轴位置
let moveY = item.edgemoveY let width = item.edgemoveX - item.edgestartX //计算手指移动x轴距离
item.x += item.edgemoveX - item.edgestartX; // 方块圆心 let height = item.edgemoveY - item.edgestartY //计算手指移动y轴距离
item.y += item.edgemoveY - item.edgestartY; // 方块圆心 let c = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2)) //使用三角公式计算边c长度
// 获取图片宽度，处理图片拉伸自适应 let angle = this.getAngle(width, height) //计算移动位置角度差
let initialScaleWidth = item.initialWidth * item.initialScale //获取图片宽度 let rad = (Math.PI / 180) * (angle - item.newRotate) //旋转角度转换公式
let initialscalingWidth = item.initialWidth * item.initialscaling //获取图片初始宽度 let diffY = (Math.sin(rad) * c) //计算角度差x轴
let initialScaleHeight = item.initialHeight * item.initialScale //获取图片高度 let diffX = (Math.cos(rad) * c) //计算角度差y轴
let initialscalingHeight = item.initialHeight * item.initialscaling //获取图片初始高度
// 计算角度 item.elmX = item.lastElmX
let roat = Math.abs(item.angle) % 360 item.elmY = item.lastElmY
if(item.angle < 0){ item.elmW = item.lastElmW
let multiple = Math.ceil(Math.abs(item.angle) / 360) item.elmH = item.lastElmH
roat = item.angle + multiple * 360
let fixed;
if (item.typetext == "left") { //左
fixed = {
x: 'right',
y: 'top'
}
item.elmW += diffX * (-1) //计算宽度
} else if (item.typetext == "top") { //下
fixed = {
x: 'left',
y: 'bottom'
}
item.elmH += diffY * (-1) //计算高度
} else if (item.typetext == "right") { //右
fixed = {
x: 'left',
y: 'top'
}
item.elmW += diffX * (1) //计算宽度
} else if (item.typetext == "bottom") { //下
fixed = {
x: 'left',
y: 'top'
}
item.elmH += diffY * (1) //计算高度
} }
if(item.typetext == "left"){
let Margin = initialScaleWidth - Math.abs(item.image_left) //获取右边框移动宽度 = 图片宽度 - 移动的距离 if (item.elmW < 20) {
let Marginleft = initialScaleWidth - item.image_left //判断左边框移动宽度 item.elmW = 20
let Margining = initialscalingWidth - Math.abs(item.image_left) //原始视图宽度 }
if (item.elmH < 20) {
// 旋转角度拉伸算法核心代码 item.elmH = 20
let rotateCurrentPos = this.getRotatedPoint({ }
x: e.touches[0].clientX - item.mLeft,
y: e.touches[0].clientY - item.mTop let getNewData = this.fixedTo(item, fixed, item.newRotate) //计算对角差距数据
}, item.rightMiddlePoint, -item.angle) item.elmX = getNewData.x; //赋值x轴新数据
let rotatedLeftMiddlePonit = { item.elmY = getNewData.y; //赋值y轴新数据
x: rotateCurrentPos.x, item.left = item.elmX; //重新赋值左上角x位置
y: item.rightMiddlePoint.y item.top = item.elmY; //重新赋值左上角y位置
} item.width = item.elmW //重新设置宽度
let newWidth = item.rightMiddlePoint.x - rotatedLeftMiddlePonit.x item.height = item.elmH //重新设置高度
// 裁剪区最小值
if (newWidth <= 50) { let newScale = 1;
newWidth = 50 if (item.typetext == "right") {
rotatedLeftMiddlePonit.x = item.rightMiddlePoint.x - 50
} let right = designWidth - (item.left + item.width);
item.leftMiddlePoint = this.getRotatedPoint(rotatedLeftMiddlePonit, item.rightMiddlePoint, item.angle) item.left = item.elmX; //重新赋值左上角x位置
item.centerPos = { item.width = item.elmW //重新设置宽度
x: Math.floor((item.leftMiddlePoint.x + item.rightMiddlePoint.x) / 2), newScale = item.elmW / item.lastElmW //计算新比例
y: Math.floor((item.leftMiddlePoint.y + item.rightMiddlePoint.y) / 2) if (newScale > 1) { //开始放大处理
} let newWidthScale = Math.abs((item.elmW - item.lastElmW) / item.initialWidth);
item.differenceWidth = newWidth - item.width //宽度差值 item.initialScale = item.lastInitialScale + newWidthScale //乘以对应之前比例
let scaleWidth = newWidth / item.width item.initialscaling = item.lastInitialscaling + newWidthScale //乘以对应之前比例
// 图片拉伸算法和背景图偏移数据
if(item.image_left < 0){
if(item.left != 0){
item.image_left += newWidth - item.width;
}
}else{
item.image_left = 0.001
}
item.left = item.centerPos.x - newWidth / 2
item.top = item.centerPos.y - item.height / 2
item.width = newWidth
if (roat == 0 || roat == 180 || roat == 360) {
if (item.left > -5 && item.left < 5) {
// 图层吸附处理
if(item.image_left != null && item.image_left != 0.001){
// item.image_left = item.image_left + item.left;
// let a_left = item.image_left
// item.image_left = a_left - (item.width - item.rightTopPoint.x)
}
// 裁剪区左边框磁性吸附
item.width = item.rightTopPoint.x
item.left = 0
wx.vibrateShort(); // 使手机振动15ms
// 重新计算，计算背景图
this.getTransferPosition(item.left, item.top, item.width, item.height, item.angle, item.centerPos, item)
}
}
// 图片拉伸算法
if(Marginleft < item.width){ //左边框移动过程中放大
// console.log('移动放大')
// x轴放大比率
item.initialScalex = item.width / Margining
// 计算图片放大比率=原始比率*x轴放大比率
item.initialScale = item.initialscaling * item.initialScalex
// 图片拉伸算法和背景图偏移数据
item.image_top = item.image_top * scaleWidth
}else{ //左边框移动过程中缩小
// console.log('移动缩小')
// 缩小到x轴放大比率 高度不能小于图片高度
if(item.differenceWidth < 0 && item.initialScalex > 1 && initialScaleHeight > item.height){
item.initialScalex = item.width / Margining
item.initialScale = item.initialscaling * item.initialScalex
// 图片拉伸算法和背景图偏移数据
item.image_top = item.image_top * scaleWidth
}
// 左边框缩小到原始宽度时，x轴比率默认为=1，x轴不在缩放
if(item.initialScale / item.initialScaley <= item.initialscaling){
item.initialScalex = 1
item.initialScale = item.initialscaling * item.initialScaley
}
// 左边框x轴缩小到最小值时，默认偏移数据
if(item.differenceWidth < 0 && item.initialScalex <= 1){
if(item.image_left > 0){
item.image_left = -0.001;
}
}
}
}else if(item.typetext == "right"){
let Margin = initialScaleWidth - Math.abs(item.image_left) //视图宽度 原图-图片移动的距离
let Marginleft = initialScaleWidth - item.image_left //判断左边框移动放大还是缩小
let Margining = initialscalingWidth - Math.abs(item.image_left) //原来视图宽度
// 旋转角度拉伸算法
let rotateCurrentPos = this.getRotatedPoint({
x: e.touches[0].clientX - item.mLeft,
y: e.touches[0].clientY - item.mTop
}, item.leftMiddlePoint, -item.angle)
let rotatedRightMiddlePoint = {
x: rotateCurrentPos.x,
y: item.leftMiddlePoint.y
}
let newWidth = rotatedRightMiddlePoint.x - item.leftMiddlePoint.x
// 裁剪区最小值
if (newWidth <= 50) {
newWidth = 50
rotatedRightMiddlePoint.x = item.leftMiddlePoint.x + 50
}
item.rightMiddlePoint = this.getRotatedPoint(rotatedRightMiddlePoint, item.leftMiddlePoint, item.angle)
item.centerPos = {
x: Math.floor((item.leftMiddlePoint.x + item.rightMiddlePoint.x) / 2),
y: Math.floor((item.leftMiddlePoint.y + item.rightMiddlePoint.y) / 2)
}
item.differenceWidth = newWidth - item.width //宽度差值
let scaleWidth = newWidth / item.width
item.left = item.centerPos.x - newWidth / 2
item.top = item.centerPos.y - item.height / 2
item.width = newWidth
if (roat == 0 || roat == 180 || roat == 360) {
if (item.left > data.editorWidth - item.width - 5 && item.left < data.editorWidth - item.width + 5) {
// 裁剪区右边框磁性吸附
item.width = data.editorWidth - item.leftTopPoint.x
wx.vibrateShort(); // 使手机振动15ms
}
}
if(Margin < item.width){ //右边框放大
// x轴放大比率
item.initialScalex = item.width / Margining
item.initialScale = item.initialscaling * item.initialScalex
// 图片拉伸算法和背景图偏移数据
item.image_top = item.image_top * scaleWidth
}else{ //右边框缩小
if(item.differenceWidth < 0 && item.initialScalex > 1 && initialScaleHeight > item.height){
item.initialScalex = item.width / Margining
item.initialScale = item.initialscaling * item.initialScalex
// 图片拉伸算法和背景图偏移数据
item.image_top = item.image_top * scaleWidth
}
}
}else if(item.typetext == "top"){
let Margin = initialScaleHeight - Math.abs(item.image_top) //视图可移动高度
let Marginleft = initialScaleHeight - item.image_top //判断上边框移动是放大还是缩小
let Margining = initialscalingHeight - Math.abs(item.image_top) //原来视图高度
// 旋转角度拉伸算法
let rotateCurrentPos = this.getRotatedPoint({
x: e.touches[0].clientX - item.mLeft,
y: e.touches[0].clientY - item.mTop
}, item.bottomMiddlePoint, -item.angle)
let rotatedTopMiddlePoint = {
x: item.bottomMiddlePoint.x,
y: rotateCurrentPos.y
}
let newHeight = item.bottomMiddlePoint.y - rotatedTopMiddlePoint.y
// 裁剪区最小值
if (newHeight <= 50) {
newHeight = 50
rotatedTopMiddlePoint.y = item.bottomMiddlePoint.y - 50
}
// 计算转回去的topmiddle点坐标
item.topMiddlePoint = this.getRotatedPoint(rotatedTopMiddlePoint, item.bottomMiddlePoint, item.angle)
item.centerPos = {
x: (item.topMiddlePoint.x + item.bottomMiddlePoint.x) / 2,
y: (item.topMiddlePoint.y + item.bottomMiddlePoint.y) / 2
}
item.differenceHeight = newHeight - item.height //高度差值，判断用户操作方向
let scaleHeight = newHeight / item.height
// 图片拉伸算法和背景图偏移数据
if(item.image_top < 0){
if(item.top != 0){
item.image_top += newHeight - item.height;
}
}else{
item.image_top = 0.001
}
item.left = item.centerPos.x - item.width / 2
item.top = item.centerPos.y - newHeight / 2
item.height = newHeight
if (roat == 0 || roat == 180 || roat == 360) {
if (item.top > -5 && item.top < 5) {
// 裁剪区上边框磁性吸附
item.height = item.leftBottomPoint.y
item.top = 0
wx.vibrateShort(); // 使手机振动15ms
// 重新计算，计算背景图
this.getTransferPosition(item.left, item.top, item.width, item.height, item.angle, item.centerPos, item)
}
}
if(Marginleft < item.height){ //上边框放大
item.initialScaley = item.height / Margining // y轴放大比率
item.initialScale = item.initialscaling * item.initialScaley // 计算图片放大比率=原始比率*y轴放大比率
// 图片拉伸算法和背景图偏移数据
item.image_left = item.image_left * scaleHeight
}else{ //上边框缩小
if(item.differenceHeight < 0 && item.initialScaley > 1 && initialScaleWidth > item.width){
item.initialScaley = item.height / Margining
item.initialScale = item.initialscaling * item.initialScaley
// 图片拉伸算法和背景图偏移数据
item.image_left = item.image_left * scaleHeight
}
if(item.initialScale / item.initialScalex <= item.initialscaling){
item.initialScaley = 1
item.initialScale = item.initialscaling * item.initialScalex
}
// 恢复
if(item.differenceHeight < 0 && item.initialScaley <= 1){
if(item.image_top > 0){
item.image_top = -0.001
}
}
}
}else if(item.typetext == "bottom"){
let Margin = initialScaleHeight - Math.abs(item.image_top) //视图高度
let Marginleft = initialScaleHeight - item.image_top //判断上边框移动放大还是缩小
let Margining = initialscalingHeight - Math.abs(item.image_top) //原来视图高度
// 旋转角度拉伸算法
let rotateCurrentPos = this.getRotatedPoint({
x: e.touches[0].clientX - item.mLeft,
y: e.touches[0].clientY - item.mTop
}, item.topMiddlePoint, -item.angle)
let rotatedBottomMiddlePoint = {
x: item.topMiddlePoint.x,
y: rotateCurrentPos.y
} }
let newHeight = rotatedBottomMiddlePoint.y - item.topMiddlePoint.y
if (newHeight <= 50) { } else if (item.typetext == "left") {
newHeight = 50
rotatedBottomMiddlePoint.y = item.topMiddlePoint.y + 50 newScale = item.elmW / item.lastElmW //计算新比例
let distanceLeft = 0
if (item.lastImageLeft > 0) {
distanceLeft = 0;
} else {
distanceLeft = item.lastImageLeft + (item.elmW - item.lastElmW);
} }
item.bottomMiddlePoint = this.getRotatedPoint(rotatedBottomMiddlePoint, item.topMiddlePoint, item.angle) if (distanceLeft < 0) {
item.centerPos = { item.image_left = distanceLeft;
x: Math.floor((item.bottomMiddlePoint.x + item.topMiddlePoint.x) / 2), } else {
y: Math.floor((item.bottomMiddlePoint.y + item.topMiddlePoint.y) / 2) item.image_left = 0;
let newWidthScale = distanceLeft / item.initialWidth;
item.initialScale = item.lastInitialScale + newWidthScale //乘以对应之前比例
item.initialscaling = item.lastInitialscaling + newWidthScale //乘以对应之前比例
} }
item.differenceHeight = newHeight - item.height //高度差值，判断用户操作方向
let scaleHeight = newHeight / item.height } else if (item.typetext == "top") {
item.left = item.centerPos.x - item.width / 2
item.top = item.centerPos.y - newHeight / 2 newScale = item.elmH / item.lastElmH //计算新比例
item.height = newHeight let distanceTop = 0
if (item.lastImageTop > 0) {
if (roat == 0 || roat == 180 || roat == 360) { distanceTop = 0;
if (item.top > data.editorHeight - item.height - 5 && item.top < data.editorHeight - item.height +5) { } else {
// 裁剪区下边框磁性吸附 distanceTop = item.lastImageTop + (item.elmH - item.lastElmH);
item.height = data.editorHeight - item.leftTopPoint.y
wx.vibrateShort(); // 使手机振动15ms
}
} }
if(initialScaleHeight < item.height + Math.abs(item.image_top)){ //放大 if (distanceTop < 0) {
item.initialScaley = item.height / Margining item.image_top = distanceTop;
item.initialScale = item.initialscaling * item.initialScaley } else {
// 图片拉伸算法和背景图偏移数据 item.image_top = 0;
item.image_left = item.image_left * scaleHeight let newHeightScale = distanceTop / item.initialHeight;
}else{ //缩小 item.initialScale = item.lastInitialScale + newHeightScale //乘以对应之前比例
if(item.differenceHeight < 0 && item.initialScaley > 1 && initialScaleWidth > item.width){ item.initialscaling = item.lastInitialscaling + newHeightScale //乘以对应之前比例
item.initialScaley = item.height / Margining
item.initialScale = item.initialscaling * item.initialScaley
// 图片拉伸算法和背景图偏移数据
item.image_left = item.image_left * scaleHeight
}
} }
} else if (item.typetext == "bottom") {
let buttom = designHeight - (item.top + item.height);
newScale = item.elmH / item.lastElmH //计算新比例
if (newScale > 1) { //开始放大处理
let newHeightScale = Math.abs((item.elmH - item.lastElmH) / item.initialHeight);
item.initialScale = item.lastInitialScale + newHeightScale //乘以对应之前比例
item.initialscaling = item.lastInitialscaling + newHeightScale //乘以对应之前比例
}
}
item.left = item.elmX; //重新赋值左上角x位置
item.top = item.elmY; //重新赋值左上角y位置
item.left = item.elmX; //重新赋值左上角x位置
item.top = item.elmY; //重新赋值左上角y位置
item.width = item.elmW //重新设置宽度
item.height = item.elmH //重新设置高度
//记录中心位置
item.centerPos = {
x: item.left + item.width / 2,
y: item.top + item.height / 2
} }
//把新的值赋给老的值
item.edgestartX = e.touches[0].clientX;// 获取鼠标按下时光标x的值 item.x = item.centerPos.x;
item.edgestartY = e.touches[0].clientY;// 获取鼠标按下时光标Y的值 item.y = item.centerPos.y;
//赋值就移动了
// this.data.itemList = items //计算圆角
this.getConterScale(item)
}, },
/** /**
* @description: 初始化targetObj的位置 * @description: 初始化targetObj的位置
*/ */
initPos(item) { initPos(item) {
if (item == null) {
if(item == null){
//this.bg_initPos(item)
return return
} }
// 记录初始盒子位置右下
item.rightBottomPoint = {
x: item.width + item.left,
y: item.height + item.top
}
// 记录初始盒子右上角位置
item.rightTopPoint = {
x: item.width + item.left,
y: item.top
}
// 记录左上角的位置
item.leftTopPoint = {
x: item.left,
y: item.top
}
// 左下
item.leftBottomPoint = {
x: item.left,
y: item.top + item.height
}
// 左中
item.leftMiddlePoint = {
x: item.left,
y: item.top + item.height / 2
}
// 右中
item.rightMiddlePoint = {
x: item.left + item.width,
y: item.top + item.height / 2
}
// 上中
item.topMiddlePoint = {
x: item.left + item.width / 2,
y: item.top
}
// 下中
item.bottomMiddlePoint = {
x: item.left + item.width / 2,
y: item.top + item.height
}
// 记录中心位置
item.centerPos = { item.centerPos = {
x: item.left + item.width / 2, x: item.left + item.width / 2,
y: item.top + item.height / 2 y: item.top + item.height / 2
} }
item.x = item.centerPos.x;
item.y = item.centerPos.y;
item.scaleone = item.width / item.height item.scaleone = item.width / item.height
item.initRightBottomPoint = item.rightBottomPoint
item.initRightTopPoint = item.rightTopPoint
item.initLeftTopPoint = item.leftTopPoint
item.initLeftBottomPoint = item.leftBottomPoint
item.initLeftMiddlePoint = item.leftMiddlePoint
item.initRightMiddlePoint = item.rightMiddlePoint
item.initTopMiddlePoint = item.topMiddlePoint
item.initBottomMiddlePoint = item.bottomMiddlePoint
item.initCenterPos = item.centerPos item.initCenterPos = item.centerPos
// 计算角度
let roat = Math.abs(item.angle) % 360
if(item.angle < 0){
let multiple = Math.ceil(Math.abs(item.angle) / 360)
roat = item.angle + multiple * 360
}
if(roat > 0){
// 重新计算旋转后四个点的坐标变化
let disAngle = roat
item.rightBottomPoint = this.getRotatedPoint(item.initRightBottomPoint, item.centerPos, disAngle)
item.rightTopPoint = this.getRotatedPoint(item.initRightTopPoint, item.centerPos, disAngle)
item.leftTopPoint = this.getRotatedPoint(item.initLeftTopPoint, item.centerPos, disAngle)
item.leftBottomPoint = this.getRotatedPoint(item.initLeftBottomPoint, item.centerPos, disAngle)
item.leftMiddlePoint = this.getRotatedPoint(item.initLeftMiddlePoint, item.centerPos, disAngle)
item.rightMiddlePoint = this.getRotatedPoint(item.initRightMiddlePoint, item.centerPos, disAngle)
item.topMiddlePoint = this.getRotatedPoint(item.initTopMiddlePoint, item.centerPos, disAngle)
item.bottomMiddlePoint = this.getRotatedPoint(item.initBottomMiddlePoint, item.centerPos, disAngle)
}
this.bg_initPos(item)
},
bg_initPos(item) {
// 记录初始盒子位置右下
item.bg_rightBottomPoint = {
x: item.width + item.image_left,
y: item.height + item.image_top
}
// 记录初始盒子右上角位置
item.bg_rightTopPoint = {
x: item.width + item.image_left,
y: item.image_top
}
// 记录左上角的位置
item.bg_leftTopPoint = {
x: item.image_left,
y: item.image_top
}
// 左下
item.bg_leftBottomPoint = {
x: item.image_left,
y: item.image_top + item.height
}
// 左中
item.bg_leftMiddlePoint = {
x: item.image_left,
y: item.image_top + item.height / 2
}
// 右中
item.bg_rightMiddlePoint = {
x: item.image_left + item.width,
y: item.image_top + item.height / 2
}
// 上中
item.bg_topMiddlePoint = {
x: item.image_left + item.width / 2,
y: item.image_top
}
// 下中
item.bg_bottomMiddlePoint = {
x: item.image_left + item.width / 2,
y: item.image_top + item.height
}
// 记录中心位置
item.bg_centerPos = {
x: item.image_left + item.width / 2,
y: item.top + item.height / 2
}
item.bg_scaleone = item.width / item.height
item.bg_initRightBottomPoint = item.bg_rightBottomPoint
item.bg_initRightTopPoint = item.bg_rightTopPoint
item.bg_initLeftTopPoint = item.bg_leftTopPoint
item.bg_initLeftBottomPoint = item.bg_leftBottomPoint
item.bg_initLeftMiddlePoint = item.bg_leftMiddlePoint
item.bg_initRightMiddlePoint = item.bg_rightMiddlePoint
item.bg_initTopMiddlePoint = item.bg_topMiddlePoint
item.bg_initBottomMiddlePoint = item.bg_bottomMiddlePoint
item.bg_initCenterPos = item.bg_centerPos
// 计算角度
let roat = Math.abs(item.angle) % 360
if(item.angle < 0){
let multiple = Math.ceil(Math.abs(item.angle) / 360)
roat = item.angle + multiple * 360
}
if(roat > 0){
// 重新计算旋转后四个点的坐标变化
let disAngle = roat
item.bg_rightBottomPoint = this.getRotatedPoint(item.bg_initRightBottomPoint, item.bg_centerPos, disAngle)
item.bg_rightTopPoint = this.getRotatedPoint(item.bg_initRightTopPoint, item.bg_centerPos, disAngle)
item.bg_leftTopPoint = this.getRotatedPoint(item.bg_initLeftTopPoint, item.bg_centerPos, disAngle)
item.bg_leftBottomPoint = this.getRotatedPoint(item.bg_initLeftBottomPoint, item.bg_centerPos, disAngle)
item.bg_leftMiddlePoint = this.getRotatedPoint(item.bg_initLeftMiddlePoint, item.bg_centerPos, disAngle)
item.bg_rightMiddlePoint = this.getRotatedPoint(item.bg_initRightMiddlePoint, item.bg_centerPos, disAngle)
item.bg_topMiddlePoint = this.getRotatedPoint(item.bg_initTopMiddlePoint, item.bg_centerPos, disAngle)
item.bg_bottomMiddlePoint = this.getRotatedPoint(item.bg_initBottomMiddlePoint, item.bg_centerPos, disAngle)
}
}, },
/** /**
* @description: 计算移动前坐标值 * @description: 计算移动前坐标值
*/ */
getRotatedPoint(curPos, centerPos, angle) { getRotatedPoint(curPos, centerPos, angle) {
let radian = Math.PI / 180 * angle;
return { return {
x: Math.floor((curPos.x - centerPos.x) * Math.cos(Math.PI / 180 * angle) - (curPos.y - centerPos.y) * Math.sin( x: Math.floor((curPos.x - centerPos.x) * Math.cos(radian) - (curPos.y - centerPos.y) * Math.sin(
Math.PI / 180 * angle) + centerPos.x), radian) + centerPos.x),
y: Math.floor((curPos.x - centerPos.x) * Math.sin(Math.PI / 180 * angle) + (curPos.y - centerPos.y) * Math.cos( y: Math.floor((curPos.y - centerPos.y) * Math.cos(radian) + (curPos.x - centerPos.x) * Math.sin(
Math.PI / 180 * angle) + centerPos.y) radian) + centerPos.y)
} }
}, },
/** /**
* @description: 计算变换后的方框四个角的位置 * @description: 计算变换后的方框四个角的位置
*/ */
getTransferPosition(left, top, width, height, angle, center,item) { getTransferPosition(left, top, width, height, angle, center, item) {
// console.log('---------') item.centerPos = {
// 计算变换后的方框四个角的位置 x: item.left + item.width / 2,
var a1 = { y: item.top + item.height / 2
x: left,
y: top
}
var a2 = {
x: left,
y: top + height
}
var a3 = {
x: left + width,
y: top
}
var a4 = {
x: left + width,
y: top + height
}
var a5 = {
x: left,
y: top + height / 2
}
var a6 = {
x: left + width,
y: top + height / 2
}
var a7 = {
x: left + width / 2,
y: top
}
var a8 = {
x: left + width / 2,
y: top + height
}
item.leftTopPoint = this.getRotatedPoint(a1, center, angle)
item.leftBottomPoint = this.getRotatedPoint(a2, center, angle)
item.rightTopPoint = this.getRotatedPoint(a3, center, angle)
item.rightBottomPoint = this.getRotatedPoint(a4, center, angle)
item.leftMiddlePoint = this.getRotatedPoint(a5, center, angle)
item.rightMiddlePoint = this.getRotatedPoint(a6, center, angle)
item.topMiddlePoint = this.getRotatedPoint(a7, center, angle)
item.bottomMiddlePoint = this.getRotatedPoint(a8, center, angle)
},
bg_getTransferPosition(left, top, width, height, angle, center,item) {
// 计算变换后的方框四个角的位置
var a1 = {
x: left,
y: top
}
var a2 = {
x: left,
y: top + height
}
var a3 = {
x: left + width,
y: top
}
var a4 = {
x: left + width,
y: top + height
}
var a5 = {
x: left,
y: top + height / 2
}
var a6 = {
x: left + width,
y: top + height / 2
}
var a7 = {
x: left + width / 2,
y: top
}
var a8 = {
x: left + width / 2,
y: top + height
} }
item.bg_leftTopPoint = this.getRotatedPoint(a1, center, angle) item.x = item.centerPos.x;
item.bg_leftBottomPoint = this.getRotatedPoint(a2, center, angle) item.y = item.centerPos.y;
item.bg_rightTopPoint = this.getRotatedPoint(a3, center, angle)
item.bg_rightBottomPoint = this.getRotatedPoint(a4, center, angle)
item.bg_leftMiddlePoint = this.getRotatedPoint(a5, center, angle)
item.bg_rightMiddlePoint = this.getRotatedPoint(a6, center, angle)
item.bg_topMiddlePoint = this.getRotatedPoint(a7, center, angle)
item.bg_bottomMiddlePoint = this.getRotatedPoint(a8, center, angle)
}, },
/** /**
* 计算触摸点到圆心的距离 * 计算触摸点到圆心的距离
*
* @param centerX 圆心的 x 坐标 * @param centerX 圆心的 x 坐标
* @param centerY 圆心的 y 坐标 * @param centerY 圆心的 y 坐标
* @param x 手点击的 x 坐标 * @param x 手点击的 x 坐标
...@@ -984,6 +462,7 @@ const drag = { ...@@ -984,6 +462,7 @@ const drag = {
var diffY = y - centerY; var diffY = y - centerY;
return Math.sqrt(diffX * diffX + diffY * diffY); return Math.sqrt(diffX * diffX + diffY * diffY);
}, },
/** /**
* @description: 初始化targetObj的位置 * @description: 初始化targetObj的位置
*/ */
...@@ -991,318 +470,363 @@ const drag = { ...@@ -991,318 +470,363 @@ const drag = {
item.fontscale = item.fontscale * item.scale item.fontscale = item.fontscale * item.scale
item.font_size = item.font_size * item.scale item.font_size = item.font_size * item.scale
item.lineheight = item.lineheight * item.scale item.lineheight = item.lineheight * item.scale
item.left = item.left - (item.width * item.scale - item.width) / 2 item.left = item.left - (item.width * item.scale - item.width) / 2
item.top = item.top - (item.height * item.scale - item.height) / 2 item.top = item.top - (item.height * item.scale - item.height) / 2
item.width = item.width * item.scale item.width = item.width * item.scale
item.height = item.height * item.scale item.height = item.height * item.scale
item.initialWidth = item.initialWidth * item.scale item.initialWidth = item.initialWidth * item.scale
item.initialHeight = item.initialHeight * item.scale item.initialHeight = item.initialHeight * item.scale
item.image_top = item.image_top * item.scale item.image_top = item.image_top * item.scale
item.image_left = item.image_left * item.scale item.image_left = item.image_left * item.scale
// 记录初始盒子位置右下 //记录中心位置
item.rightBottomPoint = {
x: item.width + item.left,
y: item.height + item.top
}
// 记录初始盒子右上角位置
item.rightTopPoint = {
x: item.width + item.left,
y: item.top
}
// 记录左上角的位置
item.leftTopPoint = {
x: item.left,
y: item.top
}
// 左下
item.leftBottomPoint = {
x: item.left,
y: item.top + item.height
}
// 左中
item.leftMiddlePoint = {
x: item.left,
y: item.top + item.height / 2
}
// 右中
item.rightMiddlePoint = {
x: item.left + item.width,
y: item.top + item.height / 2
}
// 上中
item.topMiddlePoint = {
x: item.left + item.width / 2,
y: item.top
}
// 下中
item.bottomMiddlePoint = {
x: item.left + item.width / 2,
y: item.top + item.height
}
// 记录中心位置
item.centerPos = { item.centerPos = {
x: item.left + item.width / 2, x: item.left + item.width / 2,
y: item.top + item.height / 2 y: item.top + item.height / 2
} }
item.scaleone = item.width / item.height item.scaleone = item.width / item.height
item.initRightBottomPoint = item.rightBottomPoint
item.initRightTopPoint = item.rightTopPoint
item.initLeftTopPoint = item.leftTopPoint
item.initLeftBottomPoint = item.leftBottomPoint
item.initLeftMiddlePoint = item.leftMiddlePoint
item.initRightMiddlePoint = item.rightMiddlePoint
item.initTopMiddlePoint = item.topMiddlePoint
item.initBottomMiddlePoint = item.bottomMiddlePoint
item.initCenterPos = item.centerPos item.initCenterPos = item.centerPos
// 计算角度
let roat = Math.abs(item.angle) % 360
if(item.angle < 0){
let multiple = Math.ceil(Math.abs(item.angle) / 360)
roat = item.angle + multiple * 360
}
if(roat > 0){
// 重新计算旋转后四个点的坐标变化
let disAngle = roat
item.rightBottomPoint = this.getRotatedPoint(item.initRightBottomPoint, item.centerPos, disAngle)
item.rightTopPoint = this.getRotatedPoint(item.initRightTopPoint, item.centerPos, disAngle)
item.leftTopPoint = this.getRotatedPoint(item.initLeftTopPoint, item.centerPos, disAngle)
item.leftBottomPoint = this.getRotatedPoint(item.initLeftBottomPoint, item.centerPos, disAngle)
item.leftMiddlePoint = this.getRotatedPoint(item.initLeftMiddlePoint, item.centerPos, disAngle)
item.rightMiddlePoint = this.getRotatedPoint(item.initRightMiddlePoint, item.centerPos, disAngle)
item.topMiddlePoint = this.getRotatedPoint(item.initTopMiddlePoint, item.centerPos, disAngle)
item.bottomMiddlePoint = this.getRotatedPoint(item.initBottomMiddlePoint, item.centerPos, disAngle)
}
}, },
/** /**
* @description: 计算变换后的方框四个角的位置 * @description: 计算变换后的方框四个角的位置
*/ */
getTransferPositionangle(left, top, width, height, angle, center,item) { getTransferPositionangle(left, top, width, height, angle, center, item) {
// 计算变换后的方框四个角的位置 // 计算变换后的方框四个角的位置
var a1 = { },
x: left,
y: top /**
} * 自创建新数据
var a2 = { */
x: left, getNewDataInfo(item) {
y: top + height
//记录中心位置
item.centerPos = {
x: item.left + item.width / 2,
y: item.top + item.height / 2
} }
var a3 = {
x: left + width, item.x = item.centerPos.x;
y: top item.y = item.centerPos.y;
item.startX = item.x;
item.startY = item.y;
let moveXDistance = item.startX + 0.01;
let moveYDistance = item.startY + 0.01;
item.moveX = moveXDistance;
item.moveY = moveYDistance;
//追加改动值
item.left += item.moveX - item.startX; // x方向
item.top += item.moveY - item.startY; // y方向
item.x = item.left + item.width / 2;
item.y = item.top + item.height / 2;
item.xheart = item.left + (item.width) / 2 // 方块圆心
item.yheart = item.top + (item.height) / 2 // 方块圆心
item.heart_startX = moveXDistance; // 用于恢复startX数据
item.heart_startY = moveYDistance; // 用于恢复startY数据
let roat = Math.abs(item.angle) % 360
if (item.angle < 0) {
let multiple = Math.ceil(Math.abs(item.angle) / 360)
roat = item.angle + multiple * 360
} }
var a4 = { this.initPos(item)
x: left + width, },
y: top + height
/**
* 断是否吸取功能数据
* item 选中对象
* allLineListData 所有数据集合
*/
getIshasDrawData(item, allLineListData) {
//初始化选中对象左上角坐标位置
var pos = {
left: item.left,
top: item.top
};
//初始化选中坐标数据
var chosenGuides = {
top: {
dist: 5,
},
left: {
dist: 5,
}
};
//查询出来选择item坐标数据
let selectLineListData = this.addallLineListDataXAndY(item)
//循环对比坐标点寻找位置
if (allLineListData != null && allLineListData.length > 0 && selectLineListData != null &&
selectLineListData.length > 0) {
allLineListData.forEach((guide, i) => {
selectLineListData.forEach((elemGuide, i) => {
if (guide.type == elemGuide.type) {
var prop = guide.type == "h" ? "top" : "left";
var d = Math.abs(elemGuide[prop] - guide[prop]);
if (d < chosenGuides[prop].dist) {
chosenGuides[prop].dist = d;
chosenGuides[prop].offset = elemGuide[prop] - pos[prop];
chosenGuides[prop].guide = guide;
}
}
});
});
} }
var a5 = { return chosenGuides;
x: left, },
y: top + height / 2
/**
* 图片拖动中事件
*/
dragMove(e, item, data, editor_top) {
item.isShowLineV = false;
item.isShowLineH = false;
let mouseX = e.touches[0].clientX;
let mouseY = e.touches[0].clientY;
item.elmX = item.lastElmX
item.elmY = item.lastElmY
item.elmW = item.lastElmW
item.elmH = item.lastElmH
let diffX = mouseX - item.startX
let diffY = mouseY - item.startY
let dX = diffX
let dY = diffY
item.elmX += diffX
item.elmY += diffY
item.left = item.elmX
item.top = item.elmY
if (item.newRotate == 0) {
if (item.left > (data.editorWidth / 2 - 5) && item.left < (data.editorWidth / 2 + 5)) {
/* 辅助线左侧磁性吸附 */
item.elmX = data.editorWidth / 2
} else if (item.left > (data.editorWidth / 2 - item.width - 5) && item.left < (data.editorWidth / 2 - item.width + 5)) {
/* 辅助线右侧磁性吸附 */
item.elmX = data.editorWidth / 2 - item.width
} else if (item.left > -5 && item.left < 5) {
//裁剪区左边框磁性吸附
item.elmX = 0
} else if (item.left > data.editorWidth - item.width - 5 && item.left < data.editorWidth - item.width + 5) {
// 裁剪区右边框磁性吸附
item.elmX = data.editorWidth - item.width
} else if (item.left > ((data.editorWidth - item.width) / 2 - 5) && item.left < ((data.editorWidth - item.width) / 2 + 5)) {
/* 辅助线居中磁性吸附 */
item.elmX = (data.editorWidth - item.width) / 2
//wx.vibrateShort();
}
} }
var a6 = {
x: left + width, if (item.newRotate == 0) {
y: top + height / 2 if (item.top > (editor_top - item.height - 5) && item.top < (editor_top - item.height + 5)) {
/*辅助线下边框磁性吸附 */
item.elmY = editor_top - item.height
} else if (item.top > -5 && item.top < 5) {
//裁剪区上边框磁性吸附
item.elmY = 0
} else if (item.top > data.editorHeight - item.height - 5 && item.top < data.editorHeight - item.height + 5) {
//裁剪区下边框磁性吸附
item.elmY = data.editorHeight - item.height
} else if (item.top > (editor_top - (item.height / 2) - 5) && item.top < (editor_top - (item.height / 2) + 5)) {
/*辅助线居中磁性吸附 */
item.elmY = editor_top - (item.height / 2)
//wx.vibrateShort();
}
} }
var a7 = {
x: left + width / 2, item.left = item.elmX
y: top item.top = item.elmY
//记录中心位置
item.centerPos = {
x: item.left + item.width / 2,
y: item.top + item.height / 2
} }
var a8 = { item.x = item.centerPos.x;
x: left + width / 2, item.y = item.centerPos.y;
y: top + height },
//添加所有参考线x轴y轴
addallLineListDataXAndY(item) {
if (item.angle != 0) {
var center = {
x: item.left + (item.width) / 2,
y: item.top + (item.height) / 2
};
var topLeft = {
x: item.left,
y: item.top
};
var topRight = {
x: item.left + item.width,
y: item.top
};
var bottomleft = {
x: item.left,
y: item.top + item.height
};
var bottomRight = {
x: item.left + item.width,
y: item.top + item.height
};
var point1 = this.calNewPos(topLeft, center, item.angle);
var point2 = this.calNewPos(topRight, center, item.angle);
var point3 = this.calNewPos(bottomleft, center, item.angle);
var point4 = this.calNewPos(bottomRight, center, item.angle);
return [{
type: "h",
left: point1.x,
top: point1.y
}, {
type: "h",
left: point2.x,
top: point2.y
}, {
type: "h",
left: point3.x,
top: point3.y
}, {
type: "h",
left: point4.x,
top: point4.y
},
{
type: "v",
left: point1.x,
top: point1.y
},
{
type: "v",
left: point2.x,
top: point2.y
},
{
type: "v",
left: point3.x,
top: point3.y
},
{
type: "v",
left: point4.x,
top: point4.y
},
];
} else {
return [{
type: "h",
left: item.left,
top: item.top
},
{
type: "h",
left: item.left,
top: item.top + item.height
},
{
type: "v",
left: item.left,
top: item.top
},
{
type: "v",
left: item.left + item.width,
top: item.top
},
{
type: "h",
left: item.left,
top: item.top + (item.height) / 2
},
{
type: "v",
left: item.left + (item.width) / 2,
top: item.top
}
]
} }
item.leftTopPoint = this.getRotatedPoint(a1, center, angle)
item.leftBottomPoint = this.getRotatedPoint(a2, center, angle)
item.rightTopPoint = this.getRotatedPoint(a3, center, angle)
item.rightBottomPoint = this.getRotatedPoint(a4, center, angle)
item.leftMiddlePoint = this.getRotatedPoint(a5, center, angle)
item.rightMiddlePoint = this.getRotatedPoint(a6, center, angle)
item.topMiddlePoint = this.getRotatedPoint(a7, center, angle)
item.bottomMiddlePoint = this.getRotatedPoint(a8, center, angle)
}, },
/* 通过旧坐标、旋转角度、圆心计算旋转后点的新坐标 */
calNewPos(origin, center, angle) {
// 计算
let radian = Math.PI / 180 * angle;
let newX = (origin.x - center.x) * Math.cos(radian) - (origin.y - center.y) *
Math.sin(radian) + center.x;
let newY = (origin.y - center.y) * Math.cos(radian) + (origin.x - center.x) *
Math.sin(radian) + center.y;
// 取10位小数
newX = newX.toFixed(4)
newY = newY.toFixed(4)
return {
x: newX,
y: newY
};
},
/** /**
* 图片拖动中事件 * 拖动修改x轴y轴坐标中事件
*/ */
dragMove(e,item,data,editor_top){ dragMoveUpdateXAndY(clientX, clientY, item) {
//移动时的坐标值也写图片的属性里 let moveXDistance = item.startX + clientX;
item.moveX = e.touches[0].clientX; let moveYDistance = item.startY + clientY;
item.moveY = e.touches[0].clientY;
//追加改动值 item.moveX = moveXDistance; //移动x轴位置
item.moveY = moveYDistance; //移动y轴位置
item.left += item.moveX - item.startX; // x方向 item.left += item.moveX - item.startX; // x方向
item.top += item.moveY - item.startY; // y方向 item.top += item.moveY - item.startY; // y方向
item.x += item.moveX - item.startX; // 方块圆心 item.x += item.moveX - item.startX; // 方块圆心
item.y += item.moveY - item.startY; // 方块圆心 item.y += item.moveY - item.startY; // 方块圆心
// 磁性吸附部分 // 磁性吸附部分
item.xheart = item.left + (item.width) / 2 // 方块圆心 item.xheart = item.left + (item.width) / 2 // 方块圆心
item.yheart = item.top + (item.height) / 2 // 方块圆心 item.yheart = item.top + (item.height) / 2 // 方块圆心
item.heart_startX = e.touches[0].clientX; // 用于恢复startX数据 item.heart_startX = moveXDistance; // 用于恢复startX数据
item.heart_startY = e.touches[0].clientY; // 用于恢复startY数据 item.heart_startY = moveYDistance; // 用于恢复startY数据
//属性
item.active = false //辅助线
item.activeguide = true //辅助线
item.activescale = false // 旋转状态
item.activehorn = false // 角状态
item.activeedge = false // 边状态
let roat = Math.abs(item.angle) % 360
if (item.angle < 0) {
let multiple = Math.ceil(Math.abs(item.angle) / 360)
roat = item.angle + multiple * 360
}
this.initPos(item) this.initPos(item)
// if (item.scale < 1) { // 缩小
// let left_upper = item.xheart + (item.width * item.scale) / 2 // 图层右边靠近辅助线 item.startX = moveXDistance;
// let left_lower = item.xheart - (item.width * item.scale) / 2 // 图层左边靠近辅助线 item.startY = moveYDistance;
// let top_upper = item.yheart + (item.height * item.scale) / 2 // 图层上边靠近辅助线
// let top_lower = item.yheart - (item.height * item.scale) / 2 // 图层下边靠近辅助线 // 恢复
// if (roat == 90 || roat == 270) { if (item.heart_startX != undefined) {
// item.startX = e.touches[0].clientX; item.startX = item.heart_startX;
// item.startY = e.touches[0].clientY; item.startY = item.heart_startY;
// } else if (roat == 0 || roat == 180 || roat == 360) { }
// /* 左中右磁性吸附 */ if (item.xheart != undefined) {
// if (left_lower > (data.editorWidth / 2 - 5) && left_lower < (data.editorWidth / 2 + 5)) { item.x = item.xheart
// item.left = data.editorWidth / 2 - (item.width - item.width * item.scale) / 2 item.y = item.yheart
// } else if (item.left > ((data.editorWidth - item.width) / 2 - 5) && item.left < ((data.editorWidth - }
// item.width) / 2 + 5)) { },
// item.left = (data.editorWidth - item.width) / 2
// } else if (left_upper > (data.editorWidth / 2 - 5) && left_upper < (data.editorWidth / 2 + 5)) { //计算圆角缩放比例
// item.left = data.editorWidth / 2 - item.width + (item.width - item.width * item.scale) / 2 getConterScale(item) {
// } else { let scale = 0;
// item.startX = e.touches[0].clientX; if (item.isFillet) {
// } let imageWid = item.width
// /* 上中下磁性吸附 */ let imageHei = item.height
// if (top_lower > editor_top - 5 && top_lower < editor_top + 5) { if (imageHei > imageWid) {
// item.top = editor_top - (item.height - item.height * item.scale) / 2 scale = imageHei / 2;
// } else if (item.top > (editor_top - (item.height / 2) - 5) && item.top < (editor_top - (item.height /
// 2) + 5)) {
// item.top = editor_top - (item.height / 2)
// } else if (top_upper > (editor_top - 5) && top_upper < (editor_top + 5)) {
// item.top = editor_top - item.height + (item.height - item.height * item.scale) / 2
// } else {
// item.startY = e.touches[0].clientY;
// }
// } else {
// item.startX = e.touches[0].clientX;
// item.startY = e.touches[0].clientY;
// }
// } else if (item.scale > 1) { // 放大
// let left_upper = item.xheart + (item.width * item.scale) / 2
// let left_lower = item.xheart - (item.width * item.scale) / 2
// let top_upper = item.yheart + (item.height * item.scale) / 2
// let top_lower = item.yheart - (item.height * item.scale) / 2
// if (roat == 90 || roat == 270) {
// item.startX = e.touches[0].clientX;
// item.startY = e.touches[0].clientY;
// } else if (roat == 0 || roat == 180 || roat == 360) {
// //把新的值赋给老的值
// if (left_lower > (data.editorWidth / 2 - 5) && left_lower < (data.editorWidth / 2 + 5)) {
// item.left = data.editorWidth / 2 + (item.width * item.scale - item.width) / 2
// } else if (item.left > ((data.editorWidth - item.width) / 2 - 5) && item.left < ((data.editorWidth -
// item.width) / 2 + 5)) {
// item.left = (data.editorWidth - item.width) / 2
// } else if (left_upper > data.editorWidth / 2 - 5 && left_upper < data.editorWidth / 2 + 5) {
// item.left = data.editorWidth / 2 - item.width * item.scale + (item.width * item.scale - item.width) / 2
// } else {
// item.startX = e.touches[0].clientX;
// }
// if (top_lower > editor_top - 5 && top_lower < editor_top + 5) {
// item.top = editor_top + (item.height * item.scale - item.height) / 2
// } else if (item.top > (editor_top - (item.height / 2) - 5) && item.top < (editor_top - (item.height /
// 2) + 5)) {
// item.top = editor_top - (item.height / 2)
// } else if (top_upper > (editor_top - 5) && top_upper < (editor_top + 5)) {
// item.top = editor_top - item.height * item.scale + (item.height * item.scale - item.height) / 2
// } else {
// item.startY = e.touches[0].clientY;
// }
// } else {
// item.startX = e.touches[0].clientX;
// item.startY = e.touches[0].clientY;
// }
// } else {
if (roat == 90 || roat == 270) {
item.startX = e.touches[0].clientX;
item.startY = e.touches[0].clientY;
// if(item.xheart - item.height / 2 > (data.editorWidth / 2 - 5) && item.xheart - item.height / 2 < (data.editorWidth / 2 + 5)){
// /* 左侧磁性吸附 */
// item.left = data.editorWidth / 2 - (item.width - item.height)/2
// }else if(item.left > ((data.editorWidth - item.width) / 2 - 5) && item.left < ((data.editorWidth - item.width) / 2 + 5)){
// /* 居中磁性吸附 */
// item.left = (data.editorWidth - item.width) / 2
// }else if(item.xheart - item.height / 2 > (data.editorWidth / 2 - item.height - 5) && item.left < (data.editorWidth / 2 - item.height + 5)){
// /* 右侧磁性吸附 */
// // item.left = data.editorWidth / 2 - item.height - (item.width - item.height)/2
// }else{
// item.startX = e.touches[0].clientX;
// }
// if(item.top > editor_top - 5 && item.top < editor_top + 5){
// /* 左侧磁性吸附 */
// item.top = editor_top
// }else if(item.top > (editor_top - (item.height / 2) - 5) && item.top < (editor_top - (item.height / 2 )+ 5)){
// /* 居中磁性吸附 */
// item.top = editor_top - (item.height / 2)
// }else if(item.top > (editor_top - item.height - 5) && item.top < (editor_top - item.height + 5)){
// /* 右侧磁性吸附 */
// item.top = editor_top - item.height
// }else if(item.top > - 5 && item.top < 5){
// // 上边框
// item.top = 0
// }else if(item.top > data.editorHeight - item.height - 5 && item.top < data.editorHeight - item.height + 5){
// // 下边框
// item.top = data.editorHeight - item.height
// }else{
// item.startY = e.touches[0].clientY;
// }
} else if (roat == 0 || roat == 180 || roat == 360) {
if (item.left > (data.editorWidth / 2 - 5) && item.left < (data.editorWidth / 2 + 5)) {
/* 辅助线左侧磁性吸附 */
item.left = data.editorWidth / 2
} else if (item.left > ((data.editorWidth - item.width) / 2 - 5) && item.left < ((data.editorWidth -item.width) / 2 + 5)) {
/* 辅助线居中磁性吸附 */
item.left = (data.editorWidth - item.width) / 2
wx.vibrateShort(); // 使手机振动15ms
} else if (item.left > (data.editorWidth / 2 - item.width - 5) && item.left < (data.editorWidth / 2 -item.width + 5)) {
/* 辅助线右侧磁性吸附 */
item.left = data.editorWidth / 2 - item.width
} else if (item.left > -5 && item.left < 5) {
// 裁剪区左边框磁性吸附
item.left = 0
} else if (item.left > data.editorWidth - item.width - 5 && item.left < data.editorWidth - item.width +5) {
// 裁剪区右边框磁性吸附
item.left = data.editorWidth - item.width
} else {
item.startX = e.touches[0].clientX;
}
if (item.top > editor_top - 5 && item.top < editor_top + 5) {
/* 辅助线上边框磁性吸附 */
item.top = editor_top
} else if (item.top > (editor_top - (item.height / 2) - 5) && item.top < (editor_top - (item.height /2) + 5)) {
/* 辅助线居中磁性吸附 */
item.top = editor_top - (item.height / 2)
wx.vibrateShort(); // 使手机振动15ms
} else if (item.top > (editor_top - item.height - 5) && item.top < (editor_top - item.height + 5)) {
/* 辅助线下边框磁性吸附 */
item.top = editor_top - item.height
} else if (item.top > -5 && item.top < 5) {
// 裁剪区上边框磁性吸附
item.top = 0
} else if (item.top > data.editorHeight - item.height - 5 && item.top < data.editorHeight - item.height +5) {
// 裁剪区下边框磁性吸附
item.top = data.editorHeight - item.height
} else {
item.startY = e.touches[0].clientY;
}
} else { } else {
item.startX = e.touches[0].clientX; scale = imageWid / 2;
item.startY = e.touches[0].clientY;
} }
// } }
item.conterScale = scale;
}, },
} }
export default drag export default drag
util/Env.js
...@@ -23,8 +23,7 @@ const Env = { ...@@ -23,8 +23,7 @@ const Env = {
getmalltext: () => "色彩公园Lite", getmalltext: () => "色彩公园Lite",
getAppID: () => "wx1c777ee874c39b0b", getAppID: () => "wx1c777ee874c39b0b",
getcompany: () => "深圳市瑞丰彩科技有限公司", getcompany: () => "深圳市瑞丰彩科技有限公司",
//跳转--色彩小程序
// 跳转--色彩小程序
getappId: () => "wx55b5b6d95c648041", getappId: () => "wx55b5b6d95c648041",
//getenvVersion: () => "trial", //getenvVersion: () => "trial",
getenvVersion: () => "release", getenvVersion: () => "release",
......
util/http.js
...@@ -18,7 +18,7 @@ const http = ({ url = '', param = {}, ...other } = {}) => { ...@@ -18,7 +18,7 @@ const http = ({ url = '', param = {}, ...other } = {}) => {
...other, ...other,
complete(res) { complete(res) {
wx.hideLoading(); wx.hideLoading();
console.log(`耗时${Date.now()} - timeStart`); //console.log(`耗时${Date.now()} - timeStart`);
if(res.statusCode >= 200 && res.statusCode < 300){ if(res.statusCode >= 200 && res.statusCode < 300){
resolve(res.data); resolve(res.data);
}else{ }else{
......
util/loadFont.js
...@@ -20,7 +20,7 @@ let loadFont = function(textlist,list) { ...@@ -20,7 +20,7 @@ let loadFont = function(textlist,list) {
weight: 100 weight: 100
}, },
success: function(message) { success: function(message) {
// console.log('load font-family success:', message) //console.log('load font-family success:', message)
textlist.textlong = true textlist.textlong = true
}, },
fail: function(message) { fail: function(message) {
...@@ -29,8 +29,8 @@ let loadFont = function(textlist,list) { ...@@ -29,8 +29,8 @@ let loadFont = function(textlist,list) {
}, },
complete(res) { complete(res) {
uni.hideLoading(); uni.hideLoading();
// wx.showToast({title: '字体下载完成',icon: 'success',duration: 2000}); //wx.showToast({title: '字体下载完成',icon: 'success',duration: 2000});
// console.log('complete', res) //console.log('complete', res)
textlist.long = true textlist.long = true
// list.forEach(item=>{ // list.forEach(item=>{
// if(item.long == true){ // if(item.long == true){
......
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