From 1891bb5bca97c0ba1e4a76473bf8b354ee695d52 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BC=A0=E7=A3=8A?= <1633537611@qq.com> Date: Tue, 17 Oct 2023 20:38:51 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B8=85=E7=90=86draw=E9=A1=B5=E9=9D=A2?= =?UTF-8?q?=E7=BC=96=E8=AF=91=E8=AD=A6=E5=91=8A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/API/element-draw/element-draw.uvue | 252 +++++++++++------------ 1 file changed, 126 insertions(+), 126 deletions(-) diff --git a/pages/API/element-draw/element-draw.uvue b/pages/API/element-draw/element-draw.uvue index 1b8be329..2c67f756 100644 --- a/pages/API/element-draw/element-draw.uvue +++ b/pages/API/element-draw/element-draw.uvue @@ -60,65 +60,65 @@ let element = uni.getElementById('draw-text-view') let ctx = element!.getDrawableContext() let width = element.getBoundingClientRect().width - ctx!!.reset() - ctx!!.font = "15px" - ctx!.textAlign = "center" + ctx!.reset() + ctx.font = "15px" + ctx.textAlign = "center" for (var i = 0; i < this.texts.length; i++) { let value = this.texts[i] if (i % 2 == 0) { - ctx!!.fillText(value, width / 2, (20 * (i + 1))) + ctx.fillText(value, width / 2, (20 * (i + 1))) } else { - ctx!!.strokeText(value, width / 2, (20 * (i + 1))) + ctx.strokeText(value, width / 2, (20 * (i + 1))) } } - ctx!!.update() + ctx.update() }, drawLines() { let ctx = uni.getElementById('draw-line-view')!.getDrawableContext() - ctx!!.reset() - ctx!!.lineWidth = 10; + ctx!.reset() + ctx.lineWidth = 10; ["round", "bevel", "miter"].forEach((join, i) => { - ctx!.lineJoin = join; - ctx!.beginPath(); - ctx!.moveTo(5, 10 + i * 40); - ctx!.lineTo(50, 50 + i * 40); - ctx!.lineTo(90, 10 + i * 40); - ctx!.lineTo(130, 50 + i * 40); - ctx!.lineTo(170, 10 + i * 40); - ctx!.stroke(); + ctx.lineJoin = join; + ctx.beginPath(); + ctx.moveTo(5, 10 + i * 40); + ctx.lineTo(50, 50 + i * 40); + ctx.lineTo(90, 10 + i * 40); + ctx.lineTo(130, 50 + i * 40); + ctx.lineTo(170, 10 + i * 40); + ctx.stroke(); }); - ctx!!.lineWidth = 1 + ctx.lineWidth = 1 var space = 170 - ctx!.strokeStyle = '#09f'; - ctx!.beginPath(); - ctx!.moveTo(10 + space, 10); - ctx!.lineTo(140 + space, 10); - ctx!.moveTo(10 + space, 140); - ctx!.lineTo(140 + space, 140); - ctx!.stroke(); + ctx.strokeStyle = '#09f'; + ctx.beginPath(); + ctx.moveTo(10 + space, 10); + ctx.lineTo(140 + space, 10); + ctx.moveTo(10 + space, 140); + ctx.lineTo(140 + space, 140); + ctx.stroke(); // Draw lines - ctx!.strokeStyle = 'black'; + ctx.strokeStyle = 'black'; ['butt', 'round', 'square'].forEach((lineCap, i) => { - ctx!.lineWidth = 15; - ctx!.lineCap = lineCap; - ctx!.beginPath(); - ctx!.moveTo(25 + space + i * 50, 10); - ctx!.lineTo(25 + space + i * 50, 140); - ctx!.stroke(); + ctx.lineWidth = 15; + ctx.lineCap = lineCap; + ctx.beginPath(); + ctx.moveTo(25 + space + i * 50, 10); + ctx.lineTo(25 + space + i * 50, 140); + ctx.stroke(); }); - ctx!.lineWidth = 1; - this.drawDashedLine([], ctx!); - this.drawDashedLine([2, 2], ctx!); - this.drawDashedLine([10, 10], ctx!); - this.drawDashedLine([20, 5], ctx!); - this.drawDashedLine([15, 3, 3, 3], ctx!); - this.drawDashedLine([20, 3, 3, 3, 3, 3, 3, 3], ctx!); - ctx!.lineDashOffset = 18; - this.drawDashedLine([12, 3, 3], ctx!); - ctx!.lineDashOffset = 0 - ctx!.setLineDash([0]) - ctx!!.update() + ctx.lineWidth = 1; + this.drawDashedLine([], ctx); + this.drawDashedLine([2, 2], ctx); + this.drawDashedLine([10, 10], ctx); + this.drawDashedLine([20, 5], ctx); + this.drawDashedLine([15, 3, 3, 3], ctx); + this.drawDashedLine([20, 3, 3, 3, 3, 3, 3, 3], ctx); + ctx.lineDashOffset = 18; + this.drawDashedLine([12, 3, 3], ctx); + ctx.lineDashOffset = 0 + ctx.setLineDash([0]) + ctx.update() }, drawDashedLine(pattern : Array, ctx : DrawableContext) { ctx.beginPath(); @@ -130,11 +130,11 @@ }, drawCircles() { let ctx = uni.getElementById('draw-circle-view')!.getDrawableContext() - ctx!!.reset() + ctx!.reset() // Draw shapes for (var i = 0; i < 4; i++) { for (var j = 0; j < 3; j++) { - ctx!!.beginPath(); + ctx.beginPath(); var x = 25 + j * 50; // x coordinate var y = 25 + i * 50; // y coordinate var radius = 20; // Arc radius @@ -142,22 +142,22 @@ var endAngle = Math.PI + (Math.PI * j) / 2; // End point on circle var clockwise = i % 2 == 0 ? false : true; // clockwise or anticlockwise - ctx!.arc(x, y, radius, startAngle, endAngle, clockwise); + ctx.arc(x, y, radius, startAngle, endAngle, clockwise); if (i > 1) { - ctx!.fill(); + ctx.fill(); } else { - ctx!.stroke(); + ctx.stroke(); } } } - ctx!!.update() + ctx.update() }, drawStar() { let ctx = uni.getElementById('draw-dash-line')!.getDrawableContext() - ctx!!.reset() - ctx!!.beginPath(); + ctx!.reset() + ctx.beginPath(); var horn = 5; // 画5个角 var angle = 360 / horn; // 五个角的度数 // 两个圆的半径 @@ -169,45 +169,45 @@ for (var i = 0; i < horn; i++) { // 角度转弧度：角度/180*Math.PI // 外圆顶点坐标 - ctx!.lineTo(Math.cos((18 + i * angle) / 180.0 * Math.PI) * R + x, -Math.sin((18 + i * angle) / 180.0 * Math.PI) * R + y); + ctx.lineTo(Math.cos((18 + i * angle) / 180.0 * Math.PI) * R + x, -Math.sin((18 + i * angle) / 180.0 * Math.PI) * R + y); // 內圆顶点坐标 - ctx!.lineTo(Math.cos((54 + i * angle) / 180.0 * Math.PI) * r + x, -Math.sin((54 + i * angle) / 180.0 * Math.PI) * r + y); + ctx.lineTo(Math.cos((54 + i * angle) / 180.0 * Math.PI) * r + x, -Math.sin((54 + i * angle) / 180.0 * Math.PI) * r + y); } // closePath：关闭路径，将路径的终点与起点相连 - ctx!.closePath(); - ctx!.lineWidth = 3; - ctx!.fillStyle = '#E4EF00'; - ctx!.strokeStyle = "red"; - ctx!.fill(); - ctx!.stroke(); + ctx.closePath(); + ctx.lineWidth = 3; + ctx.fillStyle = '#E4EF00'; + ctx.strokeStyle = "red"; + ctx.fill(); + ctx.stroke(); - ctx!.lineWidth = 10; - ctx!.beginPath() - ctx!.moveTo(170, 100) - ctx!.lineTo(255, 15) - ctx!.lineTo(340, 100) - ctx!.closePath() - ctx!.fill() - ctx!.strokeStyle = "blue" - ctx!.stroke() - ctx!.beginPath() - ctx!.moveTo(170, 145) - ctx!.lineTo(255, 45) - ctx!.lineTo(340, 145) - ctx!.closePath() - ctx!.fill() - ctx!.strokeStyle = "gray" - ctx!.stroke() + ctx.lineWidth = 10; + ctx.beginPath() + ctx.moveTo(170, 100) + ctx.lineTo(255, 15) + ctx.lineTo(340, 100) + ctx.closePath() + ctx.fill() + ctx.strokeStyle = "blue" + ctx.stroke() + ctx.beginPath() + ctx.moveTo(170, 145) + ctx.lineTo(255, 45) + ctx.lineTo(340, 145) + ctx.closePath() + ctx.fill() + ctx.strokeStyle = "gray" + ctx.stroke() // 未设置beginPath，导致上下表现一致，与前端一致 - ctx!.moveTo(170, 190) - ctx!.lineTo(255, 90) - ctx!.lineTo(340, 190) - ctx!.closePath() - ctx!.fillStyle = "orange" - ctx!.fill() - ctx!.strokeStyle = "khaki" - ctx!.stroke() - ctx!!.update() + ctx.moveTo(170, 190) + ctx.lineTo(255, 90) + ctx.lineTo(340, 190) + ctx.closePath() + ctx.fillStyle = "orange" + ctx.fill() + ctx.strokeStyle = "khaki" + ctx.stroke() + ctx.update() }, hex(num : number) : string { if (num == 0) { @@ -227,81 +227,81 @@ }, drawhouse() { let ctx = uni.getElementById('draw-house')!.getDrawableContext() - ctx!!.reset() - ctx!!.lineWidth = 10; + ctx!.reset() + ctx.lineWidth = 10; // Wall - ctx!.strokeRect(75, 140, 150, 110); + ctx.strokeRect(75, 140, 150, 110); // Door - ctx!.fillRect(130, 190, 40, 60); + ctx.fillRect(130, 190, 40, 60); // Roof - ctx!.beginPath(); - ctx!.moveTo(50, 140); - ctx!.lineTo(150, 60); - ctx!.lineTo(250, 140); - ctx!.closePath(); - ctx!.stroke(); - ctx!!.update() + ctx.beginPath(); + ctx.moveTo(50, 140); + ctx.lineTo(150, 60); + ctx.lineTo(250, 140); + ctx.closePath(); + ctx.stroke(); + ctx.update() }, drawPoint() { let ctx = uni.getElementById('draw-style')!.getDrawableContext() - ctx!!.reset() + ctx!.reset() for (let i = 0; i < 6; i++) { for (let j = 0; j < 6; j++) { - ctx!!.strokeStyle = `rgb(0,${Math.floor(255 - 42.5 * i)},${Math.floor(255 - 42.5 * j)})`; - ctx!.beginPath(); - ctx!.arc(12.5 + j * 25, 12.5 + i * 25, 10, 0, Math.PI * 2, true); - ctx!.stroke(); + ctx.strokeStyle = `rgb(0,${Math.floor(255 - 42.5 * i)},${Math.floor(255 - 42.5 * j)})`; + ctx.beginPath(); + ctx.arc(12.5 + j * 25, 12.5 + i * 25, 10, 0, Math.PI * 2, true); + ctx.stroke(); } } for (let i = 0; i < 6; i++) { for (let j = 0; j < 6; j++) { - ctx!!.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)},${Math.floor(255 - 42.5 * j)},0)`; - ctx!.fillRect(180 + j * 25, i * 25, 25, 25); + ctx.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)},${Math.floor(255 - 42.5 * j)},0)`; + ctx.fillRect(180 + j * 25, i * 25, 25, 25); } } - ctx!!.update() + ctx.update() }, drawRect() { let ctx = uni.getElementById('draw-odd')!.getDrawableContext() - ctx!!.reset() + ctx!.reset() // Create path - ctx!!.moveTo(30, 90); - ctx!.lineTo(110, 20); - ctx!.lineTo(240, 130); - ctx!.lineTo(60, 130); - ctx!.lineTo(190, 20); - ctx!.lineTo(270, 90); - ctx!.closePath(); + ctx.moveTo(30, 90); + ctx.lineTo(110, 20); + ctx.lineTo(240, 130); + ctx.lineTo(60, 130); + ctx.lineTo(190, 20); + ctx.lineTo(270, 90); + ctx.closePath(); // Fill path - ctx!.fillStyle = "green"; - ctx!.fill("evenodd"); - ctx!!.update() + ctx.fillStyle = "green"; + ctx.fill("evenodd"); + ctx.update() }, drawArcTo() { let ctx = uni.getElementById('draw-arcto')!.getDrawableContext() ctx!.reset() - ctx!.beginPath(); - ctx!.moveTo(50, 20); - ctx!.bezierCurveTo(230, 30, 150, 60, 50, 100); - ctx!.stroke(); + ctx.beginPath(); + ctx.moveTo(50, 20); + ctx.bezierCurveTo(230, 30, 150, 60, 50, 100); + ctx.stroke(); - ctx!.fillStyle = "blue"; + ctx.fillStyle = "blue"; // start point - ctx!.fillRect(50, 20, 10, 10); + ctx.fillRect(50, 20, 10, 10); // end point - ctx!.fillRect(50, 100, 10, 10); + ctx.fillRect(50, 100, 10, 10); - ctx!.fillStyle = "red"; + ctx.fillStyle = "red"; // control point one - ctx!.fillRect(230, 30, 10, 10); + ctx.fillRect(230, 30, 10, 10); // control point two - ctx!.fillRect(150, 70, 10, 10); - ctx!.update() + ctx.fillRect(150, 70, 10, 10); + ctx.update() } } } -- GitLab