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">
<title>Example</title>
<script src="../out/lauchpioos.js"></script>
<script type="module" src="../out/geometry.js"></script>
</head>
<body>
<custom-geometry>
</custom-geometry>
<geometry-sketch src="test.gs" />
</body>
</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
{
private canvas: HTMLCanvasElement;
private context: CanvasRenderingContext2D;
constructor()
{
super();
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");
const text = document.createElement("p")
text.innerText = "Geometry tag";
this.canvas = canvas;
this.context = context;
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": {
"target": "es6",
"outFile": "./out/lauchpioos.js",
// "outFile": "./out/lauchpioos.js",
"outDir": "./out",
"sourceRoot": "./src",
"rootDir": "./src",
"sourceMap": true