📌  相关文章
📜  SVG-Laylinepainter.js效果(1)

📅  最后修改于: 2023-12-03 15:35:11.949000             🧑  作者: Mango

SVG-Laylinepainter.js

Introduction

SVG-Laylinepainter.js is a JavaScript library for drawing sailboat laylines on SVG charts. It provides a set of functions for adding and updating laylines as boats sail around a course.

Features
  • Easy integration with SVG charts
  • Automatic layline calculation based on wind direction and boat course
  • Customizable line style and color
  • Adjustable sensitivity for precise layline crossing detection
  • Simple API for adding and updating laylines
Getting started

To get started with SVG-Laylinepainter.js, you need to include the library in your project and create an SVG chart:

<!DOCTYPE html>
<html>
<head>
    <title>My Chart</title>
    <script src="svg-laylinepainter.js"></script>
</head>
<body>
    <svg id="my-chart" width="500" height="500">
        <rect width="100%" height="100%" fill="white" />
    </svg>
    <script>
        const chart = document.getElementById('my-chart');
        // create a new LaylinePainter instance for the chart
        const painter = new LaylinePainter(chart);
        // add a layline at a specific angle (in degrees)
        painter.addLayline({angle: 45});
    </script>
</body>
</html>

This will create a new SVG chart with a single layline drawn at a 45-degree angle. The addLayline() function accepts an optional second argument for customizing the line style:

painter.addLayline({angle: 45}, {
    color: 'red',
    width: 2,
    dashArray: '5, 5'
});

This will draw a red layline with a width of 2 pixels and a dashed stroke.

API Reference
new LaylinePainter(container: HTMLElement, options: LaylinePainterOptions)

Creates a new LaylinePainter instance for the specified SVG container. The options object can be used to set the following options:

  • crossingSensitivity: a number between 0 and 1 (default 0.5) representing the sensitivity for detecting when the boat crosses a layline. A higher value means the boat must be closer to the layline before it is detected.
LaylinePainter.addLayline(options: LaylineOptions, style: LaylineStyle)

Adds a new layline to the chart. The options object should contain the following properties:

  • angle: the angle (in degrees) at which the layline should be drawn
  • length: the length (in pixels) of the layline (default: 1000)

The style object can be used to customize the line style as described above.

LaylinePainter.updateLayline(id: number, options: LaylineOptions, style: LaylineStyle)

Updates an existing layline with the specified id. The options and style objects are the same as those used in addLayline().

LaylinePainter.setWindDirection(direction: number)

Sets the current wind direction (in degrees). This is used to calculate the layline angles and positions.

LaylinePainter.setBoatCourse(course: number)

Sets the current boat course (in degrees). This is used to calculate the layline crossing points.

Conclusion

SVG-Laylinepainter.js is a simple yet powerful library for drawing sailboat laylines on SVG charts. Its easy-to-use API and customizable style options make it a great choice for any sailing-related project.