Objektit

Näimme jo kuinka työskennellä suorakulmioiden kanssa instantoimalla kangasta. Suora konstruktori. Mutta tietysti Kangas peittää myös kaikki muut perusmuodot - ympyrät, kolmiot, ellipsit ja niin edelleen. Kaikki ne näkyvät kankaan "nimiavaruuden" alla kankaana.Ympyrä, kangas.Kolmio, kangas.Ellipsi jne.

7 perusmuotoa Fabricissa:

• kangas.Ympyrä
• kangas.Ellipsi
• kangas.Line
• kangas. Monikulmio
• kangas. polyline
• kangas.Oik
• kangas.Kolmio

Haluatko piirtää ympyrän? Luo vain ympyräobjekti ja lisää se kankaalle. Sama minkä tahansa muun perusmuodon kanssa:

var circle = new fabric.Circle({
  radius: 20, fill: 'green', left: 100, top: 100
});
var triangle = new fabric.Triangle({
  width: 20, height: 30, fill: 'blue', left: 50, top: 50
});

canvas.add(circle, triangle);

..ja siellä meillä on vihreä ympyrä piirrettynä 100 100 kohdassa ja sininen kolmio 50 50 kohdassa.

Objektien manipulointi

Graafisten objektien luominen - suorakulmiot, ympyrät tai jotain muuta - on varmasti vasta alkua. Jossain vaiheessa haluamme todennäköisesti muokata näitä objekteja. Ehkä tietyn toiminnon täytyy laukaista tilan muutos tai pelata jonkinlaista animaatiota. Tai saatamme haluta muuttaa kohteen ominaisuuksia (väriä, peittävyyttä, kokoa, sijaintia) tietyissä hiiren vuorovaikutuksessa.

Kangas hoitaa puolestamme kankaiden renderöinnin ja valtionhallinnon. Meidän tarvitsee vain muokata itse objekteja.

Aikaisempi esimerkki havainnollistaa set-menetelmää ja sitä, kuinka set({ vasen: 20, ylhäällä: 50 }) "siirräsi" objektia aiemmasta sijainnista. Samalla tavalla voimme muuttaa objektin mitä tahansa muuta ominaisuutta. Mutta mitä ne ominaisuudet ovat?

No, kuten voit odottaa, on niitä, jotka liittyvät sijoitteluun - vasen, yläosa; mitat - leveys, korkeus; renderöinti — täyttö, peittävyys, viiva, viivanleveys; skaalaus ja kierto — scaleX, scaleY, kulma; ja jopa kääntämiseen liittyvät - flipX, flipY ja vino skewX, skewY

Kyllä, käännetyn objektin luominen Fabricissa on yhtä helppoa kuin flip*-ominaisuuden asettaminen true.

Voit lukea mitkä tahansa näistä ominaisuuksista get-menetelmällä ja asettaa ne setin avulla. Yritetään muuttaa joitain punaisen suorakulmion ominaisuuksia:

var canvas = new fabric.Canvas('c');
...
canvas.add(rect);

rect.set('fill', 'red');
rect.set({ strokeWidth: 5, stroke: 'rgba(100,200,200,0.5)' });
rect.set('angle', 15).set('flipY', true);

Ensin asetamme "täytön" arvoksi "punainen", mikä tekee kohteen punaisen värin. Seuraava lause asettaa sekä "strokeWidth"- että "stroke"-arvot, mikä antaa suorakulmiolle 5 kuvapisteen viivan vaalean vihreän värin. Lopuksi muutamme "kulma"- ja "flipY"-ominaisuuksia. Huomaa, kuinka kukin kolmesta lauseesta käytti hieman erilaista syntaksia.

Tämä osoittaa, että joukko on universaali menetelmä. Tulet todennäköisesti käyttämään sitä melko usein, joten sen on tarkoitus olla mahdollisimman kätevä.

Olemme kattaneet setterit, ja entä getterit? On aivan selvää, että on olemassa yleinen get-menetelmä, mutta myös joukko erityisiä get* -menetelmiä. Voit lukea objektin "width"-arvon käyttämällä get('width') tai getWidth(). "scaleX"-arvon saamiseksi - get('scaleX') tai getScaleX() ja niin edelleen. On olemassa menetelmä, kuten getWidth tai getScaleX, jokaiselle "julkiselle" objektin ominaisuudelle ("viiva", "strokeWidth", "angle" jne.)

