ক্রোমের টাচ এপিআই-তে তুলনামূলকভাবে ছোট পরিবর্তন Chrome 39- এ এসেছে, যা TouchEvent অবজেক্টে webkitRotationAngle অ্যাট্রিবিউটের একটি কার্যকরী সংস্করণ চালু করেছে। এখন Chrome 45-এ (বিটা জুলাই 2015), এটিকে rotationAngle হিসাবে আনপ্রিফিক্স করা হয়েছে, যা আমাদের বাস্তবায়নকে TouchEvent Spec এবং Firefox-এর সাথে আরও ইনলাইন এনেছে।
যদিও এটি কিছুক্ষণের জন্য হয়েছে, এটি rotationAngle কী তা ব্যাখ্যা করার মতো কারণ এটি বিশেষ করে মোবাইল ডিভাইসে স্পর্শ অঙ্গভঙ্গির আরও কিছু আকর্ষণীয় ব্যবহার খুলে দেয়।
প্রযুক্তিগতভাবে, ঘূর্ণন কোণ হল Touch.radiusX এবং Touch.radiusY দ্বারা সংজ্ঞায়িত পরিচিতি এলাকার উপবৃত্তের ডিগ্রীর সংখ্যা (0 এবং 90 এর মধ্যে)। ভুল, শান্ত, তাই না? (এটি লক্ষ করা উচিত যে আমি কেবলমাত্র জেনেছি যে অ্যান্ড্রয়েডে ক্রোম radiusX এবং radiusY মানগুলিকে 64px এ লক করে না কিন্তু পরিবর্তে এটি স্ক্রিনের যোগাযোগের আকারের উপর নির্ভর করে পরিবর্তিত হয়)।
এটা আসলে কি মানে?
এটিকে একটি স্ক্রিনে ব্যবহারকারীর আঙুলের আকার, আকৃতি এবং অভিযোজন সঠিকভাবে উপস্থাপন করার উপায় হিসাবে ভাবুন৷ ব্যবহারকারীরা সর্বদা তাদের আঙুলের নিব দিয়ে স্ক্রীনে ট্যাপ করেন না, বরং ঘন ঘন স্ক্রীন টিপুন যেন তারা পুলিশকে আঙ্গুলের ছাপ দিচ্ছে। rotationAngle ব্যতীত আপনি সহজেই বুঝতে পারবেন স্পর্শ অঙ্গভঙ্গিটি কতটা প্রশস্ত এবং কতটা লম্বা। rotationAngle সাহায্যে আপনি 90 ডিগ্রি ঘূর্ণন পাবেন (0 উল্লম্ব এবং 90 অনুভূমিক)। কেন শুধু 90 ডিগ্রী? আপনার শুধুমাত্র 90 ডিগ্রী প্রয়োজন কারণ আপনি এই কোণগুলি অতিক্রম করার সাথে সাথে radiusX এবং radiusY পরিবর্তিত হবে।
এই সম্পর্কে আরেকটি দুর্দান্ত জিনিস হল যে ব্যবহারকারীর আঙুলের যোগাযোগের ক্ষেত্রটি পরিবর্তিত হয় কারণ তারা স্ক্রিনে তাদের আঙুলের চাপের মাত্রা পরিবর্তিত হয়। এটি সরাসরি force প্রতিস্থাপন নয়, তবে আপনি পর্দায় হালকা ব্রাশগুলির মধ্যে পার্থক্য করতে পারেন কারণ তাদের একটি শক্ত চাপের চেয়ে ছোট পৃষ্ঠের ক্ষেত্রফল থাকবে।
আমি এটা কিভাবে ব্যবহার করতে পারি?
প্রথমে আপনার একটি ডিভাইস দরকার যা এটি সনাক্ত করতে পারে। একটি নেক্সাস 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;
আপনি অনুশীলনে এটি কোথায় ব্যবহার করবেন?
কিছু সুস্পষ্ট জায়গা আছে যেখানে এটি ব্যবহারকারীর জন্য তাৎক্ষণিক সুবিধা হবে:
- উদাহরণস্বরূপ পেইন্টিং এবং ইমেজ ম্যানিপুলেশন ওয়েব অ্যাপগুলি ক্যানভাসে প্রয়োগ করা স্ট্রোক বা প্রভাব পরিবর্তন করতে এই তথ্য ব্যবহার করতে পারে। আপনি ব্রাশের আকার পরিবর্তন করতে স্পর্শ ব্যাসার্ধ ব্যবহার করতে পারেন এবং আপনি ক্যানভাসে ব্রাশের যোগাযোগের কোণ পরিবর্তন করতে ঘূর্ণনকোণে একত্রিত করতে পারেন।
- বর্ধিত অঙ্গভঙ্গি স্বীকৃতি: আপনি যদি ঘূর্ণনকোণ বুঝতে পারেন তবে আপনি একটি বস্তুকে সুইভেল করতে একটি আঙুলের অঙ্গভঙ্গি তৈরি করতে পারেন।
প্রতিটি ডিভাইস কি এটি সমর্থন করে?
না। এটি এখনও খুব সাধারণ নয়। আপনার যদি Nexus 10 থাকে তাহলে আপনি নিচের মত কিছু দেখতে পাবেন,
ছবির ক্রেডিট রিক বায়ার্সকে ।
যখন একটি ডিভাইস স্পর্শের ঘূর্ণনের কোণ বুঝতে পারে না, তখন rotationAngle হবে 0 এবং radiusX এবং radiusY মান সমান হবে (তবে বর্তমান স্পর্শ পৃষ্ঠের ক্ষেত্রফলের উপর নির্ভর করে পরিবর্তিত হতে পারে)।
কেন বিরক্ত?
ভাল প্রশ্ন. ওয়েবে অনেক বৈশিষ্ট্যের মতো, এটি একটি সংযোজন অভিজ্ঞতা।
টাচ ইভেন্টগুলি কাজ করবে যখন সমর্থিত হবে, এবং যদি রেডিআই এবং ঘূর্ণন মান উপলব্ধ থাকে তবে আপনি ব্যবহারকারীকে আরও সক্ষম অভিজ্ঞতা দিতে আপনার অ্যাপ্লিকেশনটি উন্নত করতে পারেন। প্রত্যেক ব্যবহারকারীর কাছে ওয়াকম ট্যাবলেট নেই কিন্তু উপস্থিত হলে অনেক পেইন্টিং অ্যাপ্লিকেশন এটির সুবিধা নেবে।
পয়েন্টার ইভেন্ট সম্পর্কে কি?
এটি সত্যিই নিশ্চিত করার জন্য যে ডেভেলপাররা এটির উপর নির্ভর করে তাদের জন্য আমাদের কাছে একটি সম্পূর্ণ ফ্লেশ আউট টাচ ইভেন্ট API আছে। দেখুন আমি কীভাবে প্রশ্নটি কিছুটা এড়িয়ে গিয়েছি... আরও গুরুত্ব সহকারে, আপনি যদি ব্লিঙ্কের পয়েন্টার ইভেন্ট বাস্তবায়নের সাথে অনুসরণ করতে আগ্রহী হন তবে আপনি ইস্যু 471824 স্টার করতে পারেন এবং রিক বায়ার্সের ট্র্যাকিং ডক পড়তে পারেন।