আমি ক্যানভাস উপাদানটিতে কীভাবে একটি সহজ অন্লিক ইভেন্ট হ্যান্ডলার যুক্ত করব?

128

আমি একজন অভিজ্ঞ জাভা প্রোগ্রামার তবে প্রায় এক দশকের মধ্যে প্রথমবারের মতো কয়েকটি জাভাস্ক্রিপ্ট / এইচটিএমএল 5 স্টাফটি দেখছি। এখনকার সবচেয়ে সহজ জিনিসটি কী হওয়া উচিত তা সম্পর্কে আমি পুরোপুরি স্ট্যাম্পড।

উদাহরণ হিসাবে আমি কেবল কিছু আঁকতে এবং এটিতে একটি ইভেন্ট হ্যান্ডলার যুক্ত করতে চেয়েছিলাম। আমি নিশ্চিত যে আমি বোকা কিছু করছি, তবে আমি সর্বত্র অনুসন্ধান করেছি এবং প্রস্তাবিত কিছুই নেই (যেমন এই প্রশ্নের উত্তর: জাভাস্ক্রিপ্টের সাহায্যে ইনপুটটিতে অন্লিক সম্পত্তি যুক্ত করুন) ) কাজ করে। আমি ফায়ারফক্স 10.0.1 ব্যবহার করছি। আমার কোড অনুসরণ। আপনি বেশ কয়েকটি মন্তব্য করা লাইন দেখতে পাবেন এবং প্রত্যেকের শেষে কী (বা কী ঘটে না) তার বিবরণ।

এখানে সঠিক বাক্য গঠন কী? আমি পাগল হতে চলেছি!

<html>
<body>
    <canvas id="myCanvas" width="300" height="150"/>
    <script language="JavaScript">
        var elem = document.getElementById('myCanvas');
        // elem.onClick = alert("hello world");  - displays alert without clicking
        // elem.onClick = alert('hello world');  - displays alert without clicking
        // elem.onClick = "alert('hello world!')";  - does nothing, even with clicking
        // elem.onClick = function() { alert('hello world!'); };  - does nothing
        // elem.onClick = function() { alert("hello world!"); };  - does nothing
        var context = elem.getContext('2d');
        context.fillStyle = '#05EFFF';
        context.fillRect(0, 0, 150, 100);
    </script>

</body>

— যির
সূত্র

8

onclickপরিবর্তে ব্যবহার করুনonClick

— noob

1

সেই চেষ্টাগুলি কেন কার্যকর হয়নি তা বিশদভাবে জানাতে ... মন্তব্যগুলির প্রথম কয়েকটি অবিলম্বে একটি সতর্কতা প্রদর্শন করে কারণ আপনি যে ফাংশনটি কল করবেন তার সংজ্ঞা না দিয়ে alert()সরাসরি ডেকেছেন । বাকিরা মূলধনের কারণে কিছু না করে । <script>alert()onclick

— LarsH

আপনি এই লিব ব্যবহার করতে পারেন jsfiddle.net/user/zlatnaspirala/fiddles এ সৌন্দর্য bitbucket.org/nikola_l/visual-js । আপনি অনেকগুলি বৈশিষ্ট্য পাবেন +

— নিকোলা লুকিক

223

আপনি যখন কোনও canvasউপাদানের দিকে টানেন, আপনি কেবল তাত্ক্ষণিক মোডে একটি বিটম্যাপ আঁকছেন ।

উপাদান (আকৃতি, লাইন, চিত্র) যে টানা হয় পিক্সেল তারা ব্যবহার এবং তাদের রঙ ব্যতীত কোন প্রতিনিধিত্ব আছে।

