Skip to content

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

截屏

parent 6e40a25e
Hide whitespace changes
Inline Side-by-side
Showing with 19 additions and 63 deletions
pages/album/photoJigsaw/photoJigsaw.vue
View file @ a01995e1
......@@ -14,7 +14,6 @@
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"
:class="item.id"
:style="{'clip': 'rect('+item.imgtop+'px,'+item.imgright+'px,'+item.imgbottom+'px,'+item.imgleft+'px)', 'position':'absolute'}"
@touchstart="handleTouchStart($event,index)" @touchmove="handleTouchMove($event,index)" @touchend="handleTouchEnd($event,index)"></image>
</view>
</template>
......@@ -50,10 +49,6 @@ export default {
top:'184',
left:'74',
radius:'0',
imgtop:0,
imgright:0,
imgbottom:0,
imgleft:0,
},
{
id:'img2',
......@@ -63,23 +58,15 @@ export default {
top:'184',
left:'387',
radius:'0',
imgtop:0,
imgright:0,
imgbottom:0,
imgleft:0,
},
{
id:'img3',
url:'http://lx.pangdly.com/img/huiguan.c00da69.jpg',
width:'427',
height:'320',
width:'299',
height:'384',
top:'640',
left:'74',
radius:'0',
imgtop:0,
imgright:0,
imgbottom:0,
imgleft:0,
},
],
......@@ -99,19 +86,7 @@ export default {
query.select('.jigsaw-picture').boundingClientRect(res => {
this.screenWidth = res.width
}).exec()
},
onReady(){
uni.createSelectorQuery().selectAll('.queryInfo').boundingClientRect().exec((res)=>{//初始化IMG自截图的宽高
let clipList = res[0]
clipList.forEach(item=>{
this.pictureJigsawPosition.forEach(item2=>{
if(item.dataset.id==item2.id){
item2.imgright = item.width
item2.imgbottom = item.height
}
})
})
})
},
methods: {
onScroll(event) {// event.detail 包含了滚动位置信息
......@@ -135,7 +110,6 @@ export default {
handleTouchMove(event,index) {
},
handleTouchStart(event,index) {//changedTouches[0] pageX横向 pageY属相 //rect (top, right, bottom, left)
console.log(event)
this.transpositionStartMes = event.changedTouches[0]
this.transpositionStartIndex = index
},
......@@ -182,31 +156,12 @@ export default {
promiseArray = JSON.parse(JSON.stringify(res[0]))
var imgList = JSON.parse(JSON.stringify(res[0]))//用于图片自裁剪
var promiseArrayNum= promiseArray[promiseArray.length-1].top
imgList.forEach(item=>{//图片自裁剪循环
this.pictureJigsawPosition.forEach(item2=>{
if(item.dataset.id==item2.id){
var leftNum = parseInt(item.dataset.tailorx/750*this.screenWidth)-item.left
var heightNum = parseInt(item.dataset.tailory/750*this.screenWidth)-(item.top-promiseArrayNum)
if(leftNum<0){
leftNum = 0
}
if(heightNum>0){
heightNum=0
}
item2.imgtop = leftNum
item2.imgright = parseInt(item.dataset.widthonce/750*this.screenWidth)+leftNum
item2.imgbottom = parseInt(item.dataset.heightonce/750*this.screenWidth)+heightNum
item2.imgleft = leftNum
}
})
})
for(let i=0;i<promiseArray.length;i++){
let type = 'image'
let src= promiseArray[i].dataset.src
let posX = promiseArray[i].left //parseInt(promiseArray[i].dataset.tailorx/750*this.screenWidth)
let posY = promiseArray[i].top-promiseArrayNum//parseInt(promiseArray[i].dataset.tailory/750*this.screenWidth)
let posX = parseInt(promiseArray[i].dataset.tailorx/750*this.screenWidth) //如果向左位移则需要用框的
let posY = parseInt(promiseArray[i].dataset.tailory/750*this.screenWidth)//parseInt(promiseArray[i].dataset.tailory/750*this.screenWidth)
let tailorx = parseInt(promiseArray[i].dataset.tailorx/750*this.screenWidth)-promiseArray[i].left
if(tailorx<0){//因为用的parseInt 是直接舍去，当出现负数的时候 则算为0
tailorx = 0
......@@ -217,8 +172,8 @@ export default {
}
let width = promiseArray[i].width
let height = promiseArray[i].height
let swidth = parseInt(promiseArray[i].dataset.widthonce)///750*this.screenWidth
let sheight = parseInt(promiseArray[i].dataset.heightonce)///750*this.screenWidth
let swidth = parseInt(promiseArray[i].dataset.widthonce/750*this.screenWidth)///750*this.screenWidth
let sheight = parseInt(promiseArray[i].dataset.heightonce/750*this.screenWidth)///750*this.screenWidth
promiseArray[i]={
type:'image',
src: src,
......@@ -241,14 +196,16 @@ export default {
// uni-app 中，不管是小程序，app，h5 在获取元素实例时，都是统一的方法,只要获取元素的宽高
uni.createSelectorQuery().select('#myCanvas').fields({ node: true, size: true })
.exec((res) => {
// 获取设备设备像素比
const dpr = uni.getSystemInfoSync().pixelRatio
// 微信小程序绘制
let textCanvas = that.textCanvas = res[0].node // 获取元素实例
let textCtx = textCanvas.getContext('2d') // 创建二维绘图
// 获取设备设备像素比
const dpr = uni.getSystemInfoSync().pixelRatio
textCanvas.width = res[0].width * dpr // 设置canvas像素宽
textCanvas.height = res[0].height * dpr // 设置canvas像素高
let textCtx = textCanvas.getContext('2d') // 创建二维绘图
textCtx.clearRect(0, 0, res[0].width, res[0].height) // 设置画布大小
textCtx.scale(dpr, dpr)
// 这里开始绘制canvas内容，绘制的过程当中，不知道是小程序的问题，还是什么问题在绘制有背景图片的内容时，
......@@ -257,20 +214,19 @@ export default {
for(let i = 0; i < promiseArray.length; i++){
const tx = textCanvas.createImage()
tx.src = promiseArray[i].src // 线上地址或者本地地址都可以
tx.width = promiseArray[i].width
tx.height = promiseArray[i].height
tx.onload = () => {
// 图片 裁剪 ：X Y 宽度 高度
//promiseArray[i].tailorx,promiseArray[i].tailory,promiseArray[i].swidth, promiseArray[i].sheight-1,
textCtx.drawImage(tx,promiseArray[i].posX * dpr, promiseArray[i].posY * dpr,promiseArray[i].width * dpr, promiseArray[i].height * dpr)
if(i==promiseArray.length-1){
textCtx.drawImage(tx, promiseArray[i].posX, promiseArray[i].posY,promiseArray[i].swidth, promiseArray[i].sheight)
}else{
textCtx.drawImage(tx,promiseArray[i].tailorx,promiseArray[i].tailory,promiseArray[i].swidth, promiseArray[i].sheight*1.72, promiseArray[i].posX, promiseArray[i].posY,promiseArray[i].swidth, promiseArray[i].sheight)
}
}
}
if(this.canvasMaskNum==0){
this.canvasMaskNum++
setTimeout(()=>{// uni-app必须加上延迟，不然显示不出来， 亲测
this.toCanvas()
}, 1000)
}
})
},
}
......
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