123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103 |
- <template>
- <view>
- <view class="dashbox">
- <view class="btnList">
- <view @click="clearCanvas">清空</view>
- </view>
- <view class="handCenter">
- <canvas class="handWriting" canvas-id="handWriting" :disable-scroll="true" @touchstart="scaleStart"
- @touchmove="scaleMove" @touchend="scaleEnd" type="2d">
- </canvas>
- </view>
- </view>
- </view>
- </template>
- <script>
- export default {
- data() {
- return {
- canvasName: '#handWriting',
- ctx: '',
- canvasWidth: 0,
- canvasHeight: 0,
- startPoint: {
- x: 0,
- y: 0,
- },
- selectColor: 'black',
- lineColor: '#1A1A1A', // 颜色
- lineSize: 1.5, // 笔记倍数
- radius: 5, //画圆的半径
- }
- },
- onLoad() {
-
- },
- onShow() {
-
- },
- onReady() {
- var canvas = uni.createCanvasContext('#handWriting')
- console.log(canvas)
- this.ctx = canvas
- },
- methods: {
- scaleStart(event) {
- console.log(event,'kaishi')
- if (event.type != 'touchstart') return false;
- let currentPoint = {
- x: event.touches[0].x,
- y: event.touches[0].y
- }
- this.drawCircle(currentPoint);
- this.startPoint = currentPoint
- },
- scaleMove(e) {
- console.log(this.startPoint,e.touches[0],'开始画')
- this.drawLine({x:121,y:107},{x:208,y:127})
- },
- scaleEnd(e) {
- console.log(e,'结束画')
- },
- drawCircle(point) { //这里负责点
- let ctx = this.ctx;
- ctx.beginPath();
- ctx.setFillStyle(this.lineColor)
- //笔迹粗细由圆的大小决定
- ctx.arc(point.x, point.y, this.radius, 0, 2 * Math.PI);
- ctx.fill();
- ctx.closePath();
- },
- drawLine(sourcePoint, targetPoint) {
- let ctx = this.ctx;
- this.drawCircle(targetPoint);
- ctx.beginPath();
- //ctx.setLineWidth(this.radius * 2)//这里乘2是因为线条的粗细要和圆的直径相等
- ctx.moveTo(sourcePoint.x, sourcePoint.y);
- ctx.lineTo(targetPoint.x, targetPoint.y);
- ctx.stroke();
- ctx.closePath();
- },
- clearCanvas() { //清空画布
- let ctx = this.ctx;
- ctx.rect(0, 0, this.canvasWidth, this.canvasHeight);
- ctx.fillStyle = '#FFFFFF';
- ctx.fill();
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- .btnList {
- width: 95%;
- margin: 0 auto;
- }
- .handWriting {
- background: #f5f5f5;
- width: 690rpx;
- height: 80vh;
- margin: 0 auto
- }
- </style>
|