Skip to content

H
hello uni-app x

DCloud / hello uni-app x

通知 5992
Star 90
Fork 162
H
hello uni-app x
提交 3674f7a4 编写于 作者: 张 张磊
浏览文件
操作

更新context

上级 00cceafa
隐藏空白更改
内联 并排
Showing with 91 addition and 92 deletion
pages/component/view/view-draw.uvue
浏览文件 @ 3674f7a4
......@@ -17,7 +17,6 @@
</template>
<script>
import DrawableContext from 'io.dcloud.uniapp.runtime.DrawableContext';
var y = 160
export default {
data() {
......@@ -61,7 +60,7 @@
let width = node.getBoundingClientRect().width
ctx!!.reset()
ctx!!.font = "15px"
ctx.textAlign = "center"
ctx!.textAlign = "center"
for (var i = 0; i < this.texts.length; i++) {
let value = this.texts[i]
if (i % 2 == 0) {
......@@ -78,45 +77,45 @@
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
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;
drawDashedLine([], ctx);
drawDashedLine([2, 2], ctx);
drawDashedLine([10, 10], ctx);
drawDashedLine([20, 5], ctx);
drawDashedLine([15, 3, 3, 3], ctx);
drawDashedLine([20, 3, 3, 3, 3, 3, 3, 3], ctx);
ctx.lineDashOffset = 18;
drawDashedLine([12, 3, 3], ctx);
ctx.lineDashOffset = 0
ctx.setLineDash([0])
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<number>, ctx : DrawableContext) {
......@@ -141,12 +140,12 @@
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();
}
}
}
......@@ -168,44 +167,44 @@
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!.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 {
......@@ -230,18 +229,18 @@
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!.beginPath();
ctx!.moveTo(50, 140);
ctx!.lineTo(150, 60);
ctx!.lineTo(250, 140);
ctx!.closePath();
ctx!.stroke();
ctx!!.update()
},
drawPoint() {
......@@ -250,15 +249,15 @@
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!.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!.fillRect(180 + j * 25, i * 25, 25, 25);
}
}
ctx!!.update()
......@@ -268,16 +267,16 @@
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!.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!.fillStyle = "green";
ctx!.fill("evenodd");
ctx!!.update()
}
......@@ -287,4 +286,4 @@
<style>
</style>
\ No newline at end of file
</style>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或