Skip to content

Commit

Permalink
骑缝章移动
Browse files Browse the repository at this point in the history
  • Loading branch information
@Eziobro
Eziobro committed Feb 17, 2020
1 parent 734ca18 commit 92552b4
Show file tree
Hide file tree
Showing 7 changed files with 293 additions and 56 deletions.
5 changes: 5 additions & 0 deletions src/pdf-viewer/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,11 @@
overflow-y: auto;
}

/* 页面样式 */
.renderPage {
box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.5);
}

.pageCanvas {
position: absolute;
}
Expand Down
43 changes: 24 additions & 19 deletions src/pdf-viewer/pageCanvas.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,8 @@ export default class PageCanvas extends Component {
super(props)
const { pageProxy, scale } = props
const { docId, pageIndex, numPages } = pageProxy
const { width, height } = pageProxy.getViewport({ scale })
const ratio = window.devicePixelRatio
const { width, height } = pageProxy.getViewport({ scale: scale * ratio })
const top = (height + ENUM.marginTop) * pageIndex
const left = (document.documentElement.clientWidth - width) / 2
this.state = {
Expand All @@ -22,7 +23,8 @@ export default class PageCanvas extends Component {
left,
width,
height,
pageTotal: numPages
pageTotal: numPages,
ratio
}
this.prePageCanvas = null
this.canvasRef = React.createRef()
Expand All @@ -32,12 +34,12 @@ export default class PageCanvas extends Component {
componentDidMount () {
const { scrollTop } = this.props
const { clientWidth, clientHeight } = document.documentElement
const { top: offsetTop, height } = this.state
const { top: offsetTop, height, ratio } = this.state
if (offsetTop > scrollTop - height && offsetTop < scrollTop + clientHeight + height) {
const canvas = this.canvasRef.current
const context = canvas.getContext('2d')
const { pageProxy, scale } = this.props
const viewport = pageProxy.getViewport({ scale })
const viewport = pageProxy.getViewport({ scale: scale * ratio })
canvas.width = viewport.width
canvas.height = viewport.height
const renderContext = {
Expand All @@ -64,10 +66,12 @@ export default class PageCanvas extends Component {

componentDidUpdate (prevProps, prevState, snapshot) {
if (!this.prePageCanvas) {
this.prePageCanvas = null
const ratio = window.devicePixelRatio
const canvas = this.canvasRef.current
const context = canvas.getContext('2d')
const { pageProxy, scale } = this.props
const viewport = pageProxy.getViewport({ scale })
const viewport = pageProxy.getViewport({ scale: scale * ratio })
canvas.width = viewport.width
canvas.height = viewport.height
const renderContext = {
Expand All @@ -91,20 +95,21 @@ export default class PageCanvas extends Component {
position: 'absolute',
}
return (
<div ref={this.renderPageRef} style={renderPageStyle}>
<div style={{ display: this.prePageCanvas ? 'inherit' : 'none' }}>
<canvas className='pageCanvas' ref={this.canvasRef}/>
{
this.props.interiors.map((interior, index) => {
return <this.props.interiorRender key={createKey(docId, index)} arg={interior} docId={docId}
pageNum={pageNum}
pageTotal={pageTotal}/>
})
}
</div>
<div className='loadingStyle'
style={{ display: this.prePageCanvas ? 'none' : 'inherit' }}>加载中............
</div>
<div ref={this.renderPageRef} style={renderPageStyle} className='renderPage'>
<canvas className='pageCanvas' ref={this.canvasRef}/>
{
this.prePageCanvas ?
this.props.interiors.map((interior, index) => {
return <this.props.interiorRender
key={createKey(docId, index)}
arg={interior}
docId={docId} pageNum={pageNum} pageTotal={pageTotal}
docWidth={width} docHeight={height}
/>
})
: <div className='loadingStyle'>加载中............
</div>
}
</div>
)
}
Expand Down
105 changes: 75 additions & 30 deletions src/pdf-viewer/pagingSeal.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { Component } from 'react'
import { getPixelRatio } from './utils'
import { DIRECTION, getPixelRatio } from './utils'
import './index.css'

import avatar from '../static/avatar.jpg'
Expand All @@ -8,34 +8,97 @@ export default class PagingSeal extends Component {
constructor (props) {
super(props)
this.canvasRef = React.createRef()
this.pagingSealRef = React.createRef()
let position = {}
switch (props.sealData.direction) {
case 'RIGHT':
position.right = 0
case DIRECTION.RIGHT:
position.left = props.pdfData.docWidth - props.sealData.width
position.top = props.sealData.offset
break
case 'LEFT':
case DIRECTION.LEFT:
position.left = 0
position.top = props.sealData.offset
break
case 'TOP':
case DIRECTION.TOP:
position.left = props.sealData.offset
position.top = 0
break
case 'BOTTOM':
position.bottom = 0
case DIRECTION.BOTTOM:
position.left = props.sealData.offset
position.top = props.pdfData.docHeight - props.sealData.height
break
}
this.state = {
position
}
}

componentDidMount () {
this.drawImage()
this.pagingSealRef.current.addEventListener('mousedown', this.onMouseStart, { passive: false })
}

onMouseStart = (e) => {
e.preventDefault()
e.stopPropagation()
const { sealData: { setOffset, height, width, direction }, pdfData: { docHeight, docWidth } } = this.props
const pagingSealRef = this.pagingSealRef.current
const startSealX = parseFloat(pagingSealRef.style.left)
const startSealY = parseFloat(pagingSealRef.style.top)
const startMouseX = e.pageX
const startMouseY = e.pageY

const onMouseMove = (e) => {
e.preventDefault()
const moveMouseX = e.pageX
const moveMouseY = e.pageY
let moveSealY = startSealY + moveMouseY - startMouseY
let moveSealX = startSealX + moveMouseX - startMouseX
if (direction === DIRECTION.RIGHT || direction === DIRECTION.LEFT) {
if (moveSealY < 0) moveSealY = 0
if (moveSealY > docHeight - height) moveSealY = docHeight - height
pagingSealRef.style.top = moveSealY + 'px'
} else if (direction === DIRECTION.TOP || direction === DIRECTION.BOTTOM) {
if (moveSealX < 0) moveSealX = 0
if (moveSealX > docWidth - width) moveSealX = docWidth - width
pagingSealRef.style.left = moveSealX + 'px'
}
}

const onMouseEnd = (e) => {
const { left, top } = pagingSealRef.style
const endSealX = parseFloat(left)
const endSealY = parseFloat(top)
const offset = endSealX - startSealX || endSealY - startSealY
this.setState({
position: {
top: endSealY,
left: endSealX
}
})
if (offset === 0) {
this.props.onChangePagingSealStatus(false)
} else {
this.props.onUpdateSeal(Object.assign(this.props.sealData, { offset }))
}
window.removeEventListener('mousemove', onMouseMove)
window.removeEventListener('mouseup', onMouseEnd)
}

window.addEventListener('mousemove', onMouseMove)
window.addEventListener('mouseup', onMouseEnd)
}

// shouldComponentUpdate (nextProps, nextState, nextContext) {
// return false
// }

drawImage = () => {
const { sealData, docId, pageNum, pageTotal } = this.props
const { offset, width: sealDataWidth, height: sealDataHeight } = sealData
const cutWidth = sealData.width / pageTotal
const canvasRef = this.canvasRef.current

// canvasRef.addEventListener('click', this.onClickCanvas, { passive: false });

const ctx = canvasRef.getContext('2d')

/**
Expand All @@ -57,31 +120,12 @@ export default class PagingSeal extends Component {
*/
ctx.drawImage(
img,
cutWidth * (pageTotal - pageNum - 1),
0,
offset,
sealDataWidth,
sealDataHeight
)
}

/**
* 对多余显示的骑缝章进行裁剪
*/
ctx.rect(
cutWidth * (pageTotal - 1),
0,
sealData.width,
canvasRef.height
)
ctx.clip()
}

componentDidMount () {
this.drawImage()
}

shouldComponentUpdate (nextProps, nextState, nextContext) {
console.log(this.props)
}

render () {
Expand All @@ -92,7 +136,8 @@ export default class PagingSeal extends Component {
...position
}
return (
<div className='pagingSeal' style={sealStyle}>
<div ref={this.pagingSealRef} className='pagingSeal' style={sealStyle}
>
<canvas ref={this.canvasRef} width={width} height={height}></canvas>
</div>
)
Expand Down
45 changes: 39 additions & 6 deletions src/pdf-viewer/pdfViewer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import PageCanvas from './pageCanvas'
import { debounce, ENUM } from './utils'

import { SealFactory, sealType } from './seal'
import ShowPagingSeal from './showPagingSeal'
import PagingSeal from './pagingSeal'

import './index.css'
Expand All @@ -27,17 +28,15 @@ export default class PDFViewer extends Component {
},
scrollTop: 0,
interiorsArg: [],
isEditPagingSeal: true
}
}

componentDidMount () {
this.init()
window.addEventListener('resize', this.onResizeChange)
this.pageRenderRef.current.scrollTop = 0
const PagingSeal = SealFactory.createSeal(sealType.PAGING_SEAL)
this.setState({
interiorsArg: [PagingSeal]
})
this.onAppendSeal(sealType.PAGING_SEAL)
}

componentWillUnmount () {
Expand Down Expand Up @@ -89,10 +88,44 @@ export default class PDFViewer extends Component {
}

interiorRender = (params) => {
const { arg: sealData, docId, pageNum, pageTotal } = params
return <PagingSeal sealData={sealData} docId={docId} pageNum={pageNum} pageTotal={pageTotal}/>
const { isEditPagingSeal } = this.state
const { arg: sealData, docId, pageNum, pageTotal, docWidth, docHeight } = params
return isEditPagingSeal ?
<PagingSeal sealData={sealData} docId={docId} pageNum={pageNum} pageTotal={pageTotal}
pdfData={{ docWidth, docHeight }}
onChangePagingSealStatus={this.onChangePagingSealStatus}
onUpdateSeal={this.onUpdateSeal}/> :
<ShowPagingSeal sealData={sealData} docId={docId} pageNum={pageNum} pageTotal={pageTotal}
pdfData={{ docWidth, docHeight }}
onChangePagingSealStatus={this.onChangePagingSealStatus}
onUpdateSeal={this.onUpdateSeal}/>
}

// =================外部可操作函数 START================
onChangePagingSealStatus = (status) => {
this.setState({
isEditPagingSeal: status
})
}

onAppendSeal = (type) => {
const PagingSeal = SealFactory.createSeal(type)
this.setState({
interiorsArg: [...this.state.interiorsArg, PagingSeal]
})
}

onUpdateSeal = (newSeal) => {
const { interiorsArg } = this.state
let seals = interiorsArg.filter(seal => seal.id !== newSeal.id)
seals.push(newSeal)
this.setState({
interiorsArg: seals
})
}

// =================外部可操作函数 END==================

render () {
const { pages, scale, documentSize, scrollTop, interiorsArg } = this.state
return (
Expand Down
1 change: 1 addition & 0 deletions src/pdf-viewer/seal.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
class PagingSeal {
constructor () {
this.id = Number(Math.random().toString().substr(3, 9) + Date.now()).toString(36)
this.type = sealType.PAGING_SEAL
this.width = 150
this.height = 150
Expand Down
Loading

0 comments on commit 92552b4

Please sign in to comment.