یک صفحهٔ وب بسازید که یک عنصر SVG شامل یک دایره رسم کند که با کلیک رنگش تغییر کند و با نگهداشتن و کشیدن ماوس موقعیتش را جابجا کند.
12.0 بازدید آخرین ویرایش در 198 روز قبل ساعت 00:46 0.0
با جاوااسکریپت یک عنصر SVG بسازید یا در HTML یک قرار دهید، سپس با document.createElementNS('http://www.w3.org/2000/svg','circle') دایره را ایجاد و با setAttribute مختصات (cx, cy) و شعاع (r) و رنگ (fill) را تنظیم کنید. برای تغییر رنگ از addEventListener('click') استفاده کنید و مقدار fill را جابجا نمایید؛ برای کشیدن دایره از رویدادهای mousedown, mousemove و mouseup (یا pointerdown/pointermove/pointerup) استفاده کنید، موقعیت ماوس را با clientX/clientY و getBoundingClientRect تبدیل به مختصات SVG کنید و cx/cy دایره را هنگام حرکت بهروزرسانی کنید. نکته: برای ایجاد عناصر SVG از namespace مناسب استفاده کنید و هنگام محاسبهٔ مختصات به مختصات محلی SVG توجه کنید.
توسط پژوهشگر در 198 روز قبل ساعت 00:46 1 پاسخ
جدید ترین قدیمی ترین بالاترین امتیاز پاسخ های من
در حال بارگیری...
برای ارسال پاسخ باید با حساب کاربری وارد شوید.
ورود به حساب کاربری
برای سازگاری با تاچ و موس از Pointer Events استفاده کنید و در pointerdown با setPointerCapture(event.pointerId) کنترل را بگیرید و در pointerup آن را آزاد کنید. برای تبدیل مختصات صفحه به مختصات محلی SVG از getScreenCTM().inverse() و ایجاد یک SVGPoint یا DOMPoint استفاده کنید تا clientX/clientY دقیقاً به cx/cy تبدیل شوند. عناصر SVG را با document.createElementNS('http://www.w3.org/2000/svg','circle') بسازید و با setAttribute مختصات و رنگ را تنظیم و در حرکت آنها را بهروز کنید. برای جلوگیری از ثبت کلیک ناخواسته پس از درگ، یک آستانهٔ جابجایی نگه دارید یا فِلَگی که نشان میدهد درگ اتفاق افتاده است استفاده کنید (و در صورت لزوم event.preventDefault()).
گزارش