Búa til strigaforrit er nýtt, við getum jafnvel búið til leiki með því, það er stutt í öllum helstu vafra bæði skrifborð og farsíma, og það gerir það raunhæfanara lausn en að nota Flash.
Í þessari einkatími ætlum við að nota strigaþáttinn til að búa til einfalda litaspilara sem krefst ekki Flash, allt sem þú þarft er textaritill og vafra.
Áður en við byrjum skaltu skoða hvað við munum byggja hér. Þú getur líka sótt skrárnar hér. Athugaðu að ef þú ert að fara að prófa kynningu á staðnum, þá þarftu að nota annan vafra en Chrome; Öryggismodill Króm þýðir að handritið mun aðeins vinna á netinu.
Í þessu dæmi mun HTML vera mjög lágmark, allt sem við þurfum til þess að litavalstjórinn sé að vinna er strigaþáttur og einhvers staðar til að sýna valda litinn okkar í RGB og HEX sniðum, þannig að allt sem við þurfum er þetta:
HEX: RGB: Þar sem við munum nota bakgrunnsmynd með litinn bretti, gerði ég striga mína breidd og hæð myndarinnar og gildin fyrir selecetd litinn birtast í inntakinu til að auðvelda valið.
Þú ættir einnig að bæta jQuery við síðuna þína þar sem við munum nota nokkur jQuery kóða.
Það fyrsta sem við þurfum að gera til að gera litavalið verkið er að fá striga og samhengi þess og að gera það sem við þurfum er lína af kóða, eins og svo:
var canvas = document.getElementById('canvas_picker').getContext('2d');Nú þegar við höfum fengið striga frumefni og samhengi þess, getum við byrjað með því að setja myndina sem bakgrunn striga. Til að gera þetta þurfum við að búa til myndar mótmæla og búa til vefslóð myndarinnar. Þegar þessi mynd hefur hlaðist þurfum við að draga það inn í striga:
var img = new Image();img.src = 'image.jpg';$(img).load(function(){canvas.drawImage(img,0,0);});Svo langt svo gott, ekki satt?
Jæja, þetta er sá hluti þar sem við þurfum að skilgreina hvað gerist þegar þú smellir einhvers staðar í striga og ef þú hugsar um það þarftu fyrst að fá bendilinn á notandanum í striga til að sjá hvar þeir smella á, eins og svo:
$('#canvas_picker').click(function(event){var x = event.pageX - this.offsetLeft;var y = event.pageY - this.offsetTop;Með þessum tveimur línum kóða getum við séð hvar notandinn smellti og það sem við erum að gera er að fá cordinates þar sem notandinn smellti og síðan dregið úr því móti á striga. Það mun segja okkur hvar notandinn smellti miðað við stöðu striga.
Næsta skref okkar er að fá RGB gildi þess sem notandinn smellir á og til að gera það sem við þurfum að nota til að nota getImageData og hengja x og y stöðu smella:
var imgData = canvas.getImageData(x, y, 1, 1).data;var R = imgData[0];var G = imgData[1];var B = imgData[2];Við höfum nú þessi gildi geymd inni R, G og B breytur en við viljum birta þessar upplýsingar til notandans á þann hátt sem þeir geta auðveldlega lesið það þannig að við þurfum að búa til RGB breytu sem heldur þessum þremur gildum separeted með kommum og síðan kynna þetta sem gildi einnar innsláttarreitna:
var rgb = R + ',' + G + ',' + B;$('#rgb input').val(rgb);});Og ef þú prófar það núna hefur þú nú þegar fullkomlega hönnuð litaspjald sem veitir RGB gildi hvar sem þú smellir, en til þess að gera þetta svolítið betra getum við bætt við aðgerð frá Javascripter sem breytir RGB gildi til HEX gildi; aðgerðin er:
function rgbToHex(R,G,B) {return toHex(R)+toHex(G)+toHex(B)}function toHex(n) {n = parseInt(n,10);if (isNaN(n)) return "00";n = Math.max(0,Math.min(n,255));return "0123456789ABCDEF".charAt((n-n%16)/16) + "0123456789ABCDEF".charAt(n%16);}Nú þegar við höfum þessa virkni þurfum við að gera allt sem við þurfum að gera til að kynna HEX gildin. Framkvæma aðgerðina með RBG gildi okkar og þá setja gildi inntaksins til að vera HEX lit með # áður og með aðgerðinni sem þegar er til staðar er alveg einfalt:
// after declaring the RGB variablevar hex = rgbToHex(R,G,B);// after setting the RGB value$('#hex input').val('#' + hex);Colorpicker demo HEX: RGB: Ég vona að með þessari einkatími hafiðu áttað þig á því að það er hægt að búa til forrit með striga. There ert a einhver fjöldi fleiri háþróaður apps þarna úti, fólk er jafnvel að gera leiki með striga svo það er hlutur að kanna vegna þess að þú getur byggt nokkur ótrúleg hluti með það.
Hvaða aðrar notar hefur þú fundið fyrir Canvas? Hvað viltu geta notað það til? Láttu okkur vita í athugasemdunum.