Skripts vektoru objektu pārkrāsošanai fona krāsā pamatā zem tā (testēšana ir pabeigta). Mobile lietojumprogramma

Šodien mēs piedāvājam noderīgu skriptu Adobe Illustrator. To izveidoja talantīgs Ukrainas skriptu un plug-ins Adobe Illustrator un Mans draugs - Yaroslav Tabachkovsky (Jems), kas ir pazīstams arī kā bezmaksas acu torentora spraudņa izstrādātājs. Randomwatchesfill skripts izlases kārtībā krāsas izvēlētos objektus krāsās izvēlēti Swatches paletē.

Jūs varat lejupielādēt lejupielādes skriptu bez maksas lejupielādes pogā sākumā vai beigās šo pārskatu.

Novēlīsim skriptu uz šādu mapi, piemēram:

Windows: C: Programma Faili \\ Adobe \\ Adobe Illustrator CS5 \\ T IS \\ _GB SCRIPTS

Mac: Lietojumprogrammas / Adobe Adobe Illustrator CS5 Scripts \\ _GB

Par piemēru izlases swatches aizpildīt skriptu, ņemiet vektora darbu, kas sastāv no dažādiem monofoniskiem objektiem.

Es pievērstu jūsu uzmanību tam, kādiem objektiem, uz kuriem tiks piemērots skripts, jābūt nepilnīgam un izceltam. Nesņemot atlasi, atveriet Swatches paneli. Izmantojot Ctrl / Command taustiņu, izvēlieties krāsu swatches no Swatches palete, kas jāizmanto, lai krāsotu objektus.

Mēs izmantojam Randomwatchesfill Script, par kuru dodaties uz failu\u003e Skripti\u003e Randomwatchesfill. Tā rezultātā mēs iegūstam krāsainus objektus, kas krāsoti nejaušā secībā.

Šo skriptu var piemērot gan visam vektora darbam, gan vairākiem objektiem. Izmantojot Lasso Tool (Q) rīku, izvēlieties vairākus objektus un izmantojot Ctrl / Command taustiņu, izvēlieties Krāsas no Swatches palete, kurā mēs krāsot objektus.

Tā rezultātā vektora darba daļa tiek krāsota nejaušā secībā izvēlētajās krāsās.

Jūs varat eksperimentēt ar krāsām, gradientu aizpildījumu vai modeļus Swatches panelī un redzēt, kādus oriģinālos rezultātus var sasniegt. Es personīgi vēlos pateikties YEMZ par šo skriptu un ceru, ka tas būs noderīgs jūsu ikdienas radošajā darbā, un jūs maksāsiet mazāk laika, lai ikdienas tehniskos jautājumus.

Nosaukums neko skaidro, tā ir taisnība. Labāk apskatīt attēlu:

Kā redzams, tas ir netieši trīs soļi: atrast jebkuru fonu, zīmēt virs vektora skaitļiem, sāciet skriptu un saņemt pārkrāsotus skaitļus. Lai nodrošinātu, ka tas aizņem ilustratoru, kas nav zemāka par CS6, un es domāju, ka kāds (verificēts CS3) Photoshop. Bez Photoshop tas nedarbosies. Jā, un būs nepieciešama pacietība)

Savā ziņā, šis skripts patiešām ir mēģinājums veikt analogu funkcionalitāti skripteris (krāsu rastra). Mums ir tikai prātā, ka es viņu redzēju tikai attēlos no oficiālās vietnes un nekad reālā darbā, un es nezinu, kā viņš faktiski strādāja (izņemot to, ka daudz ātrāk) un kādas iespējas bija. Tas, ko es darīju, ir tieši titulā ierakstītā uzdevuma īstenošana, tādā formā, kādā es to varēju saprast, un izmantojot tikai iebūvētās skriptu iespējas.

Tagad nedaudz vairāk par katru posmu:
1. Fona - fons var būt jebkurš, rastra vai vektors. Tas var būt gan ciets, gan būt kaut kas kolāža. Tas ir svarīgi tikai, ka skriptu skripts izskatīs visu, kas atrodas zemākajā slānī.

