Chrome-এর Touch API-তে তুলনামূলকভাবে ছোট পরিবর্তন Chrome 39-এ
করা হয়েছে, যা
TouchEvent অবজেক্টে webkitRotationAngle অ্যাট্রিবিউটের একটি কার্যকরী ভার্সন
নিয়ে এসেছে। এখন Chrome 45-এ (জুলাই ২০১৫-এ বিটা), এটি rotationAngle হিসেবে আনপ্রিফিক্সড,
যা আমাদের ইমপ্লিমেন্টেশনকে
TouchEvent
Spec এবং Firefox-এর সাথে আরও বেশি ইনলাইন করে তোলে।
যদিও এটি বেশ কিছুদিন ধরে রয়েছে, তবুও
rotationAngle কী তা ব্যাখ্যা করা প্রয়োজন কারণ এটি টাচ
জেসচারের আরও কিছু আকর্ষণীয় ব্যবহার উন্মুক্ত করে, বিশেষ করে মোবাইল ডিভাইসে।
টেকনিক্যালি, ঘূর্ণন কোণ হল
Touch.radiusX
এবং
Touch.radiusY দ্বারা সংজ্ঞায়িত
কন্ট্যাক্ট এরিয়া উপবৃত্তের ডিগ্রির সংখ্যা (০ থেকে ৯০-এর মধ্যে)।
দারুণ, তাই না? (এটি উল্লেখ করা উচিত যে আমি শুধু জানতে পেরেছি যে Android-এ Chrome
radiusX এবং radiusY ভ্যালু 64px-এ লক করে না, বরং
স্ক্রিনের কন্ট্যাক্ট সাইজের উপর নির্ভর করে এটি পরিবর্তিত হয়)।
এর আসল অর্থ কী?
স্ক্রিনে ব্যবহারকারীর আঙুলের আকার, আকৃতি এবং ওরিয়েন্টেশন সঠিকভাবে উপস্থাপন করার একটি উপায় হিসাবে এটি ভাবুন। ব্যবহারকারীরা সবসময় আঙুলের ডগা দিয়ে স্ক্রিনে ট্যাপ করেন না, বরং প্রায়শই স্ক্রিনে এমনভাবে প্রেস করেন যেন
পুলিশকে ফিঙ্গারপ্রিন্ট দিচ্ছেন। rotationAngle ছাড়া আপনি শুধু জানতে পারবেন যে
টাচ জেসচার কতটা চওড়া ও লম্বা ছিল। rotationAngle-এর সাহায্যে, আপনি
৯০ ডিগ্রি রোটেশন পাবেন (০ হল উল্লম্ব এবং ৯০ হল অনুভূমিক)। শুধু ৯০ ডিগ্রি
কেন? আপনার শুধু ৯০ ডিগ্রি প্রয়োজন কারণ আপনি যখন সেইসব অ্যাঙ্গেল পেরিয়ে যাবেন
তখন radiusX এবং radiusY মানিয়ে নেওয়ার জন্য পরিবর্তিত হবে।
এর আরেকটি ভালো দিক হল, ব্যবহারকারী স্ক্রিনে আঙুল দিয়ে যে পরিমাণ চাপ দেন,
তার উপর নির্ভর করে আঙুলের কন্ট্যাক্ট এরিয়া পরিবর্তিত হয়। এটি force-এর
সরাসরি বিকল্প নয়, তবে আপনি স্ক্রিনে হালকা ব্রাশের মধ্যে পার্থক্য করতে পারবেন
কারণ জোরে প্রেস করার তুলনায় এগুলির সারফেস এরিয়া ছোট হবে।
আমি এটি কীভাবে ব্যবহার করতে পারি?
প্রথমে আপনার এমন একটি ডিভাইস প্রয়োজন যা এটি শনাক্ত করতে পারে। Nexus 10-এ ভালভাবে কাজ করবে। একটি দারুণ উদাহরণ হল সরাসরি রিক বায়ার্সের পেইন্ট উদাহরণ দেখা। তবে, ক্যানভাস ছাড়াই এটি ব্যবহার করার একটি উপায় এখানে দেওয়া হল।
var touchHandler = function(e) {
e.preventDefault();
var touches = e.changedTouches;
var touch = touches[0]; // only concerned about first touch.
var rotationAngle = touch.rotationAngle || touch.webkitRotationAngle || 0;
var radiusX = touch.radiusX || touch.webkitRadiusX || 1;
var radiusY = touch.radiusY || touch.webkitRadiusY || 1;
var force = touch.force || touch.webkitForce || 0;
// Use the rotationAngle to rotate the 'p' element.
p.style.width = radiusX * 2 + 'px';
p.style.height = radiusY * 2 + 'px';
p.style.transform = "rotate(" + rotationAngle + "deg)";
};
document.documentElement.ontouchstart = touchHandler;
document.documentElement.ontouchend = touchHandler;
document.documentElement.ontouchmove = touchHandler;
আপনি এটি প্র্যাক্টিসে কোথায় ব্যবহার করবেন?
এমন কিছু জায়গা আছে যেখানে এটি ব্যবহারকারীর জন্য অবিলম্বে উপকারী হবে:
- উদাহরণস্বরূপ, পেইন্টিং এবং ইমেজ ম্যানিপুলেশন ওয়েব অ্যাপগুলি ক্যানভাসে প্রয়োগ করা স্ট্রোক বা প্রভাবগুলি পরিবর্তন করতে এই তথ্য ব্যবহার করতে পারে। আপনি ব্রাশের সাইজ পরিবর্তন করতে টাচ রেডিয়াস ব্যবহার করতে পারেন এবং ক্যানভাসে ব্রাশের কন্ট্যাক্ট অ্যাঙ্গেল পরিবর্তন করতে rotationAngle-এর সাথে এটি একত্রিত করতে পারেন।
- উন্নত জেসচার শনাক্তকরণ: আপনি rotationAngle বুঝতে পারলে, কোনও অবজেক্টকে ঘোরাতে একটি সিঙ্গল-ফিঙ্গার জেসচার তৈরি করতে পারবেন।
সব ডিভাইসে কি এটি কাজ করে?
না। এটি এখনও খুব বেশি প্রচলিত নয়। আপনার কাছে Nexus 10 থাকলে, আপনি নিম্নলিখিত স্ক্রিন দেখতে পাবেন,
ছবির ক্রেডিট রিক বায়ার্স-এর।
কোনও ডিভাইস যখন টাচের রোটেশন অ্যাঙ্গেল বুঝতে পারে না, তখন
rotationAngle-এর মান ০ হবে এবং radiusX ও radiusY-এর মান
সমান হবে (তবে বর্তমান টাচ সারফেস এরিয়ার উপর নির্ভর করে আলাদা হতে পারে)।
কেনই বা কষ্ট করছ?
ভালো প্রশ্ন। ওয়েবের অনেক ফিচারের মতো, এটিও একটি অতিরিক্ত অভিজ্ঞতা।
টাচ ইভেন্ট কাজ করবে যখন তা সমর্থিত হবে এবং ব্যাসার্ধ ও রোটেশন ভ্যালু উপলভ্য থাকলে
আপনি নিজের অ্যাপ্লিকেশন উন্নত করতে পারবেন যাতে ব্যবহারকারী আরও ভালো
অভিজ্ঞতা পান। প্রত্যেক ব্যবহারকারীর কাছে Wacom ট্যাবলেট থাকে না, তবে থাকলে অনেক পেন্টিং
অ্যাপ্লিকেশন এটির সুবিধা নেবে।
পয়েন্টার ইভেন্ট সম্পর্কে কী বলা যায়?
এটি আসলে শুধু নিশ্চিত করার জন্য যে আমাদের কাছে ডেভেলপারদের জন্য একটি সম্পূর্ণ টাচ ইভেন্ট API আছে যারা এটির উপর নির্ভর করে। দেখুন কীভাবে আমি প্রশ্নটি একটু এড়িয়ে গেলাম... তবে, আপনি যদি Blink-এর PointerEvent ইমপ্লিমেন্টেশন ফলো করতে আগ্রহী হন, তাহলে সমস্যা 471824-এ স্টার দিতে পারেন এবং রিক বায়ার্সের ট্র্যাকিং ডকুমেন্ট পড়তে পারেন।