拖动盖章；
pdf预览；
生成x,y轴坐标；
最初位置如下：
image.png
image.png
<style lang="scss">
.helpCenter{
background-color:#fff;
.center {
position: relative;
text-align: center;
padding-top: 20px;
background: #fff;
}
.sign-wrap{
position: absolute;
.sign-img{
position: relative;
}
}
}
.helpCenter .pdfBtn{
width: 1200px;
margin: 0 auto;
background-color: #fff;
text-align: center;
margin-bottom:10px;
button{
cursor: pointer;
width: 100px;
height: 30px;
}
}
.main{
display: flex;
justify-content: center;
}
.side-bar{
.side-barinfo{
width:300px;
height: 100vh;
border: 1px solid #fa0;
}
.signbutton{
cursor: pointer;
}
}
.sign-img{
z-index: 18;
}
.sign-imginner{
width: 200px;
height: 200px;
background: url('../../static/icon_pxi.png') center center;
background-size: 200px 200px;
z-index: 18;
// display: none;
}
</style>
<template>
<div class="helpCenter" v-loading="!isready">
<div class="main" v-show="isready">
<div class="side-bar">
<h2>推拽章的信息</h2>
<div class="side-barinfo">
<div class="signbutton">推动盖章</div>
<div class="sign-img" @mousedown='signPic' @mouseup='removeSignPic'>
<div class="sign-imginner">
<h2 style="color:#fff;text-align:center;">章托放</h2>
</div>
<!-- <img src="" style="width:200px;height:200px;" alt=""> -->
</div>
</div>
</div>
<div class="center">
<div class="sign-wrap" @mousedown='signPic' @mouseup='removeSignPic'></div>
<canvas style="border:1px solid #f00" ref='canvasDOM' class="canvasstyle" id="the-canvas"></canvas>
</div>
</div>
<div class="pdfBtn">
<button type="primary" @click="prev"><i class="el-icon-arrow-left el-icon--left"></i>上一页</button>
<span>Page: <span v-text="page_num"></span> / <span v-text="page_count"></span></span>
<button type="primary" @click="next">下一页<i class="el-icon-arrow-right el-icon--right"></i></button>
<input type="text" v-model='gotopage_num' style="width:100px;height:29px;" placeholder="请输入页数">
<button @click="goTopage">确定</button>
<button @click="downpdf">下载</button>
</div>
</div>
</template>
<script>
import PDFJS from '../../static/pdf/pdf.js';
export default {
name: "helpCenter",
data() {
return {
pdfurl:'https://yunlian-ku-res-cloudwarehouse-prod.oss-cn-beijing.aliyuncs.com/cloudwarehouse/oss/contract/chb-help-20180920.pdf?OSSAccessKeyId=LTAIgsIfRCwojpcm&Expires=1570500208&Signature=CBpZntWfITvsm6zCGGl765Z1am8%3D&time='+Date.now(),//pdf链接地址
pdfDoc: null, //pdfjs 生成的对象
pageNum: 1, //
pageRendering: false,
pageNumPending: null,
compuscale:1, //放大倍数
scale:1.6,//放大倍数
page_num: 0, //当前页数
page_count: 0, //总页数
gotopage_num:'',//跳转到指定的页面
// maxscale: 2, //最大放大倍数
// minscale: 0.8, //最小放大倍数
isready: false
};
},
created() {
var root = "$Urlhttp";
if (root != "/ssocorp") {
this.ajaxUrl = "";
}
var root2 = "$webRoot";
if (root2 == "/api") {
this.ajaxUrl2 = "/api";
} else if (root2 != "/testca") {
this.ajaxUrl2 = "";
};
},
methods: {
signPic(e){
document.addEventListener("mousemove",this.signmouseMve,false);
},
removeSignPic(e){
let signPicdom=document.querySelector(".sign-img");
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
console.log(e);
console.dir(signPicdom);
console.log('scrollTop:',scrollTop)
console.dir(this.$refs.canvasDOM);
let perX=(this.getOffsetLeft(signPicdom)-this.getOffsetLeft(this.$refs.canvasDOM))/this.$refs.canvasDOM.clientWidth;
let perY=(this.getOffsetTop(signPicdom)-this.getOffsetTop(this.$refs.canvasDOM)+scrollTop+21)/this.$refs.canvasDOM.clientHeight;
let signWraphtml=document.querySelector('.sign-wrap');
signWraphtml.style.top=this.$refs.canvasDOM.clientHeight*perY+'px';
signWraphtml.style.left=this.$refs.canvasDOM.clientWidth*perX+'px';
signWraphtml.appendChild(signPicdom.firstChild);
document.removeEventListener('mousemove',this.signmouseMve,false);
console.log({perX:parseInt(perX*100)+'%',perY:parseInt(perY*100)+'%'});
return {perX:perX,perY:perY};//获取到最后的位置；反出来；
},
signmouseMve(e){
var signPicdom=document.querySelector(".sign-img");
if(!(document.querySelector('.sign-wrap').firstChild===null)){
signPicdom.appendChild(document.querySelector('.sign-wrap').firstChild);
}
var ev=e||event;
signPicdom.style.position='fixed';
signPicdom.style.top=(this.getPos(ev).y-signPicdom.clientHeight/2)+'px';
signPicdom.style.left=(this.getPos(ev).x-signPicdom.clientWidth/2)+'px';
},
getPos(ev){
let scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
let scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
return {x: ev.clientX, y: ev.clientY};
},
getOffsetLeft(obj){
var tmp = obj.offsetLeft;
var val = obj.offsetParent;
while(val != null){
tmp += val.offsetLeft;
val = val.offsetParent;
}
return tmp;
},
getOffsetTop(obj){
var tmp = obj.offsetTop;
var val = obj.offsetParent;
while(val != null){
tmp += val.offsetTop;
val = val.offsetParent;
}
return tmp;
},
downpdf(){//下载pdf
window.open(this.pdfurl);
},
renderPage(num) { //渲染pdf
let vm = this
this.pageRendering = true;
let canvas = document.getElementById('the-canvas')
// Using promise to fetch the page
this.pdfDoc.getPage(num).then(function(page) {
var viewport = page.getViewport(vm.compuscale);
//alert(vm.canvas.height)
canvas.height = viewport.height;
canvas.width = viewport.width;
// Render PDF page into canvas context
vm.isready = true
var renderContext = {
canvasContext: vm.ctx,
viewport: viewport
};
var renderTask = page.render(renderContext);
// Wait for rendering to finish
renderTask.promise.then(function() {
vm.pageRendering = false;
if (vm.pageNumPending !== null) {
// New page rendering is pending
vm.renderPage(vm.pageNumPending);
vm.pageNumPending = null;
}
});
});
vm.page_num = vm.pageNum;
},
addscale() { //放大
if (this.compuscale >= this.maxscale) {
return
}
this.compuscale += 0.1;
this.queueRenderPage(this.pageNum)
},
minus() { //缩小
if (this.compuscale <= this.minscale) {
return
}
this.compuscale -= 0.1;
this.queueRenderPage(this.pageNum)
},
prev() { //上一页
let vm = this
if (vm.pageNum <= 1) {
return;
}
vm.pageNum--;
vm.queueRenderPage(vm.pageNum);
},
next() { //下一页
let vm = this
if (vm.pageNum >= vm.page_count) {
return;
}
vm.pageNum++;
vm.queueRenderPage(vm.pageNum);
},
//跳转到指定的页
goTopage(){
var that=this;
if(Number.isNaN(that.gotopage_num/1)){
this.$message.error("请输入数字");
this.gotopage_num='';
return;
}
if(this.gotopage_num<1||this.gotopage_num>this.page_count){
this.gotopage_num='';
this.$message.error("请输入范围内的页码");
return;
};
this.pageNum=this.gotopage_num;
this.queueRenderPage(that.gotopage_num);
},
closepdf() { //关闭PDF
this.pageNum = 1;
this.pdfDoc = null;
this.isready = false
this.compuscale = this.scale
this.$emit('closepdf')
},
throwerr(err) {
this.$emit('pdferr', err);
},
queueRenderPage(num) {
var a=parseInt(num)
console.log(a);
if (this.pageRendering) {
this.pageNumPending = a;
} else {
this.renderPage(a);
}
}
},
computed: {
ctx() {
let id = document.getElementById('the-canvas')
return id.getContext('2d');
},
isshowpdf() {
if (this.value == undefined) return false
return this.value;
}
},
mounted() {
this.compuscale = this.scale;
let vm = this
var val = vm.pdfurl
if (val == '' || val == undefined) return
PDFJS.getDocument(val).then(function(pdfDoc_) { //初始化pdf
vm.pdfDoc = pdfDoc_;
vm.page_count = vm.pdfDoc.numPages
vm.renderPage(vm.pageNum);
}).catch(function(err) {
if (err) {
console.log(err)
vm.throwerr(vm.pdfurl)
}
})
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
下面的都是在凑字数。简书要求要超过100个字。前端工程师需要学的的东西太多了。多个框架。反正万变不理其中吧。最好还是坚持基础最好。真正理解原型。原型链和继承。还有学了一定要用。不让学了也没用。还是忘。学习根本原理。
作者：吴高亮
链接：https://www.jianshu.com/p/94cf6ddcb299
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
网友评论