Teraz pracujem na aplikácii pre maľovanie. Používa plátno html. Používatelia môžu na plátno kresliť tvary.
Teraz mi príde problém. Chcem vybrať čiaru, ktorú som nakreslil na plátne. Ak je vybratá, môžem ju pretiahnuť alebo odstrániť. Ako ho môžem implementovať? Máte nejaké dobré nápady?
odpovede:
1 pre odpoveď č. 1Mohlo by to stáť za to sa na to pozrieť https://github.com/canvimation/canvimation.github.com toto obsahuje zdrojový kód aplikácie na kreslenie pomocou plátna.
Mali by ste si uvedomiť, že táto aplikácia sa kóduje, ale ešte neexistuje funkčná verzia používajúca nový kód online. Nový zdrojový kód je v Stage1 vetva. Dúfajme, že tento nový kód je ľahšie pochopiteľný ako starý kód a kód uvedený nižšie pochádza z Stage1 vetva.
V zásade sa pre každý objekt vytvorí objekt tvarunakreslený tvar, ktorý obsahuje všetky údaje o tvare eh, vrátane údajov o ceste a údajov, ktoré poskytujú obdĺžnikové ohraničenie okolo tvaru. Keď sa klikne na divíziu „boundarydrop“, zavolá sa funkcia checkBoundary a údaje o klávese Shift a pozícii kurzora sa odovzdajú. Potom pri každom tvare je prvou kontrolou zistiť, či sa kurzor nachádza v rámci hranice tvaru, a ak áno, vykoná sa podrobnejšia kontrola. V prípade uzavretého tvaru sa kontroluje, či sa kurzor nachádza vo vnútri tvaru a či ide o otvorený tvar, ak sa kurzor nachádza blízko cesty.
Existujú ďalšie komplikácie v závislosti od toho, či je kláves shift stlačený alebo nie a do ktorej skupiny tvar patrí. Základné informácie sú však k dispozícii.
Funkcie na vyskúšanie
v index.html
shiftdown
getPosition
v skriptoch / drawboundary.js
checkBoundary
je v
Ison
v skriptoch / shape.js
tvar
Pracovná online verzia aplikácie je na adrese http://canvimation.github.com/ ale toto používa starší kód v hlavnej vetve a existujú nejaké chyby, ale dá vám to predstavu o tom, čo aplikácia robí.
Dúfam, že je to nejaká pomoc
0 pre odpoveď č. 2
K dispozícii je knižnica s názvom kinetic.js, pomocou ktorej môžete pomocou vybranej funkcie sledovať obrazce, ktoré na plátne nakreslíte.
Tu je príklad: http://www.html5canvastutorials.com/kineticjs/html5-canvas-select-shapes-by-name-with-kineticjs/