2. Vector objekti - tas ir tas, kas būs pārkrāsojums. Būtībā mēs runājam par slēgtiem ceļiem, kas veido jebkuras formas. Savienojumi nav pārbaudījuši, es domāju, ka tie tiks ignorēti. Skaitļus var apvienot grupās, tostarp daudzpakāpju. Var būt maskēts (tas ir nepieciešams tikai, lai risinātu prātu, ka tas būs pārkrāsots, un tas, ka "slēpta" maska, un tas ir laiks, par zemāko). Pārkrāsojums būs tas, kas atrodas uz augšējā slāņa. Slāņi starp pirmo un pēdējo tiks ignorēti.

3. Skripts un faktiski viņa darbs. Photoshop ir jāsāk pirms skripta uzsākšanas. Kādā gadījumā skripts to paliks pats, bet tikai laiks ir lieks. Nav nepieciešams piešķirt neko, ja fons un objekti ir gatavi un atrodas uz slāņiem, un .. ilgi jāgaida. Šeit ir karoti tara, šis process ir garš. Es nemēģināšu atturēt tehniskās detaļas, problēma noteikti ir tikai manā nežēlīgā laikā. Viens vai otrs, lieta ir tieši tas gadījums. Piemērs tam, ko attēlā galvenajā tika veikta apmēram 10 minūtes, un tajā nedaudz vairāk nekā 400 sešstūris. Tiem. Aptuveni 1,5 sekundes objektam. Ja procesā ir neveiksmes, pārkrāsošanas laiks palielinās. Tūlīt pēc palaišanas skripts piesaistīs, cik daudz laika tas būs nepieciešams un ziņots. Bet tas nebūs iespējams atteikties (līdz šim).
Otrais karoti lido, bet tikai Windows datoru īpašnieki - jūsu process izskatīsies kā ilustrators (es rakstīšu "neatbild"). Photoshop, iespējams, iesaldēs pārkrāsošanas fonu), bet, lai saprastu visu slikti vai vienkārši izlikās, es pievienoju skaņas displeju - sistēmisku BIIP pēc katra 10 pārkrāsota objekta. Ja dzirdat šo BIP (vai skaņa ir ieslēgta), tad skripts darbojas, jums vienkārši jāgaida. Patiesībā, dators nav pakārt, jūs varat atvērt pārlūkprogrammu)
Un Makovodas varēs novērot pārkrāsošanas procesu, objektu aiz objekta.

Daži vispārīgāki vārdi:
Aizpildīšanas krāsa nav ņemta no viena punkta, bet lieluma lieluma vidū ir nedaudz mazāks nekā pārkrāsota objekta robežas lielums.
Pārkrāsošanas un fona objektiem ne vienmēr ir jāatrodas Arted, tas nav svarīgi. Skriptu darbības laikā artboard izmērs tiks koriģēts visiem redzamiem foniem un mērķa objektiem, un pēc pabeigšanas, atgriezās tās vietās. Tāpēc, ja mērķa objekts nav uz fona fona, un ārpus Artorizācijas - tas visticamāk krāsots baltā krāsā, izņemot to, ka tas nedaudz piesāršos tuvu vidējo krāsu (postenis) virs).

Pēc atsauces zem skripta un vienkārša testa piemērs. Labāk sākt ar viņu.
Saite:https://yadi.sk/d/agnobikymipbx
Beta testēšana ir pabeigta, pateicoties visiem, kas mēģinājuši!
Ar aktīviem testētājiem mēs turpināsim dominējošo režīmu.

Tas ir beta versija, vai būs uzlabojumi un papildus iespējas Atkarīgs no tā, vai kāds atradīs nekādas kļūdas un nāks klajā ar jaunām funkcijām)
Skripta ideja deva man art_of_sun, par kuru viņa ļoti pateicos jums! Ja kāds cits ir idejas - Laipni lūdzam!

Vai tā ir noderīga rotaļlieta? Discipers dažādi un bez manis ir darīts jau, bet varbūt tas var būt kaut kā interesantāk izmantot? Vai nē? Kas domā, kas ir konkurēt)

objektu. Btn.cvet pogas nosaukums). Lai iegūtu atslēgu rāmi, izveidojiet skriptu:

var cvet: colorsFormform.colortransform; btn.cvet.Addeventlistener (Mouseevent.Click, F); Funkcija F (notikums: Mouseevent): Void (cvet.color \u003d 0x0000FF; rol.transform.colortransform \u003d cvet)

Skripta izmaiņas var veikt šādos fragmentus, kas izolēti sarkanā krāsā: rullīša (ROL), pogas (BTN.CVET), mainīgā (CVET), funkciju (F) un krāsu vērtībā (0000FF).

Mēs analizēsim skripta darbu:

  • Roller Rol (kā arī visām rakstzīmēm) ir pārveidot īpašumu, kas satur informāciju par dažādas transformācijasPiemērojams objektam (piemēram, ģeometrisko reklāmguvumi, krāsu iestatījumi). Lai izmantotu reklāmguvumus, kas saistīti ar objekta krāsu uzdevumu, tiek izmantots ColorRansform īpašums.
  • Izveidots jauns CVET mainīgais saņem Rol rullīšu rekvizītu vērtību, kas saistīti ar krāsu iestatījumiem.
  • Mēs mainām krāsu īpašuma krāsu vērtību jaunam:

    0000FF - heksadecimāls noformējums krāsu RGB formātā: sarkanā, zaļā un zilā krāsā ir iestatīti divciparu skaitļu veidā heksadecimālā kodā (16-tiriskā koda arābu skaitļos 0-9, un latīņu burti A, B, C , D, E, F tiek izmantoti, izvirzot analogus skaitļu 10, 11, 12, 13, 14 un 15). Objekta rezultātu krāsu iegūst, sajaucot trīs krāsas norādītajās proporcijās.

  • Mēs atjaunināt Rol objekta ColorRansForm īpašumu (ražot krāsu korekciju).

Praktiskais darbs numurs 1

Izveidojiet veltni uz skatuves (objekts iekrāsošanai - ar nosaukumu Rol) un 2 pogām (btn.cvet1 un btn.cvet2), simbolizējot 2 krāsas krāsu paletē. Nospiežot katru pogu, ar pogas fiksētu riteni. Izskats Pogas jārunā par savu uzdevumu (teiksim, pogas krāsa atbilst krāsas krāsas krāsai).

Skriptā jums būs nepieciešams, lai izveidotu mainīgo, lai lasītu krāsu objekta un darbu, lai tas būtu viens no divām krāsām, atkarībā no pogas nospiests:

var cvet: colorsFormform.colortransform; btn.cvet1.Addeventlistener (Mouseevent.Click, F1); Funkcija F1 (notikums: Mouseevent): void (cvet.color \u003d 0x0000FF; rol.transform.colortransform \u003d cvet;) btn.cvet2.Addeventlistener (Mouseevent.Click, F2); F2 funkcija (notikums: Mouseevent): Void (cvet.color \u003d 0x00ff00; roll.Transform.colortransform form \u003d cvet;)

Praktiskais darbs Nr. 2.

Izveidojiet 2 pogas uz skatuves (objektiem iekrāsošanai - ar nosaukumiem ROL1, ROL2) un 2 pogas (simbolizējot 2 krāsas krāsu paletē - ar btn.cvet1 un btn.cvet2 nosaukumiem). Nospiežot krāsu paletes pogu - izvēlieties Krāsu; Nospiežot objektu pogas krāsošanai, lai tos iekrāsotu izvēlētajā agrākajā krāsā. Krāsu palešu pogām vajadzētu runāt par savu mērķi.

Lai krāsotu objektu, jums ir jāveic 2 soļi:

  • izvēlieties krāsu;
  • izvēlieties objektu, kas tiks krāsots izvēlētajā krāsā.

    var cvet: colortransform forma.coltransform; btn.cvet1.Addeventlistener (Mouseevent.Click, F1); Funkcija F1 (notikums: Mouseevent): void (cvet.color \u003d 0x0000FF;) btn.cvet2.Addeventlistener (Mouseevent.Click, F2); F2 F2 (notikums: Mouseevent): Void (cvet.color \u003d 0x00ff00;) ROL1.Addeventlistener (Mouseevent.Click, F3); Funkcija F3 (Pasākums: Mouseevent): Void (rol1.transform.colortransform \u003d cvet;) rol2.addeventlistener (mouseevent.click, F4); Funkcija F4 (notikums: Mouseevent): Void (rol2.transform.coloporransform \u003d cvet;)

