Question

我在2点之间有一条线。这条线可以是任何角度。

Ex

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）{...}函数

Answer 1

所以我设法做到了。因此，这是我的使锯齿形线弯曲的代码。请参见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
    }
}

HTML5画布行变成曲折行？

1 个答案: