|
|
@@ -1,181 +1,182 @@
|
|
|
-<!--<template>-->
|
|
|
+<template>
|
|
|
+ <el-button></el-button>
|
|
|
<!-- <canvas :width="width" :height="height" class="pointer-canvas" ref="pointerCanvas" @click="handleFocus">-->
|
|
|
<!-- </canvas>-->
|
|
|
-<!--</template>-->
|
|
|
+</template>
|
|
|
|
|
|
-<!--<script>-->
|
|
|
-<!--import { mapState } from "vuex";-->
|
|
|
-<!--import { USE_FOCUS } from "@/store/types/pdf-types";-->
|
|
|
-
|
|
|
-<!--export default {-->
|
|
|
-<!-- name: "PointerCanvas",-->
|
|
|
-<!-- props: {-->
|
|
|
-<!-- noPointer: Boolean,-->
|
|
|
-<!-- noBox: Boolean-->
|
|
|
-<!-- },-->
|
|
|
-<!-- data () {-->
|
|
|
-<!-- return {-->
|
|
|
-<!-- points: [],-->
|
|
|
-<!-- disablePointer: false,-->
|
|
|
-<!-- width: window.innerWidth,-->
|
|
|
-<!-- height: document.documentElement.clientHeight,-->
|
|
|
-<!-- rects: [],-->
|
|
|
-<!-- drawingRect: {},-->
|
|
|
-<!-- poped: [],-->
|
|
|
-<!-- // 为了突破30fps限制（应该与chrome优化机制有关），往数组中多放入冗余数字，以让动画更流畅-->
|
|
|
-<!-- overrate: 4-->
|
|
|
-<!-- };-->
|
|
|
-<!-- },-->
|
|
|
-<!-- computed: {-->
|
|
|
-<!-- pointerActive () {-->
|
|
|
-<!-- return this.width > 500 && !this.noPointer && !this.disablePointer;-->
|
|
|
-<!-- },-->
|
|
|
-<!-- ...mapState({-->
|
|
|
-<!-- currentPage: state => state.pdf.currentPage-->
|
|
|
-<!-- })-->
|
|
|
-<!-- },-->
|
|
|
-<!-- watch: {-->
|
|
|
-<!-- currentPage () {-->
|
|
|
-<!-- this.rects = [];-->
|
|
|
-<!-- this.poped = [];-->
|
|
|
-<!-- this.drawingRect = {};-->
|
|
|
-<!-- this.renderer();-->
|
|
|
-<!-- }-->
|
|
|
-<!-- },-->
|
|
|
-<!-- mounted () {-->
|
|
|
-<!-- this._canvas = this.$refs.pointerCanvas;-->
|
|
|
-<!-- this._ctx = this._canvas.getContext("2d");-->
|
|
|
-
|
|
|
-<!-- window.addEventListener("resize", this.handleResize);-->
|
|
|
-<!-- this._canvas.addEventListener("mousemove", this.handleMouseMove);-->
|
|
|
-<!-- this._canvas.addEventListener("mousedown", this.handleMouseDown);-->
|
|
|
-<!-- this._canvas.addEventListener("mouseup", this.handleMouseUp);-->
|
|
|
-<!-- this._interval = setInterval(this.shiftPoints, 1000 / 90);-->
|
|
|
-<!-- },-->
|
|
|
-<!-- unmounted () {-->
|
|
|
-<!-- clearInterval(this._interval);-->
|
|
|
-<!-- window.removeEventListener("resize", this.handleResize);-->
|
|
|
-<!-- this._canvas.removeEventListener("mousemove", this.handleMouseMove);-->
|
|
|
-<!-- this._canvas.removeEventListener("mousedown", this.handleMouseDown);-->
|
|
|
-<!-- this._canvas.removeEventListener("mouseup", this.handleMouseUp);-->
|
|
|
-<!-- },-->
|
|
|
-<!-- methods: {-->
|
|
|
-<!-- handleResize () {-->
|
|
|
-<!-- this.width = window.innerWidth;-->
|
|
|
-<!-- this.height = document.documentElement.clientHeight;-->
|
|
|
-<!-- this.renderer();-->
|
|
|
-<!-- },-->
|
|
|
-<!-- handleMouseMove (e) {-->
|
|
|
-<!-- if (this.pointerActive) {-->
|
|
|
-<!-- const { x, y } = this.points[this.points.length - 1] ?? { x: 0, y: 0 };-->
|
|
|
-<!-- if (this.points.length === 0 || Math.abs(x - e.clientX) > 8 || Math.abs(y - e.clientY) > 8) {-->
|
|
|
-<!-- [...Array(this.overrate)].forEach(_ => this.points.unshift({ x: e.clientX, y: e.clientY }));-->
|
|
|
-<!-- if (this.points.length > 100) {-->
|
|
|
-<!-- [...Array(this.overrate)].forEach(_ => this.points.pop());-->
|
|
|
-<!-- }-->
|
|
|
-<!-- }-->
|
|
|
-<!-- }-->
|
|
|
-<!-- },-->
|
|
|
-<!-- shiftPoints () {-->
|
|
|
-<!-- if (this.points.length > 34) {-->
|
|
|
-<!-- this.points.pop();-->
|
|
|
-<!-- }-->
|
|
|
-<!-- if (this.points.length > 0) {-->
|
|
|
-<!-- this.points.pop();-->
|
|
|
-<!-- requestAnimationFrame(() => {-->
|
|
|
-<!-- this.renderer();-->
|
|
|
-<!-- });-->
|
|
|
-<!-- }-->
|
|
|
-<!-- },-->
|
|
|
-<!-- handleMouseDown (e) {-->
|
|
|
-<!-- if (!this.noBox) {-->
|
|
|
-<!-- this.disablePointer = true;-->
|
|
|
-<!-- this.drawingRect.begin = { x: e.clientX, y: e.clientY };-->
|
|
|
-
|
|
|
-<!-- this._canvas.addEventListener("mousemove", this.handleBoxMouseMove);-->
|
|
|
-<!-- }-->
|
|
|
-<!-- },-->
|
|
|
-<!-- handleBoxMouseMove (e) {-->
|
|
|
-<!-- this.drawingRect.end = { x: e.clientX, y: e.clientY };-->
|
|
|
-<!-- requestAnimationFrame(() => {-->
|
|
|
-<!-- this.renderer();-->
|
|
|
-<!-- });-->
|
|
|
-<!-- },-->
|
|
|
-<!-- handleMouseUp (e) {-->
|
|
|
-<!-- if (!this.noBox) {-->
|
|
|
-<!-- if (this.drawingRect.begin && this.drawingRect.end) {-->
|
|
|
-<!-- this.rects.push(this.drawingRect);-->
|
|
|
-<!-- this.poped = [];-->
|
|
|
-<!-- }-->
|
|
|
-<!-- this._canvas.removeEventListener("mousemove", this.handleBoxMouseMove);-->
|
|
|
-<!-- this.disablePointer = false;-->
|
|
|
-<!-- this.renderer();-->
|
|
|
-<!-- this.drawingRect = {};-->
|
|
|
-<!-- }-->
|
|
|
-<!-- },-->
|
|
|
-<!-- renderer () {-->
|
|
|
-<!-- this._ctx.clearRect(0, 0, 2000, 2000);-->
|
|
|
-
|
|
|
-<!-- // 框选-->
|
|
|
-<!-- this._ctx.lineWidth = 4;-->
|
|
|
-<!-- this._ctx.lineJoin = "round";-->
|
|
|
-<!-- this._ctx.strokeStyle = "rgba(85, 136, 229, 1)";-->
|
|
|
-<!-- this._ctx.fillStyle = "rgba(85, 136, 229, .05)";-->
|
|
|
-<!-- this.rects.forEach(rect => {-->
|
|
|
-<!-- if (rect) {-->
|
|
|
-<!-- this._ctx.beginPath();-->
|
|
|
-<!-- this._ctx.rect(rect.begin.x, rect.begin.y, rect.end.x - rect.begin.x, rect.end.y - rect.begin.y);-->
|
|
|
-<!-- this._ctx.closePath();-->
|
|
|
-<!-- this._ctx.fill();-->
|
|
|
-<!-- this._ctx.stroke();-->
|
|
|
-<!-- }-->
|
|
|
-<!-- });-->
|
|
|
-<!-- if (this.drawingRect.begin && this.drawingRect.end) {-->
|
|
|
-<!-- this._ctx.beginPath();-->
|
|
|
-<!-- this._ctx.rect(-->
|
|
|
-<!-- this.drawingRect.begin.x,-->
|
|
|
-<!-- this.drawingRect.begin.y,-->
|
|
|
-<!-- this.drawingRect.end.x - this.drawingRect.begin.x,-->
|
|
|
-<!-- this.drawingRect.end.y - this.drawingRect.begin.y-->
|
|
|
-<!-- );-->
|
|
|
-<!-- this._ctx.closePath();-->
|
|
|
-<!-- this._ctx.fill();-->
|
|
|
-<!-- this._ctx.stroke();-->
|
|
|
-<!-- }-->
|
|
|
-
|
|
|
-<!-- // 线条-->
|
|
|
-<!-- this._ctx.strokeStyle = "rgba(211, 47, 47, .2)";-->
|
|
|
-<!-- this._ctx.beginPath();-->
|
|
|
-<!-- const length = this.points.length;-->
|
|
|
-<!-- this.points.forEach((point, index) => {-->
|
|
|
-<!-- if (index % this.overrate) {-->
|
|
|
-<!-- this._ctx.lineTo(point.x, point.y);-->
|
|
|
-<!-- this._ctx.lineWidth = (length - index + 4) / (2 * this.overrate);-->
|
|
|
-<!-- this._ctx.stroke();-->
|
|
|
-<!-- }-->
|
|
|
-<!-- });-->
|
|
|
-<!-- this._ctx.closePath();-->
|
|
|
-<!-- },-->
|
|
|
-<!-- handleFocus () {-->
|
|
|
-<!-- this.$store.commit(USE_FOCUS);-->
|
|
|
-<!-- },-->
|
|
|
-<!-- cleanCanvas () {-->
|
|
|
-<!-- this.rects = [];-->
|
|
|
-<!-- this.renderer();-->
|
|
|
-<!-- },-->
|
|
|
-<!-- undo () {-->
|
|
|
-<!-- const rect = this.rects.pop();-->
|
|
|
-<!-- rect && this.poped.push(rect);-->
|
|
|
-<!-- rect && this.renderer();-->
|
|
|
-<!-- },-->
|
|
|
-<!-- redo () {-->
|
|
|
-<!-- const rect = this.poped.pop();-->
|
|
|
-<!-- rect && this.rects.push(rect);-->
|
|
|
-<!-- rect && this.renderer();-->
|
|
|
-<!-- }-->
|
|
|
-<!-- }-->
|
|
|
-<!--};-->
|
|
|
-<!--</script>-->
|
|
|
+<script>
|
|
|
+// import { mapState } from "vuex";
|
|
|
+// import { USE_FOCUS } from "@/store/types/pdf-types";
|
|
|
+//
|
|
|
+// export default {
|
|
|
+// name: "PointerCanvas",
|
|
|
+// props: {
|
|
|
+// noPointer: Boolean,
|
|
|
+// noBox: Boolean
|
|
|
+// },
|
|
|
+// data () {
|
|
|
+// return {
|
|
|
+// points: [],
|
|
|
+// disablePointer: false,
|
|
|
+// width: window.innerWidth,
|
|
|
+// height: document.documentElement.clientHeight,
|
|
|
+// rects: [],
|
|
|
+// drawingRect: {},
|
|
|
+// poped: [],
|
|
|
+// // 为了突破30fps限制（应该与chrome优化机制有关），往数组中多放入冗余数字，以让动画更流畅
|
|
|
+// overrate: 4
|
|
|
+// };
|
|
|
+// },
|
|
|
+// computed: {
|
|
|
+// pointerActive () {
|
|
|
+// return this.width > 500 && !this.noPointer && !this.disablePointer;
|
|
|
+// },
|
|
|
+// ...mapState({
|
|
|
+// currentPage: state => state.pdf.currentPage
|
|
|
+// })
|
|
|
+// },
|
|
|
+// watch: {
|
|
|
+// currentPage () {
|
|
|
+// this.rects = [];
|
|
|
+// this.poped = [];
|
|
|
+// this.drawingRect = {};
|
|
|
+// this.renderer();
|
|
|
+// }
|
|
|
+// },
|
|
|
+// mounted () {
|
|
|
+// this._canvas = this.$refs.pointerCanvas;
|
|
|
+// this._ctx = this._canvas.getContext("2d");
|
|
|
+//
|
|
|
+// window.addEventListener("resize", this.handleResize);
|
|
|
+// this._canvas.addEventListener("mousemove", this.handleMouseMove);
|
|
|
+// this._canvas.addEventListener("mousedown", this.handleMouseDown);
|
|
|
+// this._canvas.addEventListener("mouseup", this.handleMouseUp);
|
|
|
+// this._interval = setInterval(this.shiftPoints, 1000 / 90);
|
|
|
+// },
|
|
|
+// unmounted () {
|
|
|
+// clearInterval(this._interval);
|
|
|
+// window.removeEventListener("resize", this.handleResize);
|
|
|
+// this._canvas.removeEventListener("mousemove", this.handleMouseMove);
|
|
|
+// this._canvas.removeEventListener("mousedown", this.handleMouseDown);
|
|
|
+// this._canvas.removeEventListener("mouseup", this.handleMouseUp);
|
|
|
+// },
|
|
|
+// methods: {
|
|
|
+// handleResize () {
|
|
|
+// this.width = window.innerWidth;
|
|
|
+// this.height = document.documentElement.clientHeight;
|
|
|
+// this.renderer();
|
|
|
+// },
|
|
|
+// handleMouseMove (e) {
|
|
|
+// if (this.pointerActive) {
|
|
|
+// const { x, y } = this.points[this.points.length - 1] ?? { x: 0, y: 0 };
|
|
|
+// if (this.points.length === 0 || Math.abs(x - e.clientX) > 8 || Math.abs(y - e.clientY) > 8) {
|
|
|
+// [...Array(this.overrate)].forEach(_ => this.points.unshift({ x: e.clientX, y: e.clientY }));
|
|
|
+// if (this.points.length > 100) {
|
|
|
+// [...Array(this.overrate)].forEach(_ => this.points.pop());
|
|
|
+// }
|
|
|
+// }
|
|
|
+// }
|
|
|
+// },
|
|
|
+// shiftPoints () {
|
|
|
+// if (this.points.length > 34) {
|
|
|
+// this.points.pop();
|
|
|
+// }
|
|
|
+// if (this.points.length > 0) {
|
|
|
+// this.points.pop();
|
|
|
+// requestAnimationFrame(() => {
|
|
|
+// this.renderer();
|
|
|
+// });
|
|
|
+// }
|
|
|
+// },
|
|
|
+// handleMouseDown (e) {
|
|
|
+// if (!this.noBox) {
|
|
|
+// this.disablePointer = true;
|
|
|
+// this.drawingRect.begin = { x: e.clientX, y: e.clientY };
|
|
|
+//
|
|
|
+// this._canvas.addEventListener("mousemove", this.handleBoxMouseMove);
|
|
|
+// }
|
|
|
+// },
|
|
|
+// handleBoxMouseMove (e) {
|
|
|
+// this.drawingRect.end = { x: e.clientX, y: e.clientY };
|
|
|
+// requestAnimationFrame(() => {
|
|
|
+// this.renderer();
|
|
|
+// });
|
|
|
+// },
|
|
|
+// handleMouseUp (e) {
|
|
|
+// if (!this.noBox) {
|
|
|
+// if (this.drawingRect.begin && this.drawingRect.end) {
|
|
|
+// this.rects.push(this.drawingRect);
|
|
|
+// this.poped = [];
|
|
|
+// }
|
|
|
+// this._canvas.removeEventListener("mousemove", this.handleBoxMouseMove);
|
|
|
+// this.disablePointer = false;
|
|
|
+// this.renderer();
|
|
|
+// this.drawingRect = {};
|
|
|
+// }
|
|
|
+// },
|
|
|
+// renderer () {
|
|
|
+// this._ctx.clearRect(0, 0, 2000, 2000);
|
|
|
+//
|
|
|
+// // 框选
|
|
|
+// this._ctx.lineWidth = 4;
|
|
|
+// this._ctx.lineJoin = "round";
|
|
|
+// this._ctx.strokeStyle = "rgba(85, 136, 229, 1)";
|
|
|
+// this._ctx.fillStyle = "rgba(85, 136, 229, .05)";
|
|
|
+// this.rects.forEach(rect => {
|
|
|
+// if (rect) {
|
|
|
+// this._ctx.beginPath();
|
|
|
+// this._ctx.rect(rect.begin.x, rect.begin.y, rect.end.x - rect.begin.x, rect.end.y - rect.begin.y);
|
|
|
+// this._ctx.closePath();
|
|
|
+// this._ctx.fill();
|
|
|
+// this._ctx.stroke();
|
|
|
+// }
|
|
|
+// });
|
|
|
+// if (this.drawingRect.begin && this.drawingRect.end) {
|
|
|
+// this._ctx.beginPath();
|
|
|
+// this._ctx.rect(
|
|
|
+// this.drawingRect.begin.x,
|
|
|
+// this.drawingRect.begin.y,
|
|
|
+// this.drawingRect.end.x - this.drawingRect.begin.x,
|
|
|
+// this.drawingRect.end.y - this.drawingRect.begin.y
|
|
|
+// );
|
|
|
+// this._ctx.closePath();
|
|
|
+// this._ctx.fill();
|
|
|
+// this._ctx.stroke();
|
|
|
+// }
|
|
|
+//
|
|
|
+// // 线条
|
|
|
+// this._ctx.strokeStyle = "rgba(211, 47, 47, .2)";
|
|
|
+// this._ctx.beginPath();
|
|
|
+// const length = this.points.length;
|
|
|
+// this.points.forEach((point, index) => {
|
|
|
+// if (index % this.overrate) {
|
|
|
+// this._ctx.lineTo(point.x, point.y);
|
|
|
+// this._ctx.lineWidth = (length - index + 4) / (2 * this.overrate);
|
|
|
+// this._ctx.stroke();
|
|
|
+// }
|
|
|
+// });
|
|
|
+// this._ctx.closePath();
|
|
|
+// },
|
|
|
+// handleFocus () {
|
|
|
+// this.$store.commit(USE_FOCUS);
|
|
|
+// },
|
|
|
+// cleanCanvas () {
|
|
|
+// this.rects = [];
|
|
|
+// this.renderer();
|
|
|
+// },
|
|
|
+// undo () {
|
|
|
+// const rect = this.rects.pop();
|
|
|
+// rect && this.poped.push(rect);
|
|
|
+// rect && this.renderer();
|
|
|
+// },
|
|
|
+// redo () {
|
|
|
+// const rect = this.poped.pop();
|
|
|
+// rect && this.rects.push(rect);
|
|
|
+// rect && this.renderer();
|
|
|
+// }
|
|
|
+// }
|
|
|
+// };
|
|
|
+</script>
|
|
|
|
|
|
<!--<style lang="scss" scoped>-->
|
|
|
|
chillqi