Krāsošana objektiem, neizanalizējot dažādu objektu krāsu, kā likums, nav jēgas. Izveidojot lietojumprogrammu, kurā izmanto objektu krāsošanu kā atlases rīku Šis objekts, Tas ir nepieciešams, lai analizētu krāsas, kas iegūtas ar objektiem darbības laikā. Pastāvēt programmatūra Objekta krāsas analīze.

Mēs izskatīsim piemēru darbam, kurā krāsu analīze tiek veikta, "iegaumējot" izvēlēto krāsu attēla krāsai (un nevis ar "analīze" jau krāsotas skaitļa krāsu).

Pieņemsim, ka ir nepieciešams atzīmēt kvadrātu, trīsstūri un rhombles no ģeometrisko skaitļu kopas šādi: krāsot kvadrātu vienā krāsā, trīsstūri ir atšķirīgi utt.


Fig. 22.1.Lietojumprogrammas interfeiss "Krāsu analīze"

Skripts tiek paziņots mainīgais veids Numurs:

  • c (informācijas glabāšanai par izvēlēto krāsu), \\ t
  • fla.1, Fla.2, Fla.3 (informācijas glabāšanai par iegūto krāsu ar katru apli).

"Pārbaudes" poga ir novietota uz skatuves un dinamiskā teksta laukā (TTT), kurā tiek parādīta informācija par pareizo / nepareizo apļa krāsu.

Attiecībā uz visu skaitļu pareizu krāsu (loģiskā izpausme filiāles komandā būs taisnība, kad patiesības ir visas trīs vienkāršas loģikas izpausmes - pirmais un (&&) otrais un (&&) trešais) teksta īpašums dinamisks teksta lauks TTT ir piešķirts "Verno", pretējā gadījumā - "Ne Verno":

... pr.addeventlistener (mouseevent.click, F7); Funkcija F7 (Pasākums: Mouseevent): Void (ja ((FLA.1 \u003d\u003d 1) && (FLA.2 \u003d\u003d 2) && (FLA.3 \u003d\u003d 3)) (ttt.Text \u003d "verno";) (ttt.text \u003d "ne verno";))

Īsas lekcijas:

Simbam ir pārveidošanas īpašums, kas satur informāciju par dažādām pārvērtībām, kas piemērotas objektam (piemēram, ģeometriskos reklāmguvumus, krāsu iestatījumus). Lai izmantotu reklāmguvumus, kas saistīti ar objekta krāsu uzdevumu, tiek izmantots ColorRansform īpašums.

Personīgi es izmantoju šo skriptu, veidojot jauno spraudni, lai pasūtītu zvanu. Šī palete palīdz lietotājam izvēlēties pogas un pasūtījuma veidlapas krāsu. Uz ilgu laiku es paņēmu vēlamo skriptu Un kā man tas ir viens no labākajiem. Turklāt viņš, kā es teicu, ir viegli implantēts. Piemērs tam, kas notiks no jums, kā rezultātā var apskatīt zemāk redzamajā piemērā. Izvēlieties krāsu kursoru uz gradienta laukiem.

Lai padarītu šādu paleti, jums ir nepieciešams veikt 4 soļus. Sāksim kārtībā ar atzīmi Html. Jums ir nepieciešams pievienot to, kur jūs vēlaties redzēt paleti pati.

