Angular Typescript canvas zeichnen

[odul]

Salu,

recht spezielles Thema, da wir hier ja aber für alles Spezialisten ( @fahe @Mallau ) haben und ich gerade erfolglos das Internet umgegraben habe:

Ich möchte mit Angular so etwas ähnliches wie einen primitiven graphischen Editor bauen. Es geht darum ein paar einfache gefüllte Rechtecke zu zeichnen, ein paar Linien und etwas Text. Weiterhin möchte ich kleine png-Dateien fortlaufend plazieren.

Unter dem SChlagwort "canvas" bin ich fündig geworden. Aber ich finde da nix aktuelles dazu. Kann das sein, dass das schon wieder tot ist? Ich habe kein funktionierendes Beispiel gefunden. Oft ist auf der Seite auch dann auch von Angular 2 die Rede.

Bin etwas ratlos. Kann jemand weiterhelfen oder kennt ein Forum, wo man solche Fragen plazieren kann?

 

[ChristophW]

Unter dem SChlagwort "canvas" bin ich fündig geworden.

https://www.w3schools.com/html/html5_canvas.asp
https://kernhanda.github.io/tutorial-typescript-canvas-drawing/

 

[odul]

Über den zweiten link bin auch schon gestolpert. Von dort kann man auch das ganze VSC-Projekt von git-hub ( https://github.com/kernhanda/kernhanda.github.io ) runterladen. Aber ich bekomme Compiler-Fehler.

So sieht der Anfang von main.ts aus:


class DrawingApp {
private canvas: HTMLCanvasElement;
private context: CanvasRenderingContext2D;
private paint: boolean;
private clickX: number[] = [];
private clickY: number[] = [];
private clickDrag: boolean[] = [];
constructor() {
let canvas = document.getElementById('canvas') as
HTMLCanvasElement;
let context = canvas.getContext("2d");
context.lineCap = 'round';
context.lineJoin = 'round';

Der Compiler mault dann, "document" wäre nicht definiert. Das mit dem document, das einfach benutzt wird, findest du auch in w3.schools.
Das GitHub-Repository wurde auch seit 5 Jahren nicht mehr angefasst, was in dem Fall ja eine Ewigkeit ist. Mein Verdacht, ging dahin, dass das einfach veraltet ist, und sich nicht mehr compilieren läßt.

Hänge da echt auf einem toten Punkt.

 

[odul]

Kann auch sein, dass ich den Compile-Vorgang nicht richtig starte.

 

[ChristophW]

Beide Beispiele gehen davon aus das du eine 'Webapp' machst also etwas das nachher im Browser läuft und das für dich 'Canvas' neu ist, also setup, ggf. Compilern und deployment bekannt sind. Ist das so?

 

[odul]

Beide Beispiele gehen davon aus das du eine 'Webapp' machst also etwas das nachher im Browser läuft

Der Teil ist klar.

und das für dich 'Canvas' neu ist, also setup, ggf. Compilern und deployment bekannt sind. Ist das so?

Äh, verstehe ich nicht ganz, was du meinst.

TypeScript habe ich mich einigermaßen eingearbeitet. Angular ist sehr neu für mich. Ich habe das hier: https://www.youtube.com/watch?v=BFS24_XJATY (Angular in 120Minuten) weitgehend durchgekaut.

Mit ist auch klar, dass ein html und ein ts-datei zusammenspielen müssen. Das kompette VSC-Projekt zum Herunterladen erschien mir da ideal, um mal einen Anfang zu kriegen. Also habe ich das runtergeladen, aber ich bekomme es nicht gestartet

 

[odul]

Noch lieber wäre mir ja sowas:

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API

Aber keinen Dunst, wie ich das in VSC zusammensetzen müsste.

 

[bjoernbg]

Hi,
Canvas ist nicht tot. Ist sogar sehr lebendig, da auch alles was mit 3D um wenn passiert darauf aufbaut. Dein Anwendungsfall hört sich für mich aber eher nach SVG an. Das „passt“ auch besser zu Angular, da es die verschiedenen Zeichenobjekte direkt mitbringt (Rect, Line).

SVG lässt sich in Angular auch direkt als Template verwenden.

schau auch mal hier:
https://svgjs.dev/docs/3.0/plugins/ngx-svg/
Ich kenne die Library nicht, macht aber einen brauchbaren Eindruck.

für Einsteiger (weiß nicht, auf welchem Level du unterwegs bist) könnte auch p5.js (https://p5js.org/) interessant sein. Macht es sehr einfach, direkt was gemalt zu bekommen. Eine Kundenanwendung würde ich damit nicht bauen, aber für den Einsatz im kleinen ist das super.

 

[odul]

Inzwischen habe ich gelernt, dass canvas zu html5 gehört und nichts mit angular zu tun hat. Ich bleibe dran.

 

[fahe]

Moinsen,
ich bin ja nicht so der Frontendler... Aber:

So, wie canvas ein nativer Bestandteil von HTML5 ist, und von allen halbwegs aktuellen Browsern unterstützt wird, ist Typescript ja letztlich ein besseres Javascript, weil typsicher.

Keine Ahnungm wie aktiv das noch entwickelt wird, aber wirf mal einen Blick auf fabric.js.

Meiner Erinnerung nach meine ich, von den Frontendlern mal gehört zu haben, dass die das gerne im Zusammenhang mit canvas genutzt haben... ist allerdings schon ein paar Jahre her.

Kurz gegogelt, das sollte es sein: http://fabricjs.com/

 

[odul]

Wurde vor einer Stunde durchgebetet. Habe jetzt eine canvas auf einer html-seite, erzeugt von typescript aus. Mit einem roten und grünen Rechteck drauf. Debug geht auch.

 

[fahe]

...und, geht das halbwegs fußläufiger mit fabric.js?

Das Coolste, das die Frontendler in Bezug auf Canvas-Anwendung mal für mich gebaut haben, war eine UI-Komponente zum Festlegen von Bildausschnitten in vorgegebenen Proportionen. Also: Bild anhand vorhandener Thumbnails auswählen oder neu hochladen, zugehöriges Bild in Originalauflösung laden und als b64-data auf dem Canvas platzieren, per Mausrad oder Buttons ein- und auszoombar machen, veränderbaren Rahmen mit vorgegebenen Proportionen drüberlegen... beim Abschicken Koordinaten ermitteln, die den Bildausschnitt festlegen, Mindestauflösung validieren... und per ajax zur serverseitigen Verarbeitung.

Also, man kann schon coole Sachen damit machen.

 

[odul]

Das ist jetzt direkt - ohne Fabrice.js

 

[odul]

Aber trotzdem allen danke

 

[odul]

Fabrice ??!!?? Sch... Autokorrektur!!

 

[fahe]

...man kann...

 

[fahe]

...Beiträge editieren...

 

[odul]

man kann viel. Aber vom Handy aus in einem wackligen Bus... hab auch einfach nicht dran gedacht. Außerdem hätte ich dann meinen Frust zu der Autokorrektur nicht ablassen können.

 

[ChristophW]

Aber vom Handy aus in einem wackligen Bus...

Also auch mein Handy hat die Editierfunktion ... und man muss ja auch nicht immer und überall posten