Saatat huomata, että aiemmissa esimerkeissä objektit luotiin samalla määrityshajautusarvolla kuin se, jota käytimme juuri set-metodissa. Tämä johtuu siitä, että se on täsmälleen sama. Voit joko "konfiguroida" objektin luomisen yhteydessä tai käyttää set-menetelmää sen jälkeen:

var rect = new fabric.Rect({ width: 10, height: 20, fill: '#f55', opacity: 0.7 });

// or functionally identical

var rect = new fabric.Rect();
rect.set({ width: 10, height: 20, fill: '#f55', opacity: 0.7 });

Oletusasetukset

Tässä vaiheessa saatat kysyä - mitä tapahtuu, kun luomme objektin ohittamatta mitään "konfiguraatioobjektia". Onko sillä vielä noita ominaisuuksia?

Tottakai. Fabric-objekteilla on aina oletusominaisuusjoukko. Kun se jätetään pois luonnin aikana, tämä oletusarvoinen ominaisuusjoukko "annetaan" objektille. Voimme kokeilla ja nähdä itse:

var rect = new fabric.Rect(); // notice no options passed in

rect.get('width'); // 0
rect.get('height'); // 0

rect.get('left'); // 0
rect.get('top'); // 0

rect.get('fill'); // rgb(0,0,0)
rect.get('stroke'); // null

rect.get('opacity'); // 1

Suorakulmiollamme on oletusarvoiset ominaisuudet. Se on sijoitettu arvoon 0,0, on väriltään musta, täysin läpinäkymätön, siinä ei ole viivaa ja ei mittoja (leveys ja korkeus ovat 0). Koska mittoja ei ole, emme voi nähdä sitä kankaalla. Mutta positiivisten leveys-/korkeusarvojen antaminen paljastaisi varmasti mustan suorakulmion kankaan vasemmassa/yläkulmassa.

Hierarkia ja perinnöllisyys

Kangasesineet eivät vain ole olemassa toisistaan riippumattomina. Ne muodostavat erittäin tarkan hierarkian.

Suurin osa esineistä periytyy juurikankaasta. Objekti. kangas. Esine edustaa melko pitkälti 2-ulotteista muotoa, joka on sijoitettu 2-ulotteiseen kanvastasoon. Se on kokonaisuus, jolla on vasen/ylä ja leveys/korkeus-ominaisuudet sekä joukko muita graafisia ominaisuuksia. Ne ominaisuudet, jotka näimme esineissä – täyttö, viiva, kulma, peittävyys, kääntö* jne. – ovat yhteisiä kaikille Kangasobjekteille, jotka periytyvät kankaasta.Object.

Tämän perinnön avulla voimme määrittää menetelmiä kankaalle. Objektille ja jakaa ne kaikkien lapsiluokkien kesken. Jos esimerkiksi haluat getAngleInRadians-menetelmän kaikille objekteille, luo se yksinkertaisesti kankaan.Object.prototype:

fabric.Object.prototype.getAngleInRadians = function() {
  return this.get('angle') / 180 * Math.PI;
};

var rect = new fabric.Rect({ angle: 45 });
rect.getAngleInRadians(); // 0.785...

var circle = new fabric.Circle({ angle: 30, radius: 10 });
circle.getAngleInRadians(); // 0.523...

circle instanceof fabric.Circle; // true
circle instanceof fabric.Object; // true

Kuten näet, menetelmä on heti käytettävissä kaikissa tapauksissa.

Vaikka lapsiluokat periytyvät kankaasta.Object, he usein myös määrittelevät omat menetelmänsä ja ominaisuutensa. Esimerkiksi kangas.Ympyrällä on oltava "säde"-ominaisuus. Ja kangas.Image – jota katsomme hetken kuluttua – tarvitsee getElement/setElement-menetelmiä HTML-koodin käyttämiseksi/asettamiseksi <img> elementti, josta kuvailmentymä on peräisin.

Prototyyppien kanssa työskentely mukautetun renderöinnin ja käyttäytymisen saamiseksi on hyvin yleistä edistyneissä projekteissa.