Galvenais vecāku bloks ar iidi - krāsu atlasītājs.. Tā noslēdza trīs galvenos blokus, kas iekšā ir meitasuzņēmumi, kas rada mūsu paletes struktūru. Analizēsim tos secībā attiecībā uz zemāk redzamo attēlu.

  1. Bloķēt ar IDI picker-wrapper. - Tas ir pirmais bloks. Atbildīgs par kvadrāta izvadi ar vienas krāsas slīpumu, lai izvēlētos tās toni. Iekšpusē to bloks ar pašu gradientu un bloku, kas ir atbildīgs par rādītāju.
  2. Bloķēt ar IDI pcr-wrapper. - Otrais bloks ir atbildīgs par bloku, kas parāda visas krāsas gradienta formā. Bloka iekšpusē ar gradientu un bloku, kas parāda slīdni, kas pārvietojas uz augšu.
  3. LU saraksts ar iidi krāsu vērtības. - Ir vairāki priekšmeti tajā. Pirmie trīs, diagrammā tie ir numurēti - 3. tie rada ziedu kodus trīs formātos - RGB, HSV, HEX.
  4. Attēlā bloks ir tāds, ka 4. numurā tas ir viens no iepriekšējā saraksta elementiem. Tas ir pēdējais Li punkts. Iekšpusē bloķēt ar iidi pcr_bg.. Šī vienība parāda pašreizējo izvēlēto krāsu.

Jūs varat, atkarībā no jūsu vajadzībām, mainīt vietas vai noņemt tos elementus, kas nav nepieciešami. Kad pilnīgi pabeigta ar paletes uzstādīšanu, tad jūs varat saprast sevi sīkāk un noteikt, kā mainīt vienu vai citu paletes elementu.

Otrais solis paletes uzstādīšanā pievienos stilus CSS.. Jūs tos pievienojat kā parasti jūsu vietnes stila failā, labi, vai šis vienums, uz kuru pievienojat šo krāsu paleti.

# Color-Picker (Margin: 25px auto; Platums: 450px;) # Krāsu vērtības (displejs: bloks; saraksta stils: Nav; Krāsa: # 222; Peldēšana: pa kreisi; Margin: 0 0 0 15px; polsterējums: 5px; teksta izlīdzināšana: pa kreisi;) #pcr_bg (augstums: 135px;) .picker-wrapper, .pcr-wrapper (pozīcija: relatīvais; pludiņš: pa kreisi;) .picker-indikators, .pcr indikators (pozīcija: absolūts; Pa kreisi: 0; augšpusē: 0;) .picker, PCR (kursors: crosshair; pludiņš: pa kreisi;) .cp-noklusējuma. Picker (platums: 200px; augstums: 200px;) .cp-noklusējuma .pcr (platums: 30px ; Augstums: 200px;) .cp-noklusējuma .PCR-wrapper (pa kreisi: 10px;) .cp-noklusējuma. Picker-indikators (platums: 5px; augstums: 5px; robeža: 2px cietā tumšā; -moz-robeža- RADIUS: 4PX; -O-robežu-rādiuss: 4px; -webkit-robežu-rādiuss: 4px; robežu-rādiuss: 4px; dūmainība :.5; -ms-Filter: "Progid: dximagetransform.microsoft.alpha (necaurredzamība \u003d 50 ) "; Filtrs: progids: dximagetransform.microsoft.alpha (necaurredzamība \u003d 50); Filtrs: Alpha (necaurredzamība \u003d 50); fona krāsa: balta;) .cp-noklusējuma. Perm-indikators (platums: 100%; augstums: augstums: 10px; lef. T: -4px; Necaurredzamība: .6; -MS-filtrs: "Progid: dximagetransform.microsoft.alpha (necaurredzamība \u003d 60)"; Filtrs: progids: dximagetransform.microsoft.alpha (necaurredzamība \u003d 60); Filtrs: Alpha (necaurredzamība \u003d 60); Robeža: 4px cietā lightblue; -Moz-robežu-rādiuss: 4px; -O-Robežu rādiuss: 4px; -Webkit-robežu rādiuss: 4px; Robežu rādiuss: 4px; Fona krāsa: balta; )

Es ne krāso CSS. Kā viņš teica, palete ir maz ticams, lai sāktu iesācēju, un pieredze ar CSS ir pazīstams. Es domāju, ka jūs risināsiet to, kas ir atbildīgs parametru. Dodieties uz nākamo soli.

Trešais punkts, kas jums jādara, ir savienot failu, kas satur krāsu paletes skriptu. Pati fails būs arhīvā ar šī panta pirmkodu. Jūs varat lejupielādēt to, atsaucoties tālāk.