অতএব, কোনও উপাদান (আকৃতি) এ ক্লিক ইভেন্ট পেতে আপনার এইচটিএমএল উপাদানটিতে ক্লিক ইভেন্টগুলি ক্যাপচার করতে হবে এবং কোন উপাদানটি ক্লিক করা হয়েছিল তা নির্ধারণ করতে কিছু গণিত ব্যবহার করতে হবে, তবে আপনি যদি উপাদানগুলির প্রস্থ / উচ্চতা এবং এক্স / ওয়াই অফসেট সংরক্ষণ করে থাকেন ।canvas canvas

clickআপনার canvasউপাদানটিতে একটি ইভেন্ট যুক্ত করতে , ব্যবহার করুন ...

canvas.addEventListener('click', function() { }, false);

যা নির্ধারণ করতে উপাদানটি ক্লিক করা হয়েছিল ...

var elem = document.getElementById('myCanvas'),
    elemLeft = elem.offsetLeft + elem.clientLeft,
    elemTop = elem.offsetTop + elem.clientTop,
    context = elem.getContext('2d'),
    elements = [];

// Add event listener for `click` events.
elem.addEventListener('click', function(event) {
    var x = event.pageX - elemLeft,
        y = event.pageY - elemTop;

    // Collision detection between clicked offset and element.
    elements.forEach(function(element) {
        if (y > element.top && y < element.top + element.height 
            && x > element.left && x < element.left + element.width) {
            alert('clicked an element');
        }
    });

}, false);

// Add element.
elements.push({
    colour: '#05EFFF',
    width: 150,
    height: 100,
    top: 20,
    left: 15
});

// Render elements.
elements.forEach(function(element) {
    context.fillStyle = element.colour;
    context.fillRect(element.left, element.top, element.width, element.height);
});

jsFizz ।

এই কোডটি সংযুক্ত করে একটি click ইভেন্টটিকে canvasউপাদানটির সাথে এবং তারপরে elementএকটি elementsঅ্যারে ধাক্কা দেয় ( আমার কোডে একটি বলে ) একটি অ্যারেতে। আপনি এখানে ইচ্ছামত যোগ করতে পারেন।

অবজেক্টের অ্যারে তৈরি করার উদ্দেশ্য তাই আমরা তাদের বৈশিষ্ট্যগুলি পরে জিজ্ঞাসা করতে পারি। সমস্ত উপাদানগুলিকে অ্যারেতে ঠেলে দেওয়ার পরে আমরা প্রতিটিগুলির বৈশিষ্ট্যের উপর ভিত্তি করে লুপ করব এবং রেন্ডার করব।

যখন clickঘটনা সূত্রপাত হয়, কোড উপাদানের মাধ্যমে loops এবং নির্ধারণ করে যদি ক্লিকে উপাদানের কোনো শেষ হয়ে গেল elementsঅ্যারে। যদি তা হয় তবে এটি অগ্নিসংযোগ করে alert(), যা অ্যারে আইটেমটি সরিয়ে ফেলার মতো কিছু করার জন্য খুব সহজেই সংশোধন করা যেতে পারে, সেক্ষেত্রে আপনাকে আপডেট করার জন্য একটি পৃথক রেন্ডার ফাংশন প্রয়োজন canvas।

সম্পূর্ণতার জন্য, কেন আপনার প্রচেষ্টা কার্যকর হয়নি ...

elem.onClick = alert("hello world"); // displays alert without clicking

এটি alert()এর onClickসম্পত্তিটির রিটার্ন মান নির্ধারণ করে elem। এটি অবিলম্বে প্রার্থনা করা হয় alert()।

elem.onClick = alert('hello world');  // displays alert without clicking

জাভাস্ক্রিপ্টে, 'এবং "শব্দার্থগতভাবে অভিন্ন, লেক্সার সম্ভবত ['"]উদ্ধৃতিগুলির জন্য ব্যবহার করে ।

elem.onClick = "alert('hello world!')"; // does nothing, even with clicking

এর onClickসম্পত্তিতে আপনি একটি স্ট্রিং বরাদ্দ করছেন elem।

