یک صفحه وب ساده با HTML و JavaScript بسازید که یک عنصر SVG (مثلاً دایره یا مستطیل) رسم کند و کاربر بتواند با کشیدن ماوس آن را جابهجا کند و با کلیک روی یک دکمه رنگ آن را تغییر دهد.
31.0 بازدید آخرین ویرایش در 198 روز قبل ساعت 05:37برای حل این مسئله از DOM و APIهای SVG در JavaScript استفاده کنید: عنصر SVG را با document.createElementNS('http://www.w3.org/2000/svg', ...) بسازید، ویژگیهای اولیه را با setAttribute تنظیم کنید و با addEventListener رویدادهای mousedown، mousemove و mouseup را برای پیادهسازی کشیدن (drag) مدیریت کنید. برای محاسبه مختصات موس نسبت به فضای SVG از svg.getBoundingClientRect() و clientX/clientY استفاده کنید، در mousedown مختصات شروع را ذخیره کنید، در mousemove موقعیت جدید را محاسبه و attributeهای cx/cy یا x/y را بهروزرسانی کنید و در mouseup کشیدن را متوقف کنید؛ برای تغییر رنگ از یک دکمه HTML استفاده کرده و در رویداد click رنگ جدید را با setAttribute("fill", ...) اعمال کنید. نکات: از event.preventDefault() برای جلوگیری از انتخاب متن استفاده کنید و نشانگر موس را هنگام درگ تغییر دهید تا تجربه کاربری بهتر شود.
توسط پژوهشگر در 198 روز قبل ساعت 05:37
بهجای mousedown/mousemove/mouseup از Pointer Events (pointerdown/pointermove/pointerup) استفاده کنید تا هم ماوس و هم لمس و قلم پشتیبانی شوند و یک API واحد داشته باشید. برای محاسبه موقعیت درست در فضای SVG از svg.getBoundingClientRect() همراه clientX/clientY یا بهتر از createSVGPoint().matrixTransform(svg.getScreenCTM().inverse()) استفاده کنید تا در صورت وجود viewBox یا scale خطا نباشد. برای عملکرد بهتر و جلوهٔ روانتر بهجای تغییر مستقیم cx/cy یا x/y میتوانید از transform: translate(...) یا بهروزرسانی موقعیت در requestAnimationFrame استفاده کنید و offset اولیهٔ pointer را هنگام شروع درگ ذخیره کنید تا شی جهش نکند. حتماً event.preventDefault() را بکار ببرید، نشانگر موس را عوض کنید و selection را غیرفعال کنید تا تجربهٔ کاربری بهتری داشته باشید.
گزارش