lauchmelder/lauchpioos
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

added shapes

Browse source
This commit is contained in:
Lauchmelder 2021-11-26 19:43:48 +01:00
parent ea4eb49670
commit 355b840471
6 changed files with 81 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
examples/index.html
View file

@ -6,11 +6,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example</title> <title>Example</title>
<script src="../out/lauchpioos.js"></script> <script type="module" src="../out/geometry.js"></script>
</head> </head>
<body> <body>
<custom-geometry> <geometry-sketch src="test.gs" />
</custom-geometry>
</body> </body>
</html> </html>

31
src/geometry.ts
View file

@ -1,17 +1,38 @@
import { Vector2D } from "./vector.js"
import * as shape from "./shapes.js"
class Geometry extends HTMLElement class Geometry extends HTMLElement
{ {
private canvas: HTMLCanvasElement;
private context: CanvasRenderingContext2D;
constructor() constructor()
{ {
super(); super();
this.attachShadow({mode: "open"}); this.attachShadow({mode: "open"});
let canvas = document.createElement("canvas");
canvas.width = 500;
canvas.height = 500;
let context = canvas.getContext("2d");
context.lineCap = "round";
context.lineJoin = "round";
context.strokeStyle = "black";
context.lineWidth = 1;
console.log("Created Geomtry tag"); this.canvas = canvas;
const text = document.createElement("p") this.context = context;
text.innerText = "Geometry tag";
this.shadowRoot.append(text); this.shadowRoot.append(this.canvas);
this.redraw();
}
private redraw()
{
shape.line(this.context, new Vector2D(), new Vector2D(300, 300));
shape.circle(this.context, new Vector2D(150, 150), 100);
} }
} }
customElements.define("custom-geometry", Geometry); customElements.define("geometry-sketch", Geometry);

14
src/shapeStyle.ts Normal file
View file

@ -0,0 +1,14 @@
export class ShapeStyle
{
public strokeWidth: number;
public strokeColor: string;
public fillColor: string;
constructor()
{
this.strokeWidth = 1;
this.strokeColor = '#000000';
this.fillColor = '#00000000';
}
}

26
src/shapes.ts Normal file
View file

@ -0,0 +1,26 @@
import { Vector2D } from "./vector.js"
import { ShapeStyle } from "./shapeStyle.js";
export function line(ctx: CanvasRenderingContext2D, from: Vector2D , to: Vector2D, style: ShapeStyle = new ShapeStyle())
{
ctx.beginPath();
ctx.moveTo(from.x, from.y);
ctx.lineTo(to.x, to.y);
ctx.lineWidth = style.strokeWidth;
ctx.strokeStyle = style.strokeColor;
ctx.stroke();
}
export function circle(ctx: CanvasRenderingContext2D, center: Vector2D, radius: number, style: ShapeStyle = new ShapeStyle())
{
ctx.beginPath();
ctx.arc(center.x, center.y, radius, 0, 2 * Math.PI, false);
ctx.fillStyle = style.fillColor;
ctx.fill();
ctx.lineWidth = style.strokeWidth;
ctx.strokeStyle = style.strokeColor;
ctx.stroke();
}

11
src/vector.ts Normal file
View file

@ -0,0 +1,11 @@
export class Vector2D
{
public x: number;
public y: number;
constructor(x: number = 0, y: number = 0)
{
this.x = x;
this.y = y;
}
}

3
tsconfig.json
View file

@ -1,7 +1,8 @@
{ {
"compilerOptions": { "compilerOptions": {
"target": "es6", "target": "es6",
"outFile": "./out/lauchpioos.js", // "outFile": "./out/lauchpioos.js",
"outDir": "./out",
"sourceRoot": "./src", "sourceRoot": "./src",
"rootDir": "./src", "rootDir": "./src",
"sourceMap": true "sourceMap": true