elem.onClick = function() { alert('hello world!'); }; // does nothing

জাভাস্ক্রিপ্ট কেস সংবেদনশীল। onclickসম্পত্তি ইভেন্ট হ্যান্ডলার সংযোজনের এর সেকেলে পদ্ধতি। এটি কেবলমাত্র একটি ইভেন্টকে সম্পত্তির সাথে সংযুক্ত করার অনুমতি দেয় এবং এইচটিএমএল সিরিয়াল করার সময় ইভেন্টটি হারাতে পারে।

elem.onClick = function() { alert("hello world!"); }; // does nothing

আবার ' === ",।

— Alex
সূত্র

হুম ... আমি ভুল বুঝে থাকলে আমাকে ক্ষমা করুন - তবে আমি কি ক্যানভাস উপাদানটিতে ক্লিক ইভেন্টগুলি ক্যাপচার করছি না? আমি নিশ্চিত না যে আপনি কী উপাদানটি ক্লিক করেছিলেন তার অর্থ কী । এই পৃষ্ঠায় একটি মাত্র উপাদান আছে, তাই না?

— জের

তিনি "ক্যানভাসের মধ্যে কোন উপাদান" বোঝাতে চেয়েছিলেন - এটি "আকৃতি" তাই বলে।

— জোভান পেরোভিচ

1

ধন্যবাদ, অনেক অনেক - যদিও আমি শেষের বিষয়ে সম্পূর্ণ পরিষ্কার নই। আমি এখানে উদাহরণ অনুসরণ করছি: বিকাশকারী.মোজিলা.আর.ইন / ডিওএম / এলিমেন্ট.অনক্লিক (তারা বর্ণিত বেনামে ফাংশন ব্যবহার করে) এবং এটি স্প্যানটি ক্যানভাসে পরিবর্তন করার পরেও কাজ করে। সুতরাং আমি কী ভুল করছি তা দেখার জন্য ধীরে ধীরে তাদের উদাহরণটি আমার মধ্যে রূপান্তর করা আমার পক্ষে কঠিন হবে না। বিস্তারিত প্রতিক্রিয়া জন্য আপনাকে ধন্যবাদ! আমার বিভিন্ন প্রচেষ্টা কেন ভুল হয়েছিল তার ব্যাখ্যা বিশেষভাবে সহায়ক ছিল।

— জের

1

@Jer কোন উদ্বেগ, আপনি আরও প্রশ্ন থাকে তাহলে, টুইটার, আমাকে পোস্ট এবং পিং করতে দ্বিধা বোধ করবেন @alexdickson ।

— অ্যালেক্স

1

@ হাশরোকটসাইন্টাক্স এটি ঠিকভাবে কাজ করা উচিত, কেবল স্মৃতিতে আপনার অবজেক্টের অবস্থান আপডেট করুন এবং সেই সংজ্ঞাগুলি রেন্ডার করতে ব্যবহার করুন

— অ্যালেক্স

4

উত্তরের জন্য সম্ভবত খুব দেরি হয়েছে তবে আমি আমার 70-480পরীক্ষার প্রস্তুতির সময় এটি পড়েছিলাম এবং এটি কাজ করে দেখতে পেয়েছি -

var elem = document.getElementById('myCanvas');
elem.onclick = function() { alert("hello world"); }

onclickপরিবর্তে হিসাবে ইভেন্ট লক্ষ্য করুন onClick।

জেএস বিন উদাহরণ।

— সোহম দাশগুপ্ত
সূত্র

3

আমি নিম্নলিখিত নিবন্ধটি পুনঃনির্দেশ করছি: এইচটিএমএল 5 ক্যানভাসের জন্য অঞ্চল সনাক্ত করুন এবং ক্যানভাস আকারের ইভেন্টগুলিতে ক্লিক করতে কীভাবে শুনবেন যা বিভিন্ন পরিস্থিতিতে পড়ে।