Failu sauc par colorpicker.min.js.. Pievienojiet to galvenē vai vietnes pagrabā, ja attēlojat paleti uz vietas. Ja modulī, spraudnis utt., Tad, kad pievienojat atlikušos skriptus. Protams, norādiet pareizo ceļu uz failu.

Nu, pēdējais solis ir savienot skriptu, kas pārvaldīs izejas rezultātu no laister vērtībām, labi, tā uzsāks savu darbu kā tādu. Skripts ir labākais pieslēgts tūlīt pēc paletes bloka ar HTML.

Dažus mirkļus var konfigurēt skriptu. Ar brīnīsimies viņiem. Ko var mainīt, sākas ar 9. rindu.

  • 9. līnija - bloks ar iidi - hex.Tiek piešķirta Hex formāta krāsu vērtība. Ka jūs domājat sarakstā, ka attēlā virs 3, pirmajā rindā. Tādējādi jūs varat piešķirt krāsu kodu jebkuram blokam par tās produkciju.
  • 10. līnija - bloks ar iidi - rgb.Piešķir vērtību RGB formātā. Visi līdzīgi iepriekšējam punktam.
  • 11. līnija - bloks ar iidi - hSV., piešķir vērtību HSV formātā.
  • 13. līnija - bloks ar iidi - pcr_bg.Stils ir piešķirts atbilstošā Hex formāta fona formā. Tas nozīmē, ka laukums, kas parāda pašreizējo krāsu. Tāpat jūs varat izņemt krāsu no paletes, piemēram, fona vietnes noteiktā bloka un tā tālāk.
  • 15., Pēdējā rinda, nosaka noklusējuma krāsu. Jūs varat norādīt savu, Hex formātā.

Tas būtībā ir viss savienojums ar krāsu paleti. Kad viņš teica pašā sākumā, jaunpienācējs var nepalīdzēt, tas ir paredzēts vairāk pieredzējušiem tīmekļa pārziņiem. Es ceru, ka viņa jums palīdzēs.

Tas viss, paldies par jūsu uzmanību. 🙂

Šis bloks domā, būs ļoti noderīga, īpaši gadījumos, kad jums ir nepieciešams to veidot savā vietnē. Šī krāsu atlasītāja vienība darbojas ar JavaScript. Tātad, aplūkosim, kā to pievienot vietnei un ievērojamajam šim jquery spraudnim.

Darbs ar kodu

Pirmkārt, mums ir nepieciešams savienot JavaScript un CSS failu.s. Neaizmirstiet rediģēt CSS failu un labot ceļus uz attēliem (ja nepieciešams), saskaņā ar jūsu vietnes tēmu.

Xhtml

Iestatījumu spraudnis

Pielāgoti spraudņi iestatījumi (pēc izvēles).

  • eventName - vēlamais notikums, lai izsauktu krāsu izvēles funkciju, pēc noklusējuma: noklikšķiniet uz ".
  • krāsu - noklusējuma krāsa. Virkne hex krāsu vai hash par RGB un HSB ((R: 255, R: 0, B: 0)), noklusējuma: "FF0000".
  • dzīvoklis - nekavējoties parādiet krāsu izvēles vienību vai tikai klikšķus, noklusējuma vērtība ir nepatiesa.
  • livePreview - pēc noklusējuma TRUE.
  • onshow - atzvanīšanas funkcija tiek aktivizēta, kad ir parādīta krāsu izvēles vienība.
  • onbeforeshow - atzvanīšanas funkcija darbojas pirms krāsu izvēles vienības parādīšanas.
  • onhide - atzvanīšanas funkcija tiek aktivizēta, kad krāsu izvēles vienība ir paslēpta.
  • onchange - atzvanīšanas funkcija tiek aktivizēta, kad mainās krāsu izmaiņas.
  • onSubmit - Atzvanīšanas funkcija tiek aktivizēta, izvēloties krāsu.

Es ceru, ka jums patika šis spraudnis. Es novēlu jums panākumus un attīstību uz jūsu vietni!

Šī mācība ir sagatavota vietnes komandai.
Avota avots: http://www.eyecon.ro/colorpicker/
Tulkots: Vladislav Bondarenko