Commit ae912603 authored by qipeng's avatar qipeng

拼图优化

parent 05d2fc95
......@@ -11,11 +11,15 @@
<template v-for="(item,index) in pictureJigsawPosition">
<view class="picture-position" @scroll="onScroll($event,index)" :key="index" :style="{'width': item.width + 'rpx' ,'height': item.height + 'rpx' ,'top': item.top + 'rpx' ,'left': item.left + 'rpx' ,'border-radius': item.radius + 'rpx' ,}">
<movable-area scale-area :style="{'width': item.width + 'rpx' ,'height': item.height + 'rpx'}">
<movable-view direction="all" @scale="onScale" scale="true" scale-min="1" scale-max="4" :scale-value="1">
<!--scale-min最小倍数 scale-max最大倍数 scale-value每次放大缩小倍数 image需要和movable-view大小一致-->
<movable-view direction="all" @scale="onScale" scale="true" scale-min="0" scale-max="4" :scale-value="1" :style="{width:item.realTimeWidth+'px',height:item.realTimeHeight+'px'}">
<!--data-XXX自定义参数-->
<image class="queryInfo"
data-type="image" :data-src="item.url" :data-widthonce="item.width" :data-heightonce="item.height" :src="item.url"
:data-tailorx="item.left" :data-tailory="item.top" :data-id="item.id"
:data-primitiveWidth="item.primitiveWidth" :data-primitiveHeight="item.primitiveHeight"
:class="item.id"
:style="{width:item.realTimeWidth+'px',height:item.realTimeHeight+'px'}"
@touchstart="handleTouchStart($event,index)" @touchmove="handleTouchMove($event,index)" @touchend="handleTouchEnd($event,index)"></image>
</movable-view>
</movable-area>
......@@ -122,9 +126,14 @@ export default {
pictureJigsawPosition:[//图片框位置
{
id:'img1',
url:'http://lx.pangdly.com/img/sodao.1cdf287.jpg',
//url:'http://lx.pangdly.com/img/sodao.1cdf287.jpg',
url:'https://img2.baidu.com/it/u=272669934,2134014224&fm=253&fmt=auto&app=138&f=JPEG?w=1132&h=800',
width:'243',
height:'320',
realTimeWidth:'1132',
realTimeHeight:'800',
primitiveWidth:'1132',
primitiveHeight:'800',
top:'151',
left:'61',
radius:'0',
......@@ -134,6 +143,10 @@ export default {
url:'http://lx.pangdly.com/img/liangjiang.097258e.jpg',
width:'243',
height:'320',
realTimeWidth:'332',
realTimeHeight:'340',
primitiveWidth:'332',
primitiveHeight:'340',
top:'151',
left:'312',
radius:'0',
......@@ -143,6 +156,10 @@ export default {
url:'http://lx.pangdly.com/img/huiguan.c00da69.jpg',
width:'346',
height:'266',
realTimeWidth:'332',
realTimeHeight:'340',
primitiveWidth:'332',
primitiveHeight:'340',
top:'530',
left:'61',
radius:'0',
......@@ -167,11 +184,26 @@ export default {
query.select('.jigsaw-picture').boundingClientRect(res => {
this.screenWidth = res.width
}).exec()
this.lodaImgFun()
},
methods: {
lodaImgFun(){//获取图片
this.pictureJigsawPosition.forEach((item,index)=>{
uni.getImageInfo({
src: item.url,
success: (res) => {//res.width res.height
// item.primitiveWidth = res.width//原始宽度
// item.primitiveHeight = res.height//原始高度
},
fail: (err) => {
console.error('获取图片信息失败:', err)
}
})
})
console.log(this.pictureJigsawPosition)
},
onScale(val){//放大缩小
console.log(val)
},
clickActFun(num){//宫格选择
this.titleclick = num
......@@ -276,7 +308,7 @@ export default {
}
//y promiseArrayNum 主边框对顶部的高度 promiseArray[i].dataset.tailory 图片主边框的高度
let tailory = (promiseArrayNum+uni.upx2px(promiseArray[i].dataset.tailory))-promiseArray[i].top
console.log(uni.upx2px(promiseArray[i].dataset.tailory))
//console.log(uni.upx2px(promiseArray[i].dataset.tailory))
if(tailory<0){//因为用的parseInt 是直接舍去,当出现负数的时候 则算为0
tailory = 0
}
......@@ -284,6 +316,11 @@ export default {
let height = promiseArray[i].height//图片原始的高度
let swidth = uni.upx2px(promiseArray[i].dataset.widthonce)//要使用的图像的宽度
let sheight = uni.upx2px(promiseArray[i].dataset.heightonce)//要使用的图像的高度
let primitiveWidth = promiseArray[i].dataset.primitivewidth//原始宽度
let primitiveHeight = promiseArray[i].dataset.primitiveheight//原始高度
promiseArray[i]={
type:'image',
src: src,
......@@ -295,6 +332,8 @@ export default {
posY:posY,
tailorx:tailorx,
tailory:tailory,
primitiveWidth:primitiveWidth,
primitiveHeight:primitiveHeight,
}
}
......@@ -335,18 +374,10 @@ export default {
}else{//插入的图片
var widthScale = 0//宽度比例
var heightScale = 0//高度比例
uni.getImageInfo({
src: tx.src,
success: (res) => {
widthScale = res.width/promiseArray[i].swidth
heightScale = res.height/promiseArray[i].sheight
console.log(widthScale+','+heightScale)
textCtx.drawImage(tx,promiseArray[i].tailorx,promiseArray[i].tailory,promiseArray[i].swidth*2.63, promiseArray[i].sheight*2.04,promiseArray[i].posX, promiseArray[i].posY,promiseArray[i].swidth, promiseArray[i].sheight)
},
fail: (err) => {
console.error('获取图片信息失败:', err)
}
})
widthScale = promiseArray[i].primitiveWidth/promiseArray[i].width
heightScale = promiseArray[i].primitiveHeight/promiseArray[i].height
textCtx.drawImage(tx,promiseArray[i].tailorx,promiseArray[i].tailory,promiseArray[i].swidth*widthScale, promiseArray[i].sheight*heightScale,promiseArray[i].posX, promiseArray[i].posY,promiseArray[i].swidth, promiseArray[i].sheight)
}
}
......
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