Share
În cel de-al doilea tutorial al seriei, ați învățat cum să desenați niște forme de bază cum ar fi dreptunghiuri, cercuri și poligoane regulate folosind Konva. Al treilea tutorial se referă la modul în care puteți utiliza Konva pentru a desena forme mai complexe, cum ar fi stelele și inelele, precum și spritele pe pânză.
În acest tutorial, vom merge cu un pas mai departe și vom învăța cum să aplicăm stilul diferit formelor schimbând valorile umplerii și cursei. Veți învăța, de asemenea, cum să controlați opacitatea unei forme și să aplicați umbre la ea. În secțiunile finale, veți învăța cum să utilizați modurile de amestecare pentru a specifica ce ar trebui să arate rezultatul final dacă se suprapun diferite forme.
Am folosit completati și accident vascular cerebral proprietăți din primul tutorial al seriei. Cu toate acestea, le-am folosit doar pentru a umple forme cu o culoare solidă până acum. Puteți, de asemenea, să umpleți o formă cu gradiente (atât liniare cât și radiale), precum și imagini. Același lucru este valabil și pentru diferitele curse aplicate unei forme.
Există două moduri de a aplica o umplere la diferite forme. Puteți seta valoarea de umplere utilizând completati proprietate atunci când o formă este creată pentru prima oară în Konva sau puteți utiliza completati() metoda de a aplica o umplere dinamic ca răspuns la unele evenimente cum ar fi hover, clic pe butoane, etc.
Când umpleți un element cu o culoare solidă, puteți specifica o valoare pentru completati proprietate și va funcționa foarte bine. Când utilizați un gradient liniar pentru a umple interiorul unei forme, trebuie să specificați valori valide pentru o mulțime de alte proprietăți, cum ar fi fillLinearGradientStartPoint, fillLinearGradientEndPoint, și fillLinearGradientColorStops. Primele două proprietăți acceptă obiecte care specifică coordonatele x și y ale punctelor de început și de sfârșit ale unui gradient. De asemenea, puteți specifica separat valorile x și y utilizând fillLinearGradientStartPointX, fillLinearGradientStartPointY, fillLinearGradientEndPointX, și fillLinearGradientEndPointY proprietăţi.
Radiografiile gradientului au, de asemenea, același set de proprietăți, dar cuvântul Liniar se înlocuiește cu Radial. Două proprietăți suplimentare legate de gradienții radiali sunt fillRadialGradientStartRadius și fillRadialGradientEndRadius.
var canvasWidth = 600; var canvasHeight = 400; vară etapă = nou Konva.Stage (container: "exemplu", lățime: canvasWidth, înălțime: canvasHeight); var stratul A = noul Konva.Layer (); var rectA = nou Konva.Rect (x: 25, y: 25, lățime: 200, înălțime: 150, fillLinearGradientStartPoint: x: 0, y: 0, fillLinearGradientEndPoint: x: 200, y: 150 fillLinearGradientColorStops : [0, "albastru", 1, "galben"], accident vascular cerebral: "negru"); var rectB = nou Konva.Rect (x: 375, y: 25, lățimea: 200, înălțimea: 150, fillLinearGradientStartPoint: x: 0, y: 50, fillLinearGradientEndPoint: x: 100, y: fillLinearGradientColorStopuri: [0, "verde", 0,1, "galben", 0,5, "roșu", 0,9, "negru"], accident vascular cerebral: "negru"); var rectC = nou Konva.Rect (x: 25, y: 200, lățimea: 200, înălțimea: 150, fillRadialGradientStartRadius: 0, fillRadialGradientEndRadius: 220, fillRadialGradientColorStops: "roșu", 0,9, "negru"], accident vascular cerebral: "negru"); var rectD = nou Konva.Rect (x: 375, y: 200, lățime: 200, înălțime: 150, fillRadialGradientStartRadius: 0, fillRadialGradientEndRadius: 100, y: 75, fillRadialGradientColorStopuri: [0, "albastru", 0,5, "galben", 0,9, "verde"], accident vascular cerebral: "negru"); stratA.add (rectA, rectB, rectC, rectD); stage.add (layerA);
Atunci când nu este specificat, se presupune că începutul și punctul final al unui gradient radial sunt 0,0. Acesta este motivul pentru care gradientul radial din cel de-al treilea dreptunghi are originea în colțul din stânga sus. De asemenea, rețineți că punctele de început și de sfârșit sunt specificate în raport cu forma însăși.
La fel ca umplutura, puteți seta o valoare pentru culoarea stroke și lățimea cursei utilizând accident vascular cerebral și strokeWidth atunci când o formă este inițial inițiată. De asemenea, puteți seta dinamic ambele valori utilizând accident vascular cerebral() și strokewidth () metode.
Puteți aplica umbrele oricăror forme create folosind Konva cu ajutorul a patru proprietăți diferite numite shadowColor, shadowOffset, shadowBlur, și shadowOpacity. shadowOffset proprietatea acceptă un obiect cu X și y componente ca valoare, dar puteți utiliza, de asemenea shadowOffsetX și shadowOffsetY pentru a specifica X și y se coordonează separat. De asemenea, aveți opțiunea de a activa și dezactiva umbrele pentru o anumită formă folosind shadowEnabled proprietate.
Puteți controla opacitatea formei în sine folosind opacitate proprietate. Rețineți că un obiect complet transparent nu va arunca nici o umbră. În mod similar, dacă ați setat completati culoarea unei forme la transparente, doar umbra ei accident vascular cerebral va fi redat pe panza.
var canvasWidth = 600; var canvasHeight = 400; vară etapă = nou Konva.Stage (container: "exemplu", lățime: canvasWidth, înălțime: canvasHeight); var stratul A = noul Konva.Layer (); var rectA = nou Konva.Rect (x: 25, y: 25, lățimea: 200, înălțimea: 150, cornerRadius: 5, umplere: "portocaliu", opacitate: 0.5, shadowColor: -10, y: 10, shadowBlur: 10, accident vascular cerebral: "negru"); var steaA = nou Konva.Star (x: 400, y: 200, numPoints: 10, innerRadius: 50, outerRadius: 150, umplere: "transparent", accident vascular cerebral: , shadowOffset: x: 5, y: 5, shadowBlur: 0); stratA.add (rectA, starA); stage.add (layerA);
Setarea shadowBlur proprietate la 0 face umbra la fel de ascuțită ca forma originală în sine. Dacă setați această valoare prea mare, umbra va pierde forma originală; veți vedea doar un plasture întunecat pe pânză.
Aș dori să subliniez că puteți crea, de asemenea, umbre de text cu același set de proprietăți odată ce ați instanțiat a Konva.Text () obiect.
Până în prezent, orice suprapunere între forme a ascuns complet forma de fund. Singura modalitate de a păstra forma de fund vizibilă a fost să facă toate formele deasupra ei parțial transparente.
Uneori, ați putea dori rezultatul final după ce suprapunerea diferitelor forme să respecte anumite reguli. De exemplu, este posibil să se afișeze numai culoarea mai deschisă sau mai închisă în cazul în care formele se suprapun.
Konva vă permite să specificați câteva valori pentru a determina cum ar trebui să se amestece culorile formelor suprapuse folosind globalCompositeOperation proprietate. Puteți citi documentația despre MDN pentru a afla mai multe despre proprietate și despre toate valorile posibile.
În exemplul următor, am aplicat un mod diferit de amestecare fiecăruia dintre dreptunghiurile plasate în colțul dreptunghiului central.
var canvasWidth = 600; var canvasHeight = 400; vară etapă = nou Konva.Stage (container: "exemplu", lățime: canvasWidth, înălțime: canvasHeight); var stratul A = noul Konva.Layer (); var rectCenter = nou Konva.Rect (x: 225, y: 125, lățimea: 150, înălțimea: 150, umpleți: "rgb (255, 100, 0)"); var rectA = noul Konva.Rect (x: 125, y: 25, lățimea: 150, înălțimea: 150, umpleți: "rgb (0, 200, 100)", globalCompositeOperation: "lighten"); var rectB = nou Konva.Rect (x: 325, y: 25, lățimea: 150, înălțimea: 150, umpleți: "rgb (0, 200, 100)", globalCompositeOperation: "darken"); var rectC = nou Konva.Rect (x: 125, y: 225, lățime: 150, înălțimea: 150, umplere: "rgb (0, 200, 100)", globalCompositeOperation: "hue"); var rectD = nou Konva.Rect (x: 325, y: 225, lățimea: 150, înălțimea: 150, umpleți: "rgb (0, 255, 0)", globalCompositeOperation: "xor"); stratA.add (rectCenter, rectA, rectB, rectC, rectD); stage.add (layerA);
Culoarea dreptunghiului din stânga sus este rgb (0, 200, 100), iar culoarea dreptunghiului central este rgb (255, 100, 0). Cand uşura modul de amestecare este aplicat, rgb componentele ambelor culori sunt comparate individual, iar valorile mai mari pentru fiecare componentă sunt folosite pentru a obține culoarea finală. În cazul nostru, culoarea finală pentru colțul din stânga sus devine rgb (255, 200, 100).
Cand întuneca modul de amestecare este aplicat, rgb componentele ambelor culori sunt comparate individual, iar valorile mai mici pentru fiecare componentă sunt folosite pentru a obține culoarea finală. În cazul nostru, culoarea finală pentru colțul din dreapta sus devine rgb (0, 100, 0).
Cand nuanţă modul de amestecare este aplicat, luma și croma culorii de fund sunt combinate cu nuanta culorii de top. Acesta este motivul pentru care culoarea finală rămâne în continuare verde, dar devine mai ușoară. Cand XOR amestec este aplicat, culoarea finală devine transparentă în toate locurile de suprapunere.
În acest tutorial, am învățat cum să umplem o formă cu gradienți liniari sau radiali în loc de culori solide. De asemenea, am învățat cum să aplicăm umbrele la diferite forme și să le facem parțial transparente folosind opacitate proprietate. Secțiunea finală vă arată cum să utilizați modurile de amestecare pentru a schimba culoarea finală după ce două forme se suprapun.
Dacă aveți întrebări legate de acest tutorial, vă rugăm să anunțați-mă în comentarii. Următorul tutorial final al seriei vă va învăța cum să legați evenimentele de diferite forme în Konva.
Accentsconagua