যাইহোক, এটি addHitRegionএপিআইকে কভার করে না , যা অবশ্যই সেরা উপায় হতে হবে (গণিত ফাংশন এবং / অথবা তুলনাগুলি বেশ ত্রুটির প্রবণতা)। এই পদ্ধতির বিকাশকারী.মোজিলা সম্পর্কে বিশদ

— RUser4512
সূত্র

"[ addHitRegion] অপ্রচলিত যদিও এটি এখনও কিছু ব্রাউজারে কাজ করতে পারে তবে এটি যে কোনও সময় অপসারণ করা যেতে পারে বলে এর ব্যবহারকে নিরুৎসাহিত করা হয়েছে। এটি ব্যবহার এড়াতে চেষ্টা করুন।" - অন্যদের ক্লিক ক্লিক করে সংরক্ষণ করার জন্য আপনার অন্তর্ভুক্ত করা ডিভ মোজ লিঙ্ক থেকে।

— ক্রিস

2

অ্যালেক্সের উত্তরের বিকল্প হিসাবে:

আপনি ক্যানভাস অঙ্কনের পরিবর্তে একটি এসভিজি অঙ্কন ব্যবহার করতে পারেন। সেখানে আপনি আঁকানো ডোম অবজেক্টগুলিতে সরাসরি ইভেন্টগুলি যুক্ত করতে পারেন।

উদাহরণস্বরূপ দেখুন:

কোনও এসজিজি চিত্রের অবজেক্টকে অনক্লিক দিয়ে ক্লিকযোগ্য করে তোলা, নিখুঁত অবস্থান এড়ানো

— Goswin
সূত্র

1

উত্সাহের জন্য দুঃখিত, এটি কেবলমাত্র আমার একটি সমস্যা ছিল যার জন্য এসভিজি ব্যবহার করা সুস্পষ্ট সমাধান, এবং আপনার মন্তব্য না হওয়া পর্যন্ত আমি এটি ভেবে

— দেখিনি Eli

1

আপনি divক্যানভাসের উপরে যেমন ডোম উপাদানগুলিও রাখতে পারেন যা আপনার ক্যানভাস উপাদানগুলিকে উপস্থাপন করে এবং একইভাবে অবস্থান করে।

এখন আপনি ইভেন্ট শ্রোতাদের এই ডিভগুলিতে সংযুক্ত করতে পারেন এবং প্রয়োজনীয় ক্রিয়া চালাতে পারেন।

— সের্গেই বাশারভ
সূত্র

1

কিছুটা স্থির ক্যানভাসের আরেকটি সস্তা বিকল্প হিসাবে, ব্যবহারের মানচিত্রের সংজ্ঞা সহ ওভারলেলিং আইএমজি উপাদান ব্যবহার করা দ্রুত এবং নোংরা। পাই চার্টের মতো বহুভিত্তিক ভিত্তিক ক্যানভাস উপাদানগুলিতে বিশেষত ভাল কাজ করে।

— TadLewis
সূত্র

0

অ্যালেক্স উত্তরটি বেশ ঝরঝরে তবে কনটেক্সট রোটেটটি ব্যবহার করার সময় এক্স, ওয়াই স্থানাঙ্কগুলি সনাক্ত করা শক্ত হতে পারে, তাই আমি কীভাবে এটির ট্র্যাক রাখতে হবে তা দেখিয়ে একটি ডেমো তৈরি করেছি ।

মূলত আমি এই ফাংশনটি ব্যবহার করছি এবং এটেলটি আঁকার আগে angel স্বর্গদূতটিতে এটি কোণ এবং দূরত্বের পরিমাণ দিয়েছি।

function rotCor(angle, length){
    var cos = Math.cos(angle);
    var sin = Math.sin(angle);

    var newx = length*cos;
    var newy = length*sin;

    return {
        x : newx,
        y : newy
    };
}

— ইমরান বুঘিও
সূত্র