Skip to content

U
uni-pdtravel
Commit 05d2fc95 authored by qipeng's avatar qipeng
Browse files
Options

拼图修改

parent e310d760
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 53 additions and 20 deletions
pages/album/photoJigsaw/photoJigsaw - 副本 (3).vue 0 → 100644
View file @ 05d2fc95
This diff is collapsed.
pages/album/photoJigsaw/photoJigsaw.vue
View file @ 05d2fc95
...@@ -10,11 +10,15 @@ ...@@ -10,11 +10,15 @@
<template v-for="(item,index) in pictureJigsawPosition"> <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' ,}"> <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' ,}">
<image class="queryInfo" <movable-area scale-area :style="{'width': item.width + 'rpx' ,'height': item.height + 'rpx'}">
data-type="image" :data-src="item.url" :data-widthonce="item.width" :data-heightonce="item.height" :src="item.url" <movable-view direction="all" @scale="onScale" scale="true" scale-min="1" scale-max="4" :scale-value="1">
:data-tailorx="item.left" :data-tailory="item.top" :data-id="item.id" <image class="queryInfo"
:class="item.id" data-type="image" :data-src="item.url" :data-widthonce="item.width" :data-heightonce="item.height" :src="item.url"
@touchstart="handleTouchStart($event,index)" @touchmove="handleTouchMove($event,index)" @touchend="handleTouchEnd($event,index)"></image> :data-tailorx="item.left" :data-tailory="item.top" :data-id="item.id"
:class="item.id"
@touchstart="handleTouchStart($event,index)" @touchmove="handleTouchMove($event,index)" @touchend="handleTouchEnd($event,index)"></image>
</movable-view>
</movable-area>
</view> </view>
</template> </template>
<image class="picture-backgrounImg queryInfo" <image class="picture-backgrounImg queryInfo"
...@@ -22,7 +26,7 @@ ...@@ -22,7 +26,7 @@
data-tailorx="0" data-tailory="0" data-tailorx="0" data-tailory="0"
src="../static/album/backgroundImgTo.png"></image> src="../static/album/backgroundImgTo.png"></image>
</view> </view>
<button @click="toCanvas" style="top:0rpx;position: absolute;">按钮</button> <button @click="toCanvas" style="top:1150rpx;position: absolute;">按钮</button>
<!--画图板--> <!--画图板-->
<view class="jigsaw-canvasMask" :class="canvasMaskType==true?'jigsaw-canvasMaskAct':''" :style="{'top': albumBoxTop + 'px'}"> <view class="jigsaw-canvasMask" :class="canvasMaskType==true?'jigsaw-canvasMaskAct':''" :style="{'top': albumBoxTop + 'px'}">
<canvas class="jigsaw-canvas" type="2d" id="myCanvas"></canvas> <canvas class="jigsaw-canvas" type="2d" id="myCanvas"></canvas>
...@@ -166,6 +170,9 @@ export default { ...@@ -166,6 +170,9 @@ export default {
}, },
methods: { methods: {
onScale(val){//放大缩小
},
clickActFun(num){//宫格选择 clickActFun(num){//宫格选择
this.titleclick = num this.titleclick = num
}, },
...@@ -259,8 +266,8 @@ export default { ...@@ -259,8 +266,8 @@ export default {
}else{//处理置入的图片 }else{//处理置入的图片
let type = 'image' let type = 'image'
let src= promiseArray[i].dataset.src let src= promiseArray[i].dataset.src
let posX = parseInt(promiseArray[i].dataset.tailorx/606*this.screenWidth) //图片所在画板的X轴数据 let posX = uni.upx2px(promiseArray[i].dataset.tailorx) //图片所在画板的X轴数据
let posY = parseInt(promiseArray[i].dataset.tailory/606*this.screenWidth) //图片所在画板的Y轴数据 let posY = uni.upx2px(promiseArray[i].dataset.tailory) //图片所在画板的Y轴数据
//截图的初始X和Y轴 //截图的初始X和Y轴
//x uni.upx2px(72)+uni.upx2px(promiseArray[i].dataset.tailorx) ---获取左边直至顶部的宽度 //x uni.upx2px(72)+uni.upx2px(promiseArray[i].dataset.tailorx) ---获取左边直至顶部的宽度
let tailorx = (uni.upx2px(72)+uni.upx2px(promiseArray[i].dataset.tailorx))-promiseArray[i].left let tailorx = (uni.upx2px(72)+uni.upx2px(promiseArray[i].dataset.tailorx))-promiseArray[i].left
...@@ -268,16 +275,15 @@ export default { ...@@ -268,16 +275,15 @@ export default {
tailorx = 0 tailorx = 0
} }
//y promiseArrayNum 主边框对顶部的高度 promiseArray[i].dataset.tailory 图片主边框的高度 //y promiseArrayNum 主边框对顶部的高度 promiseArray[i].dataset.tailory 图片主边框的高度
let tailory = (promiseArrayNum+uni.upx2px(promiseArray[i].dataset.tailory))-promiseArray[i].top+10 let tailory = (promiseArrayNum+uni.upx2px(promiseArray[i].dataset.tailory))-promiseArray[i].top
console.log(promiseArrayNum+','+uni.upx2px(promiseArray[i].dataset.tailory)+','+promiseArray[i].top) console.log(uni.upx2px(promiseArray[i].dataset.tailory))
console.log(tailory)
if(tailory<0){//因为用的parseInt 是直接舍去，当出现负数的时候 则算为0 if(tailory<0){//因为用的parseInt 是直接舍去，当出现负数的时候 则算为0
tailory = 0 tailory = 0
} }
let width = promiseArray[i].width//图片原始的宽度 let width = promiseArray[i].width//图片原始的宽度
let height = promiseArray[i].height//图片原始的高度 let height = promiseArray[i].height//图片原始的高度
let swidth = parseInt(promiseArray[i].dataset.widthonce/606*this.screenWidth)//要使用的图像的宽度 let swidth = uni.upx2px(promiseArray[i].dataset.widthonce)//要使用的图像的宽度
let sheight = parseInt(promiseArray[i].dataset.heightonce/606*this.screenWidth)//要使用的图像的高度 let sheight = uni.upx2px(promiseArray[i].dataset.heightonce)//要使用的图像的高度
promiseArray[i]={ promiseArray[i]={
type:'image', type:'image',
src: src, src: src,
...@@ -308,8 +314,8 @@ export default { ...@@ -308,8 +314,8 @@ export default {
let textCtx = textCanvas.getContext('2d') // 创建二维绘图 let textCtx = textCanvas.getContext('2d') // 创建二维绘图
// 获取设备设备像素比 // 获取设备设备像素比
const dpr = uni.getSystemInfoSync().pixelRatio const dpr = uni.getSystemInfoSync().pixelRatio
textCanvas.width = res[0].width * dpr // 设置canvas像素宽 textCanvas.width = res[0].width * dpr // 设置canvas像素宽
textCanvas.height = res[0].height * dpr // 设置canvas像素高 textCanvas.height = res[0].height * dpr // 设置canvas像素高
textCtx.clearRect(0, 0, res[0].width, res[0].height) // 设置画布大小 textCtx.clearRect(0, 0, res[0].width, res[0].height) // 设置画布大小
textCtx.scale(dpr, dpr) textCtx.scale(dpr, dpr)
...@@ -320,17 +326,29 @@ export default { ...@@ -320,17 +326,29 @@ export default {
for(let i = 0; i <= promiseArray.length-1; i++){ for(let i = 0; i <= promiseArray.length-1; i++){
const tx = textCanvas.createImage() const tx = textCanvas.createImage()
tx.src = promiseArray[i].src // 线上地址或者本地地址都可以 tx.src = promiseArray[i].src // 线上地址或者本地地址都可以
tx.width = promiseArray[i].width tx.width = promiseArray[i].width
tx.height = promiseArray[i].height tx.height = promiseArray[i].height
tx.onload = () => { tx.onload = () => {
// 图片 裁剪 ：X Y 宽度 高度 // 图片 裁剪 ：X Y 宽度 高度
if(i==promiseArray.length-1){//背景 if(i==promiseArray.length-1){//背景
textCtx.drawImage(tx, promiseArray[i].posX, promiseArray[i].posY,promiseArray[i].swidth, promiseArray[i].sheight) textCtx.drawImage(tx, promiseArray[i].posX, promiseArray[i].posY,promiseArray[i].swidth, promiseArray[i].sheight)
}else{//插入的图片 }else{//插入的图片
//promiseArray[i].tailorx,promiseArray[i].tailory,promiseArray[i].swidth, promiseArray[i].sheight*1.72, var widthScale = 0//宽度比例
textCtx.drawImage(tx,promiseArray[i].tailorx,promiseArray[i].tailory,promiseArray[i].swidth*1.03, promiseArray[i].sheight*1.4, promiseArray[i].posX, promiseArray[i].posY,promiseArray[i].swidth, promiseArray[i].sheight) 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)
}
})
} }
} }
} }
this.textCanvasType=false this.textCanvasType=false
...@@ -390,6 +408,21 @@ export default { ...@@ -390,6 +408,21 @@ export default {
top: 0; top: 0;
left: 0; left: 0;
} }
/deep/ movable-view {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height:100%;
}
/deep/ movable-view img{
display: block;
width: 100%;
}
/deep/ movable-area {
position:fixed;
overflow: hidden;
}
} }
.jigsaw-canvas{ .jigsaw-canvas{
display: block; display: block;
......
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