ایجاد یک کادر روشن جابجاپذیر نسبت به اطراف

توسط: امید

سلام

توی این مطلب هدفم نمایش دادن استفاده از راه های ساده برای مشکلاتی که شاید به نظرمون رفع اونها سخته هست.

ما در اینجا قصد داریم یک کدی رو پیاده سازی کنیم که در اون یک کادر مربع شکل از یک تصویر را انتخاب نماییم. (با استفاده از بالا و پایین بردن یک پنجره مربع شکل داخل یک تصویر)
و اما هدف کلی ما:

انتخاب

خوب، شاید شما با دیدن این تصویر متوجه کاری که باید انجام بشه شده باشید.
ما یک تصویر با ارتفاع زیاد داریم، میخواهیم که یک کادر روشن به‌معنی محیط انتخاب شده و مابقی تصویر به صورت خاکستری باشد و بتوانیم کادر انتخاب رو جابجا کنیم.

الان شاید افکار مختلفی برای پیاده سازی این طرح در ذهن شما اومده باشه.
مثلا:
قرار دادن چهار باکس خاکستری رنگ در اطراف کادر اصلیمون و جابجا کردن اونها همراه با جابجایی کادر انتخاب.
یا شاید یه روش بهتر، به باکس اصلیمون از طریق سی‌اس‌اس با تعریف :before و :after میدیم و توی اونا تعریف میکنیم که بالاتر کادرمون باشن و ارتفاع فلان قدر و اینا.
یا شاید اصلا بگین من باکس انتخابمو بهش پس زمینه سفید با شفافیت پایین میدم ولی در واقع شما صورت مسئله رو تغییر دادین.
شایدم روش های دیگه ای…
مسلما تو تمام این روش ها کادر اصلی باید استایل overflow:hidden داشته باشه که کادر انتخابمون میزان اضافی ها و سرریزی هاش از اون بیرون نزنه و مخفی بشه.

در اینجا یه راه خیلی آسون تری رو پیشنهاد میکنم.
کافیه به کادر انتخابمون یک استایل box-shadow بدید.

کد HTML ما:

<div class="image"><img alt="Image" src="http://pilevar.net/fa/blog/wp-content/uploads/2013/03/p2.jpeg" />
<div class="imagemask"></div>
</div>

و کد css:

.image{
     width: 150px;
     position: relative;
     overflow:hidden;
     margin: 0 auto;
}
.imagemask{
     position:absolute;
     height: 150px;
     width: 150px;
     box-shadow:0 0 0 200px rgba(0,0,0,0.8);
     top:0;
     cursor:move;
}

نتیجه:

Image




و اما توضیح در مورد با box-shadow:
همونجوری که میدونید box-shadow در css3 اومد و مدتها به صورت draft در مرورگر های قابل استفاده بود.
کار اصلی box-shadow همانند قرار دادن یک منبع نوری در مقابل شیء مورد نظر ما است.
باکس شادو شامل شش پارامتر برای تعریف می‌باشد.

  • پارامتر اول فاصله سایه از بالا به پایین می‌باشد که باید به آن مقداری عددی داد.
  • پارامتر دوم هم همانند قبلی ولی از چپ به راست است. ورود دو مقدار اول الزامی است.
  • پارامتر سوم برای تعیین میزان محو شدن سایه است. مقدار پیشفرض آن صفر است و ورود اون اختیاری
  • پارامتر چهارم میزان گسترش را مشخص میکند. این پارامتر همانند این است که منبع نوری را به شیء‌مون نزدیک و دورتر کنیم. هرچه نزدیک تر باشه سایه تخت بیشتری برامون ایجاد میکنه. مقدار پیشفرض این هم صفر است و ورود آن اختیاری ولی درصورتی که نیاز به استفاده از آن داشته باشیم حتما باید پارامتر سوم که همون میزان محو شدن باشه رو مقدار دهی کنیم.
  • پارامتر پنجم رنگ سایه است که میتوان آن را همانند مابقی تعریف رنگ ها در CSS تعریف نمود و ورود آن اختیاری می‌باشد.
  • پارامتر پایانی مقدار inset می‌باشد و درصورتی که تعریف شود تعیین میکند که سایه در نظر گرفته شده از داخل داده شود.

نکته: در صورتی که در یک باکس نیاز به تعریف box-shadow داخلی و خارجی داشتید میتوانید همه مقدار های بالا رو دوبار تعریف کنید و بین آنها کاما قرار بدید.

مثال:

box-shadow: 1px 10px 5px red, 5px -2px 3px 2px blue inset;

خوب. برمیگردیم به مثال اصلیمون.
توی تعریف box-shadow ما اومده که:

box-shadow:0 0 0 200px rgba(0,0,0,0.8);

یعنی به کادر ما یک سایه از مرکز (بالا به پایین صفر و چپ به راست صفر) با محو شدگی صفر و گسترش سایه ۲۰۰پیکسل به این معنی که بیش از اندازه کادر موردنظرمون ایجاد بشه و به خاطر overflow: hidden باکس والد آن حذف می‌شود.

حالا برای اینکه بتونیم کادرمون رو جابجا کنیم باید به باکس .imagemask رویداد onmousedown یک تابع رو بدیم که به صورت زیر خواهد شد:

<div class="image"><img alt="Image" src="http://pilevar.net/fa/blog/wp-content/uploads/2013/03/p2.jpeg" />
<div class="imagemask" onmousedown="dragstart(this)"></div>
</div>

و در جاوا اسکریپت هم:

var dragobjekt = null;

var dragx = 0;
var dragy = 0;

var posx = 0;
var posy = 0;

function draginit() {
     document.onmousemove = drag;
     document.onmouseup = dragstop;
}

function dragstart(element) {
     dragobjekt = element;
     dragx = posx - dragobjekt.offsetLeft;
     dragy = posy - dragobjekt.offsetTop;
}

function dragstop() {
     dragobjekt=null;
}

function drag(ereignis) {
     posy = document.all ? window.event.clientY : ereignis.pageY;
     dragobjekt.style.top = (posy - dragy) + "px";
}
draginit();

و نتیجه نهایی:

Image




حالا اگر شما نیاز به دانستن عدد “فاصله از بالا” دارید کافیه کل اطلاعات در یک یک فرم قرار بدید و همونجوری که تابع drag() مقدار top کادر imagemask رو تغییر میدید، همون مقدار رو هم در داخل یک فیلد ورودی از نوع hidden بریزید و در مرحله بعدی آن را پردازش کنید.

برای ایجاد محدودیت اینکه کادر انتخاب شما از بالا و پایین از کادر بالایی خود خارج نشود، شما میتونید در همان تابع drag قبل از تغییر استایل top کادر imagemask یک شرط قرار بدین که اگر مقدار نهایی بزرگتر مساوی صفر و کوچکتر مساوی اندازه تصویر منهای ارتفاع کادر imagemask شما بود، استایل top آن کادر را تغییر دهد.

امیدوارم این مطلب به دردتون خورده و ذهنتون رو برای انتخاب راه های ساده برای مشکلات پیچیده آماده کرده باشه.

موفق باشید.