javascript - HTML5 画布线变成曲折线?
问题描述
我在两点之间有一条线。这条线可以是任何角度。
前任
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
const from = {x:50, y:50};
const to = {x: 100, y: 125};
ctx.beginPath();
ctx.moveTo(from.x, from.y);
ctx.lineTo(to.x, to.y);
ctx.stroke()
<canvas id="myCanvas"></canvas>
我怎样才能把它变成一个之字形线?
编辑 所以我在制作小型篮球教练应用程序。您应该能够在哪里画线以显示应该如何进行练习。您画一条直线,然后您可以使用菜单按钮将该线更改为虚线和/或锯齿形。
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
}
class Line {
constructor(fromPoint = null, toPoint = null) {
this.from = fromPoint;
this.to = toPoint;
this.dashed = false;
this.zigZagged = false;
}
setFrom(point) { this.from = point;}
setTo(point) { this.to = toPoint;}
getFrom() { return this.from; }
getTo() { return this.to}
draw(ctx, color = '#000', lineWidth = 2.0) {
ctx.beginPath();
if (this.dashed) {
ctx.setLineDash([5, 10]);
} else {
ctx.setLineDash([]);
}
//Starting point of the line
ctx.moveTo(this.from.x, this.from.y);
if (this.zigZagged) {
// Need help with this function
this.drawZigZagged();
} else {
ctx.lineTo(this.to.x, this.to.y);
}
ctx.lineWidth = lineWidth;
ctx.strokeStyle = color;
ctx.stroke();
}
drawZigZagged(ctx) {
// PLEASE help creating this function
// .. help
// .. use this.from and this.to to create a zig zag line
// .. maybe something like 20px for each individual zig zag line
// .. I guess the function have to calculate the angle the
// .. current line have (this.from - this.to)
// .. to be able to create a zig zag line instead of a straight line
}
setDashed(enable) {
this.dashed = enable;
}
setZigZagged(enable){
this.zigZagged = enable
}
}
所以请帮我创建 drawZigZagged(ctx) {...} 函数
解决方案
所以我设法做到了。所以这是我制作一条锯齿形线的代码。请参阅 prepareZigZag 和 drawZigZag。我已经评论了,所以应该很容易理解发生了什么。希望它可以帮助某人。请评论改进。
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
}
class Line {
constructor(fromPoint = null, toPoint = null, zigZagged = false) {
this.from = fromPoint;
this.to = toPoint;
this.dashed = false;
this.zigZagged = zigZagged;
this.prepareZigZag();
}
setFrom(point) { this.from = point;}
setTo(point) { this.to = toPoint;}
getFrom() { return this.from; }
getTo() { return this.to}
prepareZigZag() {
// Get the radian angle of the line
this.lineRadians = Math.atan2(this.to.y - this.from.y, this.to.x - this.from.x);
// Get the length of the line
const a = this.from.x - this.to.x;
const b = this.from.y - this.to.y;
this.lineLength = Math.sqrt( a * a + b * b );
// 10 pixels between each zig zag "wave"
this.zigzagSpacing = 10;
// Length of one zig zag line - will in reality be doubled see below usage
this.oneZigZagLength = 10;
//Length of the last straight bit - so we do not zig zag all the line
this.straightLengthWhenZigZag = 30
// The length of the zig zag lines
this.zigZagLength = this.lineLength - this.straightLengthWhenZigZag;
}
draw(ctx, color = '#000', lineWidth = 2.0) {
if (this.dashed) {
ctx.setLineDash([4, 2]);
} else {
ctx.setLineDash([]);
}
if (this.zigZagged) {
this.drawZigZagged(ctx);
} else {
ctx.beginPath();
ctx.moveTo(this.from.x, this.from.y);
ctx.lineTo(this.to.x, this.to.y);
}
ctx.lineWidth = lineWidth;
ctx.strokeStyle = color;
ctx.stroke();
}
drawZigZagged(ctx) {
// Save the current drawing state
ctx.save();
// Begin the new path
ctx.beginPath();
//Set the new 0, 0
ctx.translate(this.from.x, this.from.y);
// Rotate the canvas so we can treat it like straight
ctx.rotate(this.lineRadians);
// Begin from 0, 0 (ie this.from.x, this.from.y)
ctx.moveTo(0,0);
let zx = 0;
// Create zig zag lines
for (let n = 0; zx < this.zigZagLength; n++) {
// The new zig zag x position
zx = ((n + 1) * this.zigzagSpacing);
// The new zig zag y position - each and other time up and down
const zy = (n % 2 == 0) ? -this.oneZigZagLength : this.oneZigZagLength;
// Draw the an actual line of the zig zag line
ctx.lineTo(zx, zy);
}
// Back to the center vertically
ctx.lineTo(this.lineLength - (this.straightLengthWhenZigZag / 2), 0);
// Draw the last bit straight
ctx.lineTo(this.lineLength, 0);
// Restore the previous drawing state
ctx.restore();
}
setDashed(enable) {
this.dashed = enable;
}
setZigZagged(enable){
this.zigZagged = enable
}
}
推荐阅读
- bash - (@)/[some_folder] 在那个 Shell 脚本示例的开头是什么意思?
- jaspersoft-studio - 在 Jaspersoft Studio 编辑图表时出现 NullPointerException
- python - PYTHON-DOTENV:从 vscode fun 按钮运行时不起作用
- reactjs - Api Platform Admin 使用猜测器组件,但不使用 React-admin 经典组件
- sql - 在 SQL 中链接两个表
- tensorflow - MobileNetV2 在 TF 2.2 上的预处理不一致
- java - 带有 Nginx 和预签名 URL 的 Minio
- json - 如何在 Highmaps 中使用自定义 JSON 地图
- javascript - 如何输入图像并将其用作光标?
- css - 媒体查询问题技术评估