From 03d13d691bdb75af6834842eee398c488e8492f1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BC=A0=E7=A3=8A?= <1633537611@qq.com> Date: Fri, 3 Nov 2023 19:43:58 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9draw=E4=BB=A3=E7=A0=81?= =?UTF-8?q?=E7=88=86=E7=BA=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/API/element-draw/element-draw.uvue | 240 +++++++++++------------ 1 file changed, 120 insertions(+), 120 deletions(-) diff --git a/pages/API/element-draw/element-draw.uvue b/pages/API/element-draw/element-draw.uvue index 2c67f756..19475365 100644 --- a/pages/API/element-draw/element-draw.uvue +++ b/pages/API/element-draw/element-draw.uvue @@ -59,66 +59,66 @@ drawText() { let element = uni.getElementById('draw-text-view') let ctx = element!.getDrawableContext() - let width = element.getBoundingClientRect().width + let width = element!.getBoundingClientRect().width ctx!.reset() - ctx.font = "15px" - ctx.textAlign = "center" + 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!.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(); @@ -134,7 +134,7 @@ // 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!.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) { @@ -228,80 +228,80 @@ drawhouse() { let ctx = uni.getElementById('draw-house')!.getDrawableContext() ctx!.reset() - ctx.lineWidth = 10; + 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() 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() // 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