Html կտրվածքի պատկեր: Կտրեք պատկերը CSS-ի միջոցով: Ինչ կա ներսում

Դիտարկենք երեքը պարզ ուղիներ, որը կարող է օգտագործվել վեբկայքում պատկերի միայն մի մասը ցուցադրելու համար: Նկատի ունեցեք, որ այս մեթոդների օգնությամբ պատկերը բառացի իմաստով չի կտրվում որոշակի չափի, այլ ցուցադրվում է միայն այն հատվածը, որը մենք պետք է տեսնենք, և ավելորդ հատվածը թաքցվում է:

Այս մեթոդները կարող են շատ օգտակար լինել, եթե անհրաժեշտ է փոխել պատկերի չափը կամ ստեղծել նախադիտում, օրինակ՝ նորությունների հոսքում և այլն:

Մեթոդ 1. Օգտագործելով բացասական լուսանցքներ

Պատկերը պետք է տեղադրվի մայր տարրում, մեր դեպքում՝ div. Մայր տարրը պետք է լինի լողացող տարր (կամ սահմանված լայնությամբ): Մեթոդը չի աշխատի բլոկի մակարդակի կամ ամբողջ լայնության տարրերի վրա:

Եկեք բոլոր չորս կողմերի համար սահմանենք բացասական լուսանցքներ՝ վերև (վերև), աջ (աջ), ներքև (ներքև) և ձախ (ձախ): Բացասական լուսանցքները որոշում են, թե որքանով է կտրված մայր տարրի պատկերը յուրաքանչյուր ուղղությամբ: Այնուհետև մենք կսահմանենք մայր տարրի գերհոսքի հատկությունը որպես թաքնված՝ թաքցնելու կտրված պատկերի տարածքի հետևում գտնվող լուսանցքները:

Բուսաբուծություն

բոց: ձախ;

վարարում `թաքնված;

Crop img

լուսանցք՝ -70px -50px -160px -175px;

Մեթոդ 2. Բացարձակ դիրքավորման օգտագործում

Օգտագործելով այս մեթոդը, մենք սահմանում ենք մայր տարրի լայնությունն ու բարձրությունը, իսկ դիրքի հատկությունը հարաբերական: Լայնությունը և բարձրությունը որոշում են ցուցադրվող դաշտի չափերը: Ծնող տարրի ներսում պատկերի համար դրեք դիրքավորման հատկությունը բացարձակ: Այնուհետև, օգտագործելով վերին և ձախ հատկությունները, մենք սահմանում ենք, թե նկարի որ հատվածը ցուցադրվի:

Բուսաբուծություն

բոց: ձախ;

վարարում `թաքնված;

պաշտոնը` հարաբերական;

լայնությունը՝ 270px;

բարձրությունը՝ 260px;

Crop img

դիրքը `բացարձակ;

վերև՝ -70px;

ձախ: -175px;

Մեթոդ 3. Օգտագործելով սայթաքման հատկությունը

Այս մեթոդը ամենապարզն է, քանի որ clip հատկությունը որոշում է տարրի այն մասը, որը պետք է ցուցադրվի: Բայց այս մեթոդը երկու թերություն ունի.

Նախ, կտրված տարրը պետք է բացարձակապես տեղադրվի: Այսպիսով, մենք պետք է ավելացնենք լրացուցիչ տարր, հաշվարկենք պատկերի տեսանելի տարածքի չափը, ավելացնենք այդ չափը և սահմանենք float հատկությունը ծնողին:

Երկրորդ, տեսանելի տարածքի չափը չի կրճատվում մինչև կտրված մասի չափը, այլ մնում է ամբողջ պատկերի չափին (կտրված մասից դուրս գտնվող տարածքը միայն թաքնված է): Մենք պետք է օգտագործենք բացարձակ դիրքավորում՝ տեսանելի տարածքը ծնողի վերին ձախ անկյուն տեղափոխելու համար:

Բուսաբուծություն

բոց: ձախ;

պաշտոնը` հարաբերական;

Իմացեք, թե ինչպես չափափոխել և կտրել պատկերները օգտագործելով JavaScriptև HTML5 Canvas տարր՝ օգտագործելով վերահսկիչները, որոնք կարող եք տեսնել լուսանկարների խմբագրման հավելվածներում.

Այս հոդվածում ես ձեզ ցույց կտամ, թե ինչպես կարելի է չափափոխել և կտրել պատկերները՝ օգտագործելով HTML5 տարրը

Կենդանի միջավայրում վեբկայքը կամ հավելվածը կարող է օգտագործել այս տեխնիկան՝ նախքան բեռնումը չափափոխելու և պրոֆիլի լուսանկար ստեղծելու համար:

Մենք կարող էինք դա անել սերվերի վրա, սակայն դա կպահանջի պոտենցիալ մեծ ֆայլերի փոխանցում, որը շատ ժամանակ կխլի: Փոխարենը, մենք կարող ենք փոխել պատկերի չափը հաճախորդի կողմից, նախքան այն բեռնվելը: Ինչը թույլ կտա ամեն ինչ անել շատ ավելի արագ։

Դա անելու համար մենք կստեղծենք HTML5 տարր

Բրաուզերների մեծ մասն արդեն աջակցում է այս մեթոդներին, այնպես որ դուք, ամենայն հավանականությամբ, կկարողանաք անմիջապես կիրառել այս տեխնիկան: Այնուամենայնիվ, դուք պետք է տեղյակ լինեք որոշ սահմանափակումների մասին, որոնք չեն աջակցվում բրաուզերների կողմից, ինչպիսիք են պատկերի որակը և կատարումը:

Շատ մեծ պատկերների չափափոխումը կարող է հանգեցնել բրաուզերի դանդաղեցման կամ որոշ դեպքերում նույնիսկ հավելվածի խափանման: Հետևաբար, իմաստ ունի ներբեռնվող ֆայլի չափի ողջամիտ սահմաններ սահմանել: Եթե որակը ձեզ համար կարևոր է, դուք կարող եք այս տեխնիկան անպատշաճ համարել, քանի որ զննարկիչը կնվազեցնի պատկերի որակը մշակման ընթացքում:

Գոյություն ունի մի շարք տեխնիկա, որոնք կարող են օգտագործվել կտավից չափված պատկերների որակը բարձրացնելու համար, սակայն, մենք դրանք չենք դիտարկի այս հոդվածում:

Դուք կարող եք տեսնել վերջնական արդյունքը այս ցուցադրությունում կամ կարող եք ներբեռնել ZIP արխիվը:

Դե, հիմա եկեք սկսենք:

Նշում

Մեր ցուցադրությունում մենք կսկսենք գոյություն ունեցող պատկերից.

Այսքանը: Սա այն ամբողջ HTML-ն է, որը մեզ անհրաժեշտ կլինի այս ցուցադրության համար:

CSS

CSS-ը նույնպես շատ նվազագույն է: Նախ, եկեք սահմանենք ոճերը չափափոխվող կոնտեյների և պատկերի համար.

Չափափոխել-կոնտեյներ ( դիրքը՝ հարաբերական; ցուցադրում՝ ներգծային-բլոկ; կուրսորը՝ տեղափոխել; լուսանցք՝ 0 ավտոմատ; ) .resize-container img (ցուցադրել՝ արգելափակել) ուրվագիծ՝ 2px գծիկ rgba (222,60,80,.9); )

Resize-handle-ne, .resize-handle-ne, .resize-handle-se, .resize-handle-nw, .resize-handle-sw ( դիրքը՝ բացարձակ; ցուցադրումը՝ բլոկ; լայնությունը՝ 10px; բարձրությունը՝ 10px; ֆոն՝ rgba(222,60,80,.9); z-ինդեքս՝ 999; ) .resize-handle-nw (վերևում՝ -5px; ձախ՝ -5px; կուրսորը՝ nw-resize;) .resize-handle- sw (ներքևում՝ -5px; ձախ՝ -5px; կուրսորը՝ sw-resize; ) .resize-handle-ne ( վերև՝ -5px; աջ՝ -5px; կուրսորը՝ ne-size; ) .resize-handle-se ( ներքևում՝ -5px; աջ՝ -5px; կուրսորը՝ չափափոխել;)

JavaScript

JavaScript-ը սկսում ենք որոշ փոփոխականներ սահմանելով և կտավը և թիրախային պատկերը սկզբնավորելով.

var resizeableImage = ֆունկցիա (image_target) ( var $container, orig_src = new Image(), image_target = $(image_target).get(0), event_state = (), սահմանափակում = false, min_width = 60, min_height = 60, max_width = 800, max_height = 900, resize_canvas = document.createElement ("կտավ"); )); resizeableImage ($ (". չափափոխել-պատկեր"));

Հաջորդը մենք ստեղծում ենք init ֆունկցիա, որը կկանչվի անմիջապես բեռնումից հետո: Այս ֆունկցիան պատկերը փաթաթում է տարայի մեջ, ստեղծում է չափափոխման բռնակներ և ստեղծում է բնօրինակ պատկերի պատճենը, որն օգտագործվում է չափափոխելու համար:

Մենք նաև վերագրում ենք JQuery օբյեկտը կոնտեյների տարրի համար փոփոխականին, որպեսզի կարողանանք ավելի ուշ մուտք գործել դրան և ավելացնել մկնիկի իջեցման իրադարձությունների լսող, որը հայտնաբերում է, երբ ինչ-որ մեկը սկսում է քաշել բռնակներից մեկը.

var resizeableImage = function(image_target) ( // ... init = function())( // Ստեղծել նոր պատկեր բնօրինակի src-ի պատճենով // Երբ մենք չափափոխում ենք պատկերը, մենք միշտ օգտագործում ենք այս պատճենը որպես հիմք orig_src .src=image_target.src ; // Ավելացնել չափափոխման մարկերներ $(image_target).wrap("

").նախքան(" ").նախքան(" ") հետո (" ") հետո (" "); // Ստացեք փոփոխականներ կոնտեյների համար $container = $(image_target).parent(".resize-container"); // Ավելացնել իրադարձություններ $container.on("mousedown", ".resize-handle", startResize) ; ); //... init();)

StartResize և endResize ֆունկցիաները զննարկիչին միայն հուշում են, որ սկսի հետևել, թե ուր է շարժվում մկնիկը և դադարեցնել հետևելը.

startResize = ֆունկցիա(e)( e.preventDefault(); e.stopPropagation(); saveEventState(e);$(document).on("mousemove", resizing);$(document).on("mouseup", endResize );); endResize = ֆունկցիա(e)(e.preventDefault();$(document).off("mouseup touchend", endResize);$(document)off("mousemove touchmove", resizing); );

Նախքան սկսենք հետևել մկնիկի դիրքին, մենք պետք է լուսանկարենք տարայի չափսերը և այլ հիմնական տվյալները:

Մենք դրանք պահում ենք event_state կոչվող փոփոխականում և այն ավելի ուշ օգտագործում ենք որպես ելակետ, երբ փոխում ենք բարձրությունը և լայնությունը.

saveEventState = ֆունկցիա(e)( // Պահպանել իրադարձության սկզբնական պարամետրերը և կոնտեյների վիճակը event_state.container_width = $container.width(); event_state.container_height = $container.height(); event_state.container_left = $container .offset().left ; event_state.container_top = $container.offset().top; event_state.mouse_x = (e.clientX || e.pageX || e.originalEvent.touches.clientX) + $(window).scrollLeft (); event_state.mouse_y = (e.clientY || e.pageY || e.originalEvent.touches.clientY) + $(window).scrollTop(); // Սա հարմարանք է շարժական սաֆարիի համար // Ինչ-ինչ պատճառներով , դուք չեք կարող ուղղակիորեն պատճենել դրա մեջ հպման հատկությունները, եթե (e.originalEvent.touches !== «չսահմանված») ( event_state.touches = ; $.each(e.originalEvent.touches, ֆունկցիա(i, ob)( event_state .touches[i] = (); event_state.touches [i].clientX = 0+ob.clientX; event_state.touches[i].clientY = 0+ob.clientY; )); ) event_state.evnt = e;)

Չափափոխման գործառույթն այն է, որտեղ տեղի է ունենում գործողությունների մեծ մասը: Այս ֆունկցիան անընդհատ կանչվում է, երբ օգտատերը քաշում է չափման բռնակներից մեկը: Ամեն անգամ, երբ այս ֆունկցիան կանչվում է, մենք ստեղծում ենք նոր լայնություն և բարձրություն՝ հաշվարկելով մկնիկի ներկայիս դիրքի և օգտագործողի քաշած անկյունի սկզբնական դիրքի միջև կապը.

Այնուհետև մենք ավելացնում ենք պատկերի չափը սահմանափակելու տարբերակ Shift ստեղնով կամ փոփոխականով անցնելիս:

Ի վերջո, մենք փոխում ենք պատկերի չափերը, բայց միայն այն դեպքում, եթե նոր լայնությունը և բարձրությունը գտնվում են նվազագույն և առավելագույն արժեքներփոփոխականներ, որոնք մենք դրել ենք սկզբում:

Նշում. Քանի որ մենք իրականում փոխում ենք պատկերի չափը, ոչ միայն բարձրության և լայնության ատրիբուտները, դուք կարող եք սահմանափակել, թե որքան հաճախ կարող է resizeImage կանչվել՝ կատարողականի նկատառումներով: Սա կոչվում է debouncing կամ throttling.

Պատկերի իրական չափափոխում

Դուք կարող եք պարզապես նկար նկարել՝ օգտագործելով drawImage-ը: Մենք նախ սահմանում ենք կտավի բարձրությունը և լայնությունը և միշտ օգտագործում բնօրինակ պատճենըլրիվ չափի պատկեր։ Այնուհետև մենք օգտագործում ենք toDataURL-ը կտավի վրա՝ վերջերս փոփոխված պատկերի Base64 կոդավորված տարբերակը ստանալու և այն էջում տեղադրելու համար:

Կտրման բաժինը տալիս է ամբողջական բացատրություն բոլոր տարբերակների համար, որոնք կարող են օգտագործվել drawImage մեթոդով.

resizeImage = ֆունկցիա (լայնություն, բարձրություն) ( resize_canvas.width = լայնություն; resize_canvas.height = բարձրություն; resize_canvas.getContext("2d").drawImage(orig_src, 0, 0, լայնություն, բարձրություն); $(image_target).attr( "src", resize_canvas.toDataURL("image/png")); );

Շատ հեշտ? Կա մեկ փոքր նախազգուշացում. պատկերը պետք է տեղադրվի նույն տիրույթում, որտեղ էջը կամ սերվերի վրա տարբեր աղբյուրների հետ փոխանակվելու ունակություն (CORS). Հակառակ դեպքում դուք կարող եք խնդիրներ ունենալ սխալների հետ»: վնասված կտավ«.

Չափափոխել տարբեր տեսանկյուններից

Այժմ դուք պետք է ունենաք գործող ցուցադրական տարբերակ: Բայց սա դեռ ամենը չէ։ Վրա այս պահին, այն դեռ չի աշխատում այնպես, որ չափափոխումը տեղի է ունենում այնպես, կարծես մենք քաշում ենք ներքևի աջ անկյունը, անկախ նրանից, թե որ անկյունից ենք չափափոխում պատկերը:

Մենք պետք է կարողանանք փոխել պատկերի չափերը ցանկացած տեսանկյունից: Դա անելու համար մենք պետք է հասկանանք մեր ցուցադրական մոդելի վարքագիծը:

Չափափոխելիս անկյունը, որը մենք քաշում ենք, ինչպես նաև դրա հարակից կողմերը, պետք է շարժվեն, մինչդեռ հակառակ անկյունը և նրա հարակից կողմերը պետք է մնան տեղում:

Երբ փոխում ենք պատկերի լայնությունը և բարձրությունը, աջ և ներքևի եզրերը կշարժվեն, իսկ վերին և ձախ եզրերը կմնան տեղում: Սա նշանակում է, որ լռելյայնորեն, պատկերները չափափոխվում են ներքևի աջ անկյունից:

Մենք չենք կարող փոխել այս լռելյայն վարքագիծը, բայց երբ չափափոխում ենք ցանկացած անկյունից, բացի ներքևի աջից, մենք կարող ենք փոխել ընդհանուր դիրքըպատկերն այնպես, որ թվում է, թե հակառակ անկյունը և հարակից եզրերը մնում են տեղում: Եկեք թարմացնենք մեր չափափոխման գործառույթը.

չափափոխում = ֆունկցիա(e)( var մկնիկ=(), լայնություն, բարձրություն, ձախ, վերև, օֆսեթ=$container.offset(); mouse.x = (e.clientX || e.pageX || e.originalEvent.touches .clientX) + $(window).scrollLeft(); mouse.y = (e.clientY || e.pageY || e.originalEvent.touches.clientY) + $(window).scrollTop(); // Պատկերի դիրքը տարբեր կերպ կախված է այն անկյունից, որը մենք քաշում ենք if($(event_state.evnt.target).hasClass("resize-handle-se"))( width = mouse.x - event_state.container_left; height = mouse.y - event_state .container_top; left = event_state.container_left; վերև = event_state.container_top; ) else if($(event_state.evnt.target).hasClass("resize-handle-sw"))( width = event_state.container_width - (mouse.x - event_state: կոնտեյներ_ձախ); բարձրություն = mouse.y - event_state.container_top; ձախ = mouse.x; վերև = event_state.container_top; ) else if($(event_state.evnt.target).hasClass("resize-handle-nw" ))( լայնություն = event_state.container_width - (mouse.x - event_state.container_left); բարձրություն = event_state.container_height - (mouse.y - event_state.container_top); ձախ = մուկ.x; վերեւ = mouse.y; if(constrain || e.shiftKey)( top = mouse.y - ((width / orig_src.width * orig_src.height) - height); ) ) else if($(event_state.evnt.target).hasClass(" չափափոխել -handle-ne"))( լայնությունը = mouse.x - event_state.container_left; բարձրությունը = event_state.container_height - (mouse.y - event_state.container_top); ձախ = event_state.container_left; վերև = mouse.y; if(սահմանափակում | | e.shiftKey) (վերև = mouse.y - ((լայնություն / orig_src.width * orig_src.height) - բարձրություն); ) ) // Ընտրովի աջակցում է կողմերի հարաբերակցությանը, եթե (սահմանափակում || e.shiftKey) (բարձրություն = լայնություն / orig_src.width * orig_src.height; ) if(width > min_width && height > min_height && width< max_width && height < max_height){ // Для увеличения производительности вы можете ограничить количество вызовов resizeImage() resizeImage(width, height); // Без этого Firefox не будет пересчитывать размеры изображения, пока перетаскивание не завершилось $container.offset({"left": left, "top": top}); } }

Մեր կոդը այժմ ստուգում է, թե որ չափափոխման բռնիչը քաշվում է և տեղափոխում է մեր պատկերն այնպես, որ համապատասխան անկյունը կարծես թե մնում է անշարժ:

Պատկերի տեղափոխում

Այժմ, երբ մենք կարող ենք փոխել պատկերի չափը՝ քաշելով դրա անկյուններից որևէ մեկը, դուք կարող եք նկատել, որ մենք կարող ենք ակամա փոխել պատկերի դիրքը էջի վրա:

Այժմ մենք պետք է ապահովենք, որ պատկերը վերադառնա շրջանակի կենտրոն: Init ֆունկցիայի մեջ եկեք ավելացնենք ևս մեկ իրադարձության հետևող, որը նման է նախկինում ստեղծվածին.

init = ֆունկցիա())( //... $container.on("mousedown", "img", startMoving); )

Այժմ մենք ավելացնում ենք startMoving և endMoving գործառույթները, ինչպես մենք ավելացրել ենք startResize և endResize:

startMoving = ֆունկցիա(e)(e.preventDefault(); e.stopPropagation(); saveEventState(e);$(document).on("mousemove", move); $(document).on("mouseup", endMoving );); endMoving = ֆունկցիա(e)(e.preventDefault();$(փաստաթուղթ).off("mouseup", endMoving);$(document)off("mousemove", move); );

Շարժվող ֆունկցիան պետք է հաշվարկի տարայի վերին ձախ եզրի նոր դիրքը: Այն հավասար կլինի մկնիկի ներկայիս դիրքին, որը կփոխանցվի վերին ձախ անկյունից մինչև մկնիկի հեռավորությունը, երբ մենք սկսեցինք քաշել պատկերը.

շարժվող = ֆունկցիա(e)( var մկնիկ=(); e.preventDefault(); e.stopPropagation(); mouse.x = (e.clientX || e.pageX) + $(window).scrollLeft(); մուկ .y = (e.clientY || e.pageY) + $(window).scrollTop(); $container.offset((«ձախ»: mouse.x - (event_state.mouse_x - event_state.container_left), «վերև» mouse.y - (event_state.mouse_y - event_state.container_top) )););

Պատկերի կտրում

Այժմ, երբ մենք կարող ենք փոխել պատկերի չափը, գուցե ցանկանաք այն կտրել: Փոխանակ օգտատերերին հնարավորություն տանք կտրել պատկերը ցանկացած չափի և ձևի, եկեք ստեղծենք շրջանակ, որն ունի մեզ անհրաժեշտ ճշգրիտ չափերը և հրավիրենք օգտվողներին տեղադրել պատկերն այդ շրջանակի ներսում:

Նրանք կկարողանան որոշել բնօրինակ պատկերում կտրված շրջանակի մասշտաբն ու դիրքը, իսկ մենք, իր հերթին, վստահ կլինենք, որ վերջնական պատկերը միշտ կունենա նույն ձևն ու չափը։

Դա անելու համար մենք պետք է ավելացնենք հետևյալ HTML կոդը.

Շրջանակի կաղապարի ոճերը շատ կարևոր են, հատկապես դիրքը, լայնությունը և բարձրությունը, քանի որ դրանք օգտագործվում են որոշելու համար, թե որքան է կտրվելու պատկերը:

Կարևոր է նաև հիշել, որ շրջանակը միշտ պետք է տեսանելի լինի ցանկացած գույնի ֆոնի վրա: Ահա թե ինչու իմ օրինակում ես օգտագործեցի կիսաթափանցիկ սպիտակ ուրվագիծը հիմնական պատուհանի շուրջ.

Կափարիչ (դիրք՝ բացարձակ; ձախ՝ 50%, վերև՝ 50%, լուսանցք՝ ձախ՝ -100px; լուսանցք՝ վերև՝ -100px; z-ինդեքս՝ 999; լայնություն՝ 200px; բարձրություն՝ 200px; եզրագիծ՝ ամուր 2px rgba( 222,60,80,.9); տուփի չափսերը՝ բովանդակություն-արկղ, ցուցիչ-իրադարձություններ՝ ոչ մեկը;) 204px; բարձրություն՝ 40px; եզրագիծ-ձախ՝ գծիկ 2px rgba(222,60,80,.9); եզրագիծ-աջ՝ գծիկ 2px rgba(222,60,80,.9); 0; լուսանցք-ձախ՝ -2px; լուսանցք-վերև՝ -40px; ) .overlay:after (ներքևում՝ 0; լուսանցք-ձախ՝ -2px; լուսանցք-ներքև՝ -40px;) .overlay-inner:after, .overlay -ներքին:նախքան (բովանդակությունը՝ ""; դիրքը՝ բացարձակ; ցուցադրումը՝ բլոկ; լայնությունը՝ 40px; բարձրությունը՝ 204px; եզրագծի վերևը՝ գծված 2px rgba(222,60,80,.9); եզրագիծը՝ ներքևում՝ գծիկ 2px rgba(222,60,80,.9); .overlay-inner:before (ձախ՝ 0; լուսանցք-ձախ՝ -40px; լուսանցք-վերև՝ -2px; ) .overlay-inner:after (աջ՝ 0; լուսանցք-աջ՝ -40px; լուսանցք-վերև՝ -2px; ) աջ: 5px; ներքևում՝ 5px; լիցք՝ 6px 10px; z-ինդեքս՝ 999; ֆոնի գույնը՝ rgb (222,60,80); եզրագիծը՝ ոչ մի; սահման-շառավիղ` 5px; գույնը՝ #FFF; )

Ձեր JavaScript-ում ավելացրեք հետևյալ գործառույթը և իրադարձությունների հետագծիչը.

init = ֆունկցիա())( //... $(".js-crop").on("click", crop); ); crop = function())( var crop_canvas, left = $(".overlay").offset().left - $container.offset().ձախ, վերև = $(".overlay").offset().վերև - $container.offset().վերև, լայնություն = $("overlay").width(), բարձրություն = $("overlay").height(); crop_canvas = document.createElement ("կտավ"); crop_canvas լայնություն = լայնություն; crop_canvas.height = բարձրություն; crop_canvas.getContext("2d").drawImage(image_target, ձախ, վերև, լայնություն, բարձրություն, 0, 0, լայնություն, բարձրություն); window.open(crop_canvas.toDataURL(" պատկեր /png»));)

Crop ֆունկցիան նման է resizeImage ֆունկցիային, սակայն դրա բարձրության և լայնության արժեք փոխանցելու փոխարեն մենք ստանում ենք բարձրությունը և լայնությունը ծածկույթի տարրից:

Կտավի drawImage մեթոդը կտրելու համար պահանջում է ինը պարամետր: Առաջին պարամետրը պատկերի աղբյուրն է: Հաջորդ չորս պարամետրերը ցույց են տալիս, թե որքան է օգտագործված բնօրինակ պատկերը (կտրման տուփը): Վերջին չորս պարամետրերը ցույց են տալիս, թե կտավի վրա որտեղ պետք է ցուցադրվի պատկերը և ինչ չափի:

Հպման իրադարձությունների ավելացում

Mousedown-ի և mouseup-ի համար կան համարժեք հպման իրադարձություններ՝ touchstart և touchend, mousemov-ի համար կա համարժեք touchmove իրադարձություն: Ով այս իրադարձություններն անվանեց, ակնհայտորեն հումորի զգացում չուներ, այլապես կարող էր դրանք անվանել «touchdown» և «touchup»:

Եկեք ավելացնենք «touchstart» և «touchend» ցանկացած վայրում, որտեղ մենք ունենք մկնիկի իջեցում և մկնիկի տեղադրում, և մկնիկի շարժումը փոխարինենք touchmove-ով.

// Init()-ում... $container.on("mousedown touchstart", ".resize-handle", startResize); $container.on ("mousedown touchstart", "img", startMoving); //In startResize() ... $(document).on("mousemove touchmove", move); $(document).on("mouseup touchend", endMoving); // endResize()-ում... $(document).off("mouseup touchend", endMoving); $(փաստաթուղթ) անջատում ("mousemove touchmove", շարժվում է); // startMoving()-ում... $(document).on("mousemove touchmove", move); $(document).on("mouseup touchend", endMoving); //endMoving()-ում... $(document).off("mouseup touchend", endMoving); $(փաստաթուղթ) անջատում ("mousemove touchmove", շարժվում է);

Քանի որ մենք փոխում ենք պատկերի չափը, արդարացի է ակնկալել, որ որոշ օգտատերեր կցանկանան օգտագործել ընդհանուր գործողություններ, ինչպիսիք են պատկերի ձգումը: Կա Hammer գրադարան, որը պարունակում է շատ բան հարմար գործիքներզգայական իրադարձությունների հետ աշխատելու համար:

Բայց քանի որ մեզ միայն ձգում է պետք, մենք կարող ենք առանց դրա: Այժմ ես ձեզ ցույց կտամ, թե որքան հեշտ է ստեղծել ձգում առանց երրորդ կողմի գրադարան օգտագործելու:

Դուք կարող եք նկատել, որ saveEventState ֆունկցիան արդեն պահպանում է նախնական հպման տվյալները. սա մեզ հիմա պետք կգա:

Նախ, մենք ստուգում ենք, թե արդյոք իրադարձությունը պարունակում է երկու «հպում» և չափում ենք դրանց միջև եղած հեռավորությունը: Մենք սա նշում ենք որպես սկզբնական հեռավորություն, այնուհետև չափում ենք, թե որքան է փոխվում այս հեռավորությունը, երբ մենք շարժվում ենք: Եկեք թարմացնենք շարժման գործառույթը.

շարժվող = ֆունկցիա(e)( var mouse=(), հպում; e.preventDefault(); e.stopPropagation(); touches = e.originalEvent.touches; մուկ.x = (e.clientX || e.pageX || touches.clientX) + $(window).scrollLeft(); mouse.y = (e.clientY || e.pageY || touches.clientY) + $(window).scrollTop(); $container.offset((" ձախ": mouse.x - (event_state.mouse_x - event_state.container_left), "վերև": mouse.y - (event_state.mouse_y - event_state.container_top) )); // Հետևեք ձգվելուն շարժվելիս if(event_state.touches && event_state): .touches.length > 1 && touches.length > 1)( var լայնությունը = event_state.container_width, բարձրությունը = event_state.container_height; var a = event_state.touches.clientX - event_state.touches.clientX; a = a * a; var b = event_state.touches.clientY - event_state.touches.clientY; b = b * b; var dist1 = Math.sqrt(a + b); a = e.originalEvent.touches.clientX - touches.clientX; a = a * a ;b = e.originalEvent.touches.clientY - touches.clientY;b = b * b;var dist2 = Math.sqrt(a + b); var հարաբերակցությունը = dist2 / dist1; լայնություն = լայնություն * հարաբերակցություն; բարձրություն = բարձրություն * հարաբերակցություն; // Գործողությունը բարելավելու համար կարող եք սահմանափակել զանգերի քանակը resizeImage() resizeImage(լայնություն, բարձրություն); ));

Հարաբերակցությունը որոշելու համար մենք ընթացիկ հեռավորությունը բաժանում ենք սկզբնական հեռավորության վրա և համապատասխանաբար կիրառում ենք պատկերը մասշտաբավորելու համար: Մենք հաշվարկում ենք նոր լայնությունը և բարձրությունը, այնուհետև չափափոխում ենք պատկերը.

Այսքանը: Կրկին դիտեք ցուցադրական տարբերակը կամ ներբեռնեք ZIP արխիվը.

Փորձարկման ժամանակ ես տեսա, որ Chrome-ն արգելափակում է լռելյայն բրաուզերի ձգումը, բայց Firefox-ը լավ է աշխատում:

Հուսով եմ, որ այս հոդվածը ձեզ համար օգտակար էր: Ես խրախուսում եմ ձեզ կարդալ քաշվող տարրերի և ֆայլերի վերբեռնման մեթոդների վերաբերյալ այլ հոդվածներ և տեսնել, թե ինչպես են այլ մարդիկ համատեղում այս տեխնիկան՝ ստեղծելու գեղեցիկ ինտերֆեյսներ:

Այս հրապարակումը հոդվածի թարգմանությունն է « ԿՏՎՈՎ ՊԱՏԿԵՐՆԵՐԻ ՉԱՓ ՓՈՓՈԽՈՒՄ ԵՎ ԿՏՐՈՒՄ», որը պատրաստել է ծրագրի բարեկամական թիմը

Պատկերի հարմարեցման գործընթացի իրականացման պրակտիկան դեռ մշակման փուլում է։ Գոյություն ունեն բազմաթիվ գաղափարներ և առաջարկներ, թե ինչպես մշակել նկարները:

Այս ձեռնարկում մենք կդիտարկենք կոկիկ փոքրիկ գրադարան, որը ոչ միայն թույլ է տալիս ավտոմատ կերպով չափափոխել պատկերների չափերը, երբ փոխում եք տեսադաշտի կարգավորումները, այլ նաև կտրում է պատկերները՝ հիմնվելով տվյալ կիզակետի վրա: Բացի այդ, բոլոր գործողությունները կատարվում են մաքուր CSS-ում։

Հանդիպեք առանցքային կետին

Focal Point - GitHub նախագիծ և CSS գրադարան: ստեղծվել է Ադամ Բրեդլիի կողմից: Արձագանքման հայեցակարգը պահանջում է, որ պատկերները փոխեն չափը և դիրքը՝ ընթացիկ տեսադաշտի համար օպտիմալ համամասնությունների հասնելու համար: Focal Point-ն այս գաղափարը մի քայլ առաջ է տանում և ոչ միայն չափափոխում է պատկերները, այլև կտրում է դրանք:

Այս գաղափարի խնդիրն այն է, որ պատահական կտրումը կարող է հեռացնել պատկերի կարևոր մասերը: Օրինակ, վերը նշված օրինակում կարևոր օբյեկտգտնվում է պատկերի աջ կողմում: Ինչպե՞ս կանխել այն կտրվելուց:

Կիզակետային կետը թույլ է տալիս սահմանել պատկերի թիրախային տարածքը, որը պետք է մնա անփոփոխ (կիզակետ): Այս կերպ, երբ գրադարանը կատարում է կտրում, պատկերներն իրենք դեռ հիանալի տեսք կունենան:

Ինչպես է դա աշխատում?

Focal Point-ի ներդրումը բավականին յուրահատուկ, բայց միևնույն ժամանակ պարզ գործընթաց է: Եկեք նախ քննարկենք, թե ինչպես ընտրել կիզակետը, այնուհետև խորանանք իրականացման կոդի մեջ:

Երբ դուք պատկեր եք տեղադրում վեբ էջի մեջ՝ օգտագործելով Focal Point, այն ավտոմատ կերպով բաժանվում է անտեսանելի 12x12 ցանցի: Կարևոր չէ, թե ինչ չափի է նկարը, ցանցը հարմարվում է դրան:

Այժմ մենք ունենք պատկերը բաժանելու համակարգ և կարող ենք ցանցի վրա որոշել մի կետ, որը կծառայի որպես կիզակետ: Նկարը կտրելիս նշված կետը կօգտագործվի որպես կենտրոնական մաս, որի շուրջ տեղի է ունենում կտրումը: Այսինքն՝ եթե ընտրենք տղամարդու դեմքը, ապա կերպարի այս կարևոր կողմը կմնա փոփոխություններ կատարելուց հետո։

Դուք պետք է գտնեք կարևոր տարածքը, այնուհետև հաշվեք ցանցի միավորների քանակը պատկերի կենտրոնից մինչև այն: Մեր օրինակում դեմքը գտնվում է երեք միավոր դեպի աջ և երեք միավոր դեպի վեր՝ ցանցի կենտրոնից (անգլերեն անունները մնացել են նկարում, քանի որ դրանք համընկնում են գրադարանի աշխատանքային պարամետրերի հետ):

Կոդ

Այժմ մենք կարող ենք նշել առանցքային կետը, և ժամանակն է հասկանալ իրականացման կոդը: Սկսելու համար ներբեռնեք նախագիծը GitHub-ից և հղեք CSS ֆայլձեր HTML փաստաթղթին:

Նախնական գործողություններից հետո անհրաժեշտ է ավելացնել երկու div տարր և img պիտակ։ Այո, նշումը մեկ պատկերի համար ավելորդ է, և այս փաստը գրադարանի թերությունն է։ Ահա բնորոշ նշում.

Ինչպես տեսնում եք, արտաքին div տարրն ունի « դաս առանցքային կետը», իսկ ներքինը պարունակում է մեր պատկերն առանց դասերի։

Ցանցային միավորների վերածում դասերի

Այժմ դուք պետք է ուղղեք Կիզակետը դեպի այն վայրը, որտեղ գտնվում է պատկերի կիզակետը: Մեր կիզակետը տեղափոխվում է երեք միավոր դեպի աջ և երեք միավոր վերև: Հետևաբար, մենք նշում ենք արտաքին տարր div դասեր» ճիշտ-3«Եվ» վերև-3″.

Մեր ծածկագրի ներդրումը կհանգեցնի հետևյալի. մեծ էկրաններՊատկերը կցուցադրվի լրիվ չափով, և երբ դիտման պատուհանը փոքրացվի, այն կկրճատվի՝ կիզակետային կետի շուրջը կտրելով:

Նկատի ունեցեք, որ աջ կողմում պատկերը ոչ միայն փոքր է, այլև կտրված է կարևոր մասի շուրջ: Ամեն ինչ արված է օգտագործելով CSS!

Էջի կառուցվածքը

Որպեսզի ավելի լավ պատկերացնենք, թե ինչպես կարելի է օգտագործել գրադարանը իրական հավելվածներում, եկեք կառուցենք մի պարզ էջ։

Եկեք սահմանենք div տարր դասի հետ « սյունակ”:

Ավելացնենք վերնագիր և պարբերություն էջի բովանդակությունը մոդելավորելու համար.

Առանցքային կետը

Lorem ipsum....

Հաջորդը, մենք կտեղադրենք պատկեր, ինչպես ցույց է տրված նախորդ օրինակում (կիզակետային կետի համար երկու դիվիզով և դասերով).

Առանցքային կետը

Lorem ipsum....

Օրինակը լրացնելու համար եկեք պատճենենք կոդը՝ օգտագործելով այլ պատկեր և կենտրոնացման այլ կետ:

Առանցքային կետը

Lorem ipsum...

Առանցքային կետը

Lorem ipsum...

Երկրորդ պատկերի համար կիզակետը գտնվում է այլ վայրում.

CSS

Եկեք որոշենք ոճերը մեր էջի համար: Պատկերների հարմարեցումը և կենտրոնական կետի հետ աշխատելը մեր փորձաքննության ոլորտից դուրս են: Ձեզ անհրաժեշտ է միայն որոշել տեսքըտարրեր. Օրինակ, էջը բաժանված է երկու սյունակի և տեքստի համար սահմանվում են ոճեր։

* ( լուսանցք՝ 0; լիցքավորում՝ 0; -վեբկիտ-տուփի չափսում՝ սահմանային տուփ; ;) .սյունակ (լողացող՝ ձախ; հորդառատ՝ ավտոմատ; լիցք՝ 20px; լայնություն՝ 50%; ) h1 (տեքստի փոխակերպում՝ մեծատառ; տառատեսակ՝ թավ 45px/1.5 Helvetica, Verdana, sans-serif; ) p ( լուսանցք- ներքևում՝ 20px; գույն՝ #888; տառատեսակ՝ 14px/1.5 Helvetica, Verdana, sans-serif; 35px; ) ) @media all and (max-width՝ 550px) (h1 (տառաչափը՝ 23px;))

Եկեք տեսնենք այն գործողության մեջ

Այժմ դուք կարող եք տեսնել, թե ինչպես է աշխատում ցուցադրությունը: Եթե էջերը ցուցադրվում են դիտման մեծ պատուհանում (օրինակ՝ մոնիտորի էկրանին) սեղանադիր համակարգիչ), այնուհետև պատկերները կցուցադրվեն ամբողջությամբ.

Այժմ, եթե դուք կրճատում եք տեսադաշտի չափը կամ դիտում եք ցուցադրական էջը շարժական սարքը, կարող եք տեսնել, թե ինչպես են պատկերները հարմարվում։ Երբ պատուհանը փոքրանում է, պատկերները ոչ միայն փոքրանում են, այլև կտրվում են:

Դիզայնի տեսանկյունից որքանո՞վ է արդյունավետ այս տեխնիկան: Որքան փոքրանում է պատկերը, այնքան ավելի է առանձնանում կիզակետը: Այս գրադարանով դուք կարող եք վստահ լինել, որ նույնիսկ փոքր էկրանների վրա օգտվողները կունենան կարևոր տեղեկատվություն:

Բրաուզերի համատեղելիություն

Գրադարանը աշխատում է բոլոր նոր բրաուզերներում: IE8-ում պատկերները չափափոխվում են, բայց չեն կտրվում: Բայց այս պահին կայքերի 99,99%-ը չունի պատկերի հարմարեցման նման մեխանիզմ՝ ավտոմատ կտրվածքով, ուստի IE8-ի արձագանքը կրիտիկական չէ։

Ի՞նչ կա ներսում:

Հիմա եկեք տեսնենք, թե ինչպես է աշխատում գրադարանը:

Կոդի առաջին մասը պատասխանող պատկերների հիմնական CSS լուծումն է:

Կիզակետային կետ ( լայնությունը՝ 100%; բարձրությունը՝ ավտոմատ; հորդառատ՝ թաքնված; ) .կիզակետային կետ div (դիրքը՝ հարաբերական; առավելագույն լայնությունը՝ ոչ մեկը; բարձրությունը՝ ավտոմատ; )

Հետևյալ կոդը մի փոքր ավելի բարդ է. Նախ, մեդիա հարցումն իրականացվում է 767px-ով: Այնուհետև հասանելի դասերից յուրաքանչյուրի համար օգտագործվում են բացասական մարժան արժեքներ՝ պատկերը կտրելու համար: Դասի տեքստում ներկայացնում ենք միայն դասերը « վերև-3«Եվ» ճիշտ-3», որոնք օգտագործվել են ցույցի ժամանակ։

@media բոլորը և (առավելագույն լայնությունը՝ 767px) ( /* 4x3 Լանդշաֆտի ձև (կանխադրված) */ .կիզակետային կետ div ( լուսանցք՝ -3em -4em; ) /* Լանդշաֆտ վերև (Ընդամենը 6em) */ .վերև-3 div ( լուսանցք-վերև՝ -1.5em; լուսանցք-ներքև՝ -4.5em; ) .աջ-3 div (լուսանցք-ձախ՝ -6em; լուսանցք-աջ՝ -2em;))

Այստեղ շատ կոդ չկա, բայց այն բավականին էլեգանտ է: Բացասական լուսանցքները օգտագործվում են em միավորներով՝ տվյալ կետի շուրջ պատկերները կտրելու համար:

Պատկերը բեկորների կտրելը և այնուհետև դրանք մեկ ամբողջական նկարի մեջ միավորելը երկար ժամանակ գոյություն ունեցող տեխնիկա է, որը դարձել է վեբ էջի դասավորության զինանոցի մի մասը: Նախապես պատրաստված գծագիրը գրաֆիկական խմբագրիչում կտրվում է մասերի, մասերը պահվում են որպես առանձին գրաֆիկական պատկերներ, այնուհետև միացվում են իրար՝ օգտագործելով աղյուսակը:

Եկեք նախ քննարկենք, թե ինչու է օգտագործվում պատկերի կտրատումը և, ի վերջո, ինչ առավելություններ է տալիս այն, իսկ հետո ինչպես օգտագործել աղյուսակը գործնականում:

Պատկերի կտրման առավելությունները

Հղման ստեղծում

Անհրաժեշտության դեպքում առանձին նկարները կարող են վերածվել հղումների, և դուք կարող եք նշանակել իրենց սեփական նկարագրությունը (տիտղոսային հատկանիշ) և այլընտրանքային տեքստ (alt հատկանիշ), որը տեսանելի է, երբ անջատում եք նկարների ցուցադրումը բրաուզերում կամ մկնիկը սավառնելիս: պատկերը։

Rolling ազդեցություն

Առանձին դրվագների հավաքածուն թույլ է տալիս ստեղծել պտտվող էֆեկտ՝ դինամիկ կերպով փոխելով մի նկարը մյուսին, երբ մկնիկի կուրսորը սավառնում եք դրա վրա, և վերադառնում նախորդին, երբ կուրսորը հեռանում է:

Ֆայլի չափի կրճատում

Ավելի հարմար է պատկերի առանձին մասերը մանիպուլյացիայի ենթարկել՝ ընտրելով դրանց համար գրաֆիկական ձևաչափը և դրա պարամետրերը, որպեսզի ֆայլի չափը լինի նվազագույն՝ պահպանելով պատկերի ընդունելի որակը: Արդյունքում, գրաֆիկական ֆայլերի հավաքածուն ավելի քիչ տեղ կզբաղեցնի և ավելի արագ կբեռնվի, քան մեկ ամբողջ գծագիր պարունակող մեկ ֆայլ:

Անիմացիոն GIF

Մեծ պատկերների համար անիմացիոն GIF-ի օգտագործումը կարող է հանգեցնել ֆայլի չափի զգալի աճի: Բայց դուք կարող եք հնարք օգտագործել և պատկերի միայն մի մասը փոխարինել անիմացիայով, իսկ մնացած հատվածները թողնել ստատիկ: Այս դեպքում մի քանի ֆայլերի ընդհանուր ծավալը շատ ավելի քիչ կլինի, քան մեկ պատկերի անիմացիան:

Դասավորության առանձնահատկությունները

Վեբ էջի պատկերներն ունեն ուղղանկյուն բնույթ, բայց մեկ պատկերը կտրելով դրա բաղադրիչ տարրերի մեջ, դուք ստանում եք կոնստրուկտոր, որից կարող եք կառուցել մեկ այլ ձև: Սա մանկական խորանարդիկներ է հիշեցնում, որոնց մի կողմում նկար է փակցված։ Դուք պետք է վեբ էջում նման ձևեր ավելացնեք տարբեր պատճառներով, օրինակ՝ պատկերի հատվածի փոխարեն պետք է տեքստ ավելացնել։ Բացի այդ, որոշ նկարներ կարող են փոխարինվել իրենց ֆոնային նմանակով, այնուհետև վերջնական պատկերը, պահպանելով իր ամբողջականությունը, կզբաղեցնի ամբողջը: մատչելի տարածքփաստաթուղթ։

Հոգեբանական ասպեկտ

Երբ մեկ նկարը բաղկացած է բազմաթիվ դրվագներից, զննարկիչը դրանք ներբեռնում է մի քանի թեմաներով և ցույց է տալիս առաջինը ներբեռնվածները: Հետեւաբար, պատկերը հայտնվում է որպես խճանկարային տարրեր: Եվ սա անմիջապես ուշադրություն է գրավում և կարծես թե ավելի արագ է բեռնվում: Այսպիսով, հետ տեխնիկական կողմըՄեկ նկարն ավելի արագ է բեռնվում, և մարդկային ընկալման տեսանկյունից թվում է, որ փոքր նկարների հավաքածուն ավելի արագ է հայտնվում:

Պատկերի պատրաստում

Որպես պատկերի օրինակ, որտեղ անհրաժեշտ է կտրել, վերցրեք Նկ. 2.12. Երեք պատկերակներից յուրաքանչյուրը հղում է դեպի համապատասխան բաժինը, բացի այդ, գլխավոր էջի հղումը կայքի անվանումով նկար է:

Բրինձ. 2.12. Բնօրինակ պատկեր

Տեսականորեն, այս դեպքում դուք կարող եք անել առանց կտրելու, եթե օգտագործեք պատկերի քարտեզ (պիտակներ Եվ ) Սակայն այս տարբերակն անընդունելի է՝ ելնելով հետեւյալ նկատառումներից. Ցանկացած բաժին բացելիս փոխակերպվում է դրան համապատասխան պատկերակը, որն ընդհանուր առմամբ փոխում է ամբողջ պատկերը (նկ. 2.13): Եթե դուք օգտագործում եք պատկերային քարտեզ, դուք պետք է պատրաստեք չորս տարբեր պատկերներ (մեկը համար գլխավոր էջև ևս երեքը յուրաքանչյուր բաժնի համար), և դա, ի վերջո, կազդի ուղարկված տվյալների ծավալի, կայքի ցուցադրման արագության և նկարների որակի վրա:

Բրինձ. 2.13. Պատկերի դիտում բաժինը բացելիս

Այժմ դուք պետք է որոշեք, թե ինչպես կտրել պատկերը: Այստեղ կարող են լինել մի քանի տարբերակներ. ի վերջո դա կախված է հեղինակի կամքից, գծագրի նպատակից և դրա բովանդակությունից:

Պատկերի կտրում

Ավելի լավ է վստահել նկարը կտրելը և «հավաքելը»: մասնագիտացված ծրագիր, մասնավորապես, Adobe Photoshop, այնպես որ գործիքների և մենյուների բոլոր հղումները վերաբերում են հատուկ այս ծրագրին:

Պատկերը կտրելը հեշտացնելու համար նախ պետք է ավելացնել ուղղորդող գծեր, որոնց երկայնքով այնուհետև տեղի կունենա բեկորների բաժանումը (նկ. 2.14): Ստորև բերված տողը կավելացնենք ավելի ուշ՝ օգտագործելով ոճերը, այնպես որ այն չի մասնակցում պատկերին։

Բրինձ. 2.14. Պատկերին ուղեցույցների ավելացում

Այժմ մենք օգտագործում ենք Slice գործիքը (ակտիվացված K ստեղնով) և ուղեցույցների երկայնքով գծում ենք անհրաժեշտ ուղղանկյուն հատվածը: Նշանակված տարածքը նշված է կապույտ շրջանակով, որի հատվածի համարը վերին ձախ անկյունում է: Տարածքների չափերը կարելի է փոխել՝ օգտագործելով Slice Select հատուկ գործիքը: Այս գործիքով մկնիկը սեղմում ենք ցանկալի հատվածի վրա՝ շրջանի շրջանակի գույնը դառնում է դեղին, փոխվում է նաև նկարի տոնայնությունը։ Դրանից հետո դուք կարող եք մկնիկի կուրսորով տեղափոխել հատվածի սահմանները՝ օգտագործելով տարածքի կողքերին և անկյուններին հատուկ նշիչներ (նկ. 2.15):

Բրինձ. 2.15. Հատվածի տարածքի փոփոխություն

Slice և Slice Select գործիքների միջև արագ անցնելու համար սեղմեք և պահեք Ctrl ստեղնը:

Բեկորների չափերը փոխելիս համոզվեք, որ տարածքները միմյանց հետ չեն հատվում և դրանց միջև բացեր չկան: Թեեւ Photoshop-ն ինքը նշում է նման թերությունները եւ միջոցներ է ձեռնարկում դրանք վերացնելու համար, սակայն ավելի լավ է ամեն ինչ ձեր վերահսկողության տակ պահել։

Slice գործիքի նախնական վերլուծությունից և կիրառումից հետո ստանում ենք 13 բեկոր (նկ. 2.16): Slice գործիքի կողմից ստեղծված բեկորները ցուցադրվում են կապույտով, ավտոմատ ստեղծված հատվածները՝ մոխրագույնով:

Բրինձ. 2.16. Պատկերը կտրված է բեկորներով

Պետք չէ վախենալ, որ գծագրերը շատ կլինեն, քանի որ բեկորների մեծ մասը դատարկ պատկեր է պարունակում։ Այսպիսով, նկարների թիվը կրճատվում է, քանի որ դրանցից մի քանիսը կարող են դուրս նետվել՝ սեղանի բջիջի համար նկարի չափը սահմանելով:

Սեղանի օգնությամբ բեկորները միմյանց սոսնձելու համար

Դրվագները նշանակվելուց հետո դուք պետք է բոլոր պատկերները պահեք սկավառակի վրա: Դա անելու համար ընտրեք ցանկի տարրը Ֆայլ > Պահպանել վեբի համար& Սարքեր...(File > Save for Web, Alt +Shift +Ctrl +S) գրաֆիկական օպտիմալացման վահանակը բացելու համար (նկ. 2.17):

Բրինձ. 2.17. Պատկերի օպտիմալացման վահանակ

Օգտագործելով Slice Select գործիքը, կարող եք ընտրել ցանկալի հատվածը և դրա համար սահմանել անձնական պարամետրեր, ինչպիսիք են գույների քանակը, արժեքը: որակի կորուստ, թափանցիկություն և այլն։ Կարող եք միանգամից մի քանի բեկորներ ընտրել Shift ստեղնը սեղմած պահելով, որը թույլ է տալիս նույն պարամետրերը սահմանել դրանց համար։

Ֆրագմենտների հետ աշխատանքն ավարտելուց հետո սեղմում ենք «Պահպանել» կոճակը, նշում սկավառակի վրա, որտեղ կպահվի HTML փաստաթուղթը, անունը, տեսակը և կարգավորումները (նկ. 2.18):

Բրինձ. 2.18. Կարգավորումներ ֆայլը պահելու ժամանակ

Նկարներն ավտոմատ կերպով պահվում են պատկերների թղթապանակում, և դրանց անվանումը ձևավորվում է HTML ֆայլի անունից՝ հատվածի համարի ավելացմամբ։ Օրինակ՝ պահպանված անունը կլիներ splash.html, ապա առաջին հատվածը կկոչվեր splash_01.png, իսկ վերջինը՝ splash_13.png: Բացի այդ, ստեղծվում է spacer.gif ֆայլ, որը 1x1 պիքսել չափի թափանցիկ պատկեր է։ Այն օգտագործվում է աղյուսակում պատկերները ճիշտ ձևավորելու համար:

Կարգավորումները, որոնցով ստեղծվում է HTML կոդը և ստեղծվում պատկերների անունները, կարող են փոխվել, եթե ֆայլը պահելիս «Կարգավորումներ» բաժնում ընտրեք «Այլ...» Կարգավորումների պատուհանում կարող եք ընտրել այն թղթապանակը, որտեղ պահվում են նկարները, ֆայլերի անունների ձևավորման եղանակը, ինչպես նաև HTML կոդը (նկ. 2.19):

Բրինձ. 2.19. Արդյունքների պարամետրեր ընտրելու վահանակ

Ֆայլերը պահպանելու արդյունքում ստացված HTML կոդը, փոքր խմբագրումից հետո, ներկայացված է օրինակ 2.12-ում։

Օրինակ 2.12. Աղյուսակ պատկերների միաձուլման համար

Կտրող պատկերների պատճեն

Այս կոդը դեռ որոշակի աշխատանքի կարիք ունի, քանի որ անհրաժեշտ է, որ հորիզոնական մոխրագույն և սպիտակ շերտը զբաղեցնի վեբ էջի ողջ հասանելի լայնությունը: Բացի այդ, որոշ բեկորներ կրկնվում են և կարող են վերացվել:

Պահանջվող արդյունքը ստանալու համար եկեք ներկայացնենք ֆոնային պատկերով շերտ և դրա վրա ծածկենք մեր աղյուսակը: Այս պատկերը ներկայացված է Նկ. 2.20.

Բրինձ. 2.20. Ֆոնային պատկերը, շուրջը շրջանակը պարզության համար է

Այժմ մենք ստեղծում ենք ցանկալի շերտը, այն անվանում ենք toplayer և նշում ենք դրա պարամետրերը ոճերում (օրինակ 2.13):

Օրինակ 2.13. Շերտեր՝ շերտերի ձևավորման համար

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Հյուսիսլենդի հեքիաթներ

...

Այս օրինակում շերտի ֆոնի պարամետրերը սահմանվում են համընդհանուր ֆոնային հատկության միջոցով, որը որոշում է դեպի գրաֆիկական ֆայլի ուղին, լրացման գույնը և օրինակի կրկնելիությունը: Թեև նման դեպքերում ֆոնի գույնը կարող է բաց թողնել, քանի որ կա ֆոնային պատկեր, ավելի լավ է դա անել, եթե օգտագործողը անջատել է պատկերների բեռնումը: Շերտի բարձրությունը նույնպես պարտադիր պարամետր չէ, քանի որ շերտի ներսում աղյուսակն ունի տվյալ բարձրություն։

Մնում է հեռացնել աննշան բեկորներով նկարները՝ պահպանելով դրանց չափերը աղյուսակի բջիջներում (օրինակ 2.14):

Օրինակ 2.14. Վերջնական կոդը

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Հյուսիսլենդի հեքիաթներ

Այս օրինակում դոկտիպը փոխվել է խիստի, ինչը հանգեցնում է պատկերների ներքևի մասում փոքր անկման: Այն հեռացնելու համար ցուցադրեք՝ բլոկը ոճով ավելացվում է IMG ընտրիչին:

Բացի թվարկված առավելություններից, պատկերները կտրելը ունի նաև թերություններ, որոնք ակնհայտ են բերված օրինակում։ Կոդը բավականին բարդ է ստացվում, և քանի որ բջիջները փոխկապակցված են, մեկ նկարի չափը փոխելը կհանգեցնի ամբողջ աղյուսակի փոփոխությանը: Բացի այդ, անհարմար է անհատական գծագրերի դիրքը խմբագրելը: Կրկին, մեկ գծանկարը մի քանի պիքսել աջ տեղափոխելու համար դուք պետք է խմբագրումներ կատարեք միանգամից մի քանի բջիջներում: Հետեւաբար, կտրումը միշտ չէ, որ արժե օգտագործել, հատկապես, եթե կա այլընտրանք շերտերի օգտագործման տեսքով: Եկեք նայենք, թե ինչպես կարելի է նմանատիպ դասավորություն կատարել՝ օգտագործելով դրանք:

Նկարների դիրքը վերահսկելու համար մենք կսահմանենք հարաբերական դիրքավորումը մայր ընտրացանկի դասին, իսկ բացարձակ դիրքավորումը՝ նկարներին: Այնուհետև կիրառելով ձախ և վերևի հատկությունները, կսահմանվեն պատկերի կոորդինատները՝ համեմատած դրա ծնողի հետ, այսինքն. շերտի մենյու. Շերտը ինքնին կարելի է հեշտությամբ տեղափոխել, և դա որևէ կերպ չի ազդի իր երեխայի տարրերի վրա (օրինակ 2.15):

Օրինակ 2.15. Դասավորություն՝ օգտագործելով շերտերը

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Հյուսիսլենդի հեքիաթներ

Այստեղ toplayer շերտը ստեղծվում է օգտագործելով ֆոնային պատկերպատուհանի ամբողջ լայնությամբ տրված բարձրության շերտ: Մենյու շերտը սահմանում է մայր տարրը, որը կենտրոնացած է ֆոնային տողի վերևում: Պատկերների դիրքը մենյուի շերտում վերահսկվում է վերին և ձախ հատկություններով: Ոճերի ակտիվ օգտագործման շնորհիվ HTML կոդը զգալիորեն կրճատվում է, նկարները միմյանցից անկախ են, դրանք հեշտությամբ կարելի է տեղափոխել, փոխել ուրիշներին և ավելացնել նորերը։ Սա հենց այն դեպքն է, երբ սեղանը դասավորության ժամանակ հնարավորություն չունի:

Հաճախ անհրաժեշտություն է առաջանում ցուցադրել պատկերներ ֆիքսված չափի բլոկում: Այս դեպքում խնդիր է առաջանում՝ ինչպես տեղադրեք պատկերը բլոկի մեջառանց համամասնության կորստի.

Բլոգների մեծ մասը խորհուրդ է տալիս գրել JavaScript կոդը, որը կհաշվարկի նկարի չափսերըև մասշտաբավորել այն ճիշտ չափը. Բայց սա մեր մեթոդը չէ։ js կոդի հետ կապելը լավ գաղափար չէ։ Բացի այդ, սցենարը կմնա անգործուն, քանի դեռ պատկերները ամբողջությամբ չեն բեռնվել: Ըստ այդմ՝ էջը որոշ ժամանակ ծուռ է լինելու։

Իհարկե, դուք կարող եք կտրել և մասշտաբային նկարներնախքան դրանք կայքում ավելացնելը: բայց ամեն անգամ խմբագրիչը գործարկելը և պատկերը պիքսել առ պիքսել կտրատելը նույնպես լավ չէ: Հետևաբար, ես առաջարկում եմ օգտագործել սովորական CSS-ը և կտրել նկարընրա օգնությամբ։ Այս դեպքում կտրումը տեղի կունենա ուղղահայաց: Այսինքն՝ նկարի լայնությունը ամբողջությամբ կտեղավորվի, բայց բարձրությունը կկտրվի։

Այս մեթոդի էությունն այն է, որ նկարը տեղավորվի որոշակի չափի բլոկի մեջ: Այն ամենը, ինչ չի տեղավորվում այս բլոկի մեջ, կթաքցվի: Սահմանային բլոկը կունենա նույն հատկությունները, ինչ նկարը: Հետևաբար, այն կարող է տեղակայվել և դասավորվել այնպես, ինչպես սովորական նկարը: Տարբերակն, իհարկե, իդեալական չէ, բայց արդյունավետ է։

Նախ, եկեք ընտրենք հիվանդներին: Ես ներառեցի երեք կատվազգիների նկարներ՝ տարբեր չափերի: Բոլոր պատկերներն ունեն նույն լայնությունը՝ 200 պիքսել:

բարձրությունը = 198px

բարձրությունը = 257px

բարձրությունը = 124px

Նման տարբերությամբ նկարի համամասնություններըԼավագույն տարբերակը կլինի 200x120 պիքսել չափերով սահմանային բլոկ վերցնելը:

CSS-ի բոլոր մանիպուլյացիաներից հետո այն կունենա հետևյալ տեսքը.

Կոդ այս օրինակըայդպիսին.

.jpg" width="200" alt="Picture 1" border="0">!}

.jpg" width="200" alt="Picture 2" border="0">!}

.jpg" width="200" alt="Picture 3" border="0">!}

Ինչպես տեսնում եք, նկարները չեն աղավաղվել, այլ միայն կրճատվել են: Չնայած իրականում դրանք մնացին լրիվ չափի։ Այս մեթոդը շատ հաջող կլինի, եթե ձեր նկարների համամասնությունների տարբերությունը փոքր լինի։

Այսքանը: Բաժանորդագրվեք, դրեք աստղեր: Հաջողություն ձեր նվաճումների մեջ:

Թեմայից դուրս. Երկրի վրա ամենալավ բանը:

Դուք կարող եք միանալ իմ միկրոբլոգին Twitter-ում