Autor Wątek: HTML5, canvas, jak do tego podejść?  (Przeczytany 1757 razy)

Offline dzemeuksis

  • Użytkownik
    • Blog quodmeturbat

# Sierpień 01, 2016, 21:06:49
Hej,

Szukam jakiegoś frameworka, w którym, wykorzystując HTML5 i canvas, najwygodniej zrobię coś w rodzaju tablicy korkowej - takie niemal zwyczajne tworzenie karteczek plus ich zagnieżdżanie, oraz łączenie relacjami. I żeby karteczki łatwo dawały się przesuwać, zmieniać ich rozmiar, itd.

Znalazłem kilka obiecujących:
Canvas Engine
EaselJS
Fabric.js
PHASER
Pixi.js

Chodzi mi o to, żeby z jednej strony nie użyć armaty do komara, z drugiej mieć już jakieś gotowce, które będą jakoś wyglądać, bo jak zacznę to dziergać od podstaw, to - znając moje wyczucie estetyczne - wyjdzie jakiś koszmarek.

Ktoś ma jakieś doświadczenie w tych technologiach? Może coś podpowiedzieć?

Offline Mr. Spam

  • Miłośnik przetworów mięsnych

Offline Kos

  • Użytkownik
    • kos.gd

  • +2
# Sierpień 02, 2016, 07:04:19
Nie wiem czy bym zaprzęgał do tego canvasa. Nie byłoby prościej ostylować takiej tablicy zwykłym CSS, używając ew. SVG tam gdzie potrzebujesz bardziej fikuśnych kształtów?

Offline dzemeuksis

  • Użytkownik
    • Blog quodmeturbat

# Sierpień 02, 2016, 07:26:31
Może i lepiej, ale czy tu da się jakoś łatwo zobrazować relacje? Tzn. żeby te karteczki mogły być połączone liniami, które ładnie się przekształcają, kiedy karteczka jest przesuwana?

Offline Rakieta

  • Użytkownik

  • +1
# Sierpień 02, 2016, 14:01:35
Lepiej nie. Ale już chyba sam musisz wybrać technologię.

Osobiście zawsze używam do zabawy Phasera. Ale Phaser to właśnie armata, zawiera Pixi. Samym Pixi za to troszkę trudniej bedzie zrobić drag/drop, choć na githubie jest chyba jakaś biblioteka ułatwiająca to.


Gdybym mógł bez problemu dorzucić 1mb to bym pewnie poszedł w Phasera - masa przykładów na ich stronie, z którymi zbudujesz chyba większość gier 2D, to bardzo prosty silnik. Gdybym nie mógł, to bym szukał silników graficznych jak Pixi i kombinował.

Offline .c41x

  • Użytkownik
    • homepage

  • +1
# Sierpień 02, 2016, 17:30:36
Jak najbardziej Canvas to dobre rozwiązanie, podobny use-case jak twój: realtimeboard (używa właśnie Canvas). Ostatnio sam się zastanawiałem nad biblioteką do wyświetlania takich rzeczy na ekranie do swojego projektu, brałem pod uwagę takie oto:

- https://d3js.org/  CSS + SVG
- http://www.cytoscape.org/what_is_cytoscape.html

ostatecznie wybrałem lżejsze jQueryUI, właśnie dlatego że zrezygnowałem z ficzeru strzałek :)

Offline Kos

  • Użytkownik
    • kos.gd

  • +2
# Sierpień 02, 2016, 18:30:53
Może i lepiej, ale czy tu da się jakoś łatwo zobrazować relacje? Tzn. żeby te karteczki mogły być połączone liniami, które ładnie się przekształcają, kiedy karteczka jest przesuwana?

Dlaczego nie? Jak robisz przesuwanie karteczek to już masz jakiś drag&drop w JS, możesz pod ten sam kod podpiąć jednoczesne przesuwanie jednego "końca" elementu SVG reprezentującego linię między karteczkami. Możesz też w SVG sobie zrobić beziera i ładnie aktualizować podczas przesuwania 3 punkty kontrolne.

Offline ArekBal

  • Użytkownik

  • +1
# Sierpień 02, 2016, 19:26:35
Ja jestem po środku... z jednej strony html, css + js mogą być najczystsze(zaznaczanie tekstu, kopiuj wklej, linki i inne)... z drugiej, jak już się okaże że chcesz mieć coś ładniejszego to zaczniesz hackować i będzie za dużo.

Zacznij imho z podejściem Kosa, a jak zobaczysz że błądzisz(zaczyna się robić hack na hacku) to rozszerz do poziomu hybrydy.

Offline ΨΧΞ

  • Użytkownik
    • PsichiX Website

  • +2
# Sierpień 02, 2016, 21:39:43
z phaserem jest o tyle fajnie, że możesz zassać źródłą i zbudować bibliotekę z tylko tymi ficzurami, których potrzebujesz, porzucając to, czego nei chcesz - ak z 1mb schodzi się do bardzo małej wielkości :)

Offline matheavyk

  • Użytkownik

  • +1
# Sierpień 02, 2016, 22:01:18
Ja nie chcę obierać żadnego stanowiska, ale jeśli wybierzesz wariant bez canvasa, to zobacz sobie ten link https://jqueryui.com/draggable/#snap-to. Po prawej stronie masz "examples"- warto sobie każdy włączyć.

Offline dzemeuksis

  • Użytkownik
    • Blog quodmeturbat

# Sierpień 03, 2016, 09:06:18
Bardzo ciekawe to wszystko, co piszecie. Muszę nad tym jeszcze pomyśleć.