JavaScript Canvas Image OnClick не работает -- javascript поле с участием html поле с участием canvas пол Связанный проблема

Javascript Canvas Image onclick not working


1
vote

проблема

русский

Я не в состоянии получить событие DOM Image OnClick для работы.

 <код> ImageView0  

Почему я не получаю сообщение журнала, когда я нажимаю на изображение. В разработчике инструменты я могу видеть функцию onclick не ноль для изображения.

Английский оригинал

I am failing at getting a DOM Image onclick event to work.

var context = document.getElementById('canvas').getContext('2d');  var image = new Image(); image.src = "foo.png" image.onclick = function(e) { console.log("clicked"); }   setInterval(function() {  context.drawImage(image, 100, 100, 50, 50);      }; 

Why do I not get the log message when i click on the image. In developer tools i can see the onclick function is not null for the image.

</div
        
 
 

Список ответов

2
 
vote
<Р> Да, что сказал Муса ... и несколько других вещей.

<сильный> Некоторые изменения кода

    .
  • Image.src =»foo.png» должен прийти после того, как функции image.onclick
  • Context.drawImage должен быть внутри функции image.onclick
  • setInterval не нужен, насколько я могу видеть,

Попробуйте:

 <код> <!doctype html> <html> <head> <link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>  <style>     body{ background-color: ivory; }     canvas{border:1px solid red;} </style>  <script> $(function(){      var context=document.getElementById("canvas").getContext("2d");      var image=new Image();     image.onload=function(){        context.drawImage(image,0,0);     }     image.src="http://i.imgur.com/nJiIJIJ.png";      document.getElementById("canvas").addEventListener("click", function(){console.log("clicked");}, false);   }); // end $(function(){}); </script>  </head>  <body>     <canvas id="canvas" width=300 height=300></canvas> </body> </html>   
 

Yes, what Musa said...and a few other things.

Some changes to your code

  • Image.src=" foo.png" should come after the image.onclick function
  • Context.drawImage should be inside the image.onclick function
  • setInterval is not needed as far as I can see

Try this:

<!doctype html> <html> <head> <link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>  <style>     body{ background-color: ivory; }     canvas{border:1px solid red;} </style>  <script> $(function(){      var context=document.getElementById("canvas").getContext("2d");      var image=new Image();     image.onload=function(){        context.drawImage(image,0,0);     }     image.src="http://i.imgur.com/nJiIJIJ.png";      document.getElementById("canvas").addEventListener("click", function(){console.log("clicked");}, false);   }); // end $(function(){}); </script>  </head>  <body>     <canvas id="canvas" width=300 height=300></canvas> </body> </html> 
</div
 
 
1
 
vote
<Р> Вы не можете установить OnClick для конкретного изображения, добавленного в холст. Вы можете установить OnClick для всего холста в одиночку, так что вы должны использовать любые JS сторонних или иначе вы должны сделать некоторые расчеты, которые находки, что вы нажали на изображении холста ..
 

You cannot set onclick for a particular image added in canvas . You can set onclick for the whole canvas alone so you have to use any third party js or else you should do some calculations which finds that you clicked on the image of the canvas ..

</div
 
 
     
     
1
 
vote

Другие пользователи правы.

Изображение, которое вы рисуете на холсте, это элемент DOM, но он отображается в положении, который не сохраняется в DOM.

Это не значит, что вы можете получить доступ к его позиции и сравнить его с положением мыши.

Я использую внешнюю библиотеку здесь, но это делает то, что вам нужно: http://jsfiddle.net / Saturnix / cyguh /

Это - это используемая библиотека.

Поскольку я не могу публиковать ссылку на jsfiddles без публикации кода, вот сценарий, который я написал для вас.

 <код> function demo(g) {     g.ctx.font = "bold 16px Arial";      g.draw = function () {         g.ctx.clearRect(0, 0, g.width, g.height)          var posX = 0;         var posY = 0;         g.ctx.drawImage(image, posX, posY);          if (g.mouseX > posX && g.mouseX < image.width &&             g.mouseY > posY && g.mouseY < image.height &&             g.mousePressed)         g.ctx.fillText("You're clicking the image!", g.mouseX, g.mouseY);      } }   
 

Other users are right.

The image you draw on the canvas is a DOM element but it is rendered in a position which is not stored in the DOM.

This doesn't mean you can access it's position and compare it with the mouse position.

I'm using an external library here, but it does what you need: http://jsfiddle.net/Saturnix/cygUH/

this is the library used.

Since I can't post link to jsfiddles without posting the code, here's the script I've wrote for you.

function demo(g) {     g.ctx.font = "bold 16px Arial";      g.draw = function () {         g.ctx.clearRect(0, 0, g.width, g.height)          var posX = 0;         var posY = 0;         g.ctx.drawImage(image, posX, posY);          if (g.mouseX > posX && g.mouseX < image.width &&             g.mouseY > posY && g.mouseY < image.height &&             g.mousePressed)         g.ctx.fillText("You're clicking the image!", g.mouseX, g.mouseY);      } } 
</div
 
 
1
 
vote

Вы можете бросить луч (с помощью onClick на холсте) в холст и вручную проверить ваши изображения для пересечения с ray. Вы должны написать

 <код> objectsUnderPoint( x, y );   
Функция

, которая возвращает массив всех изображений, которые пересекаются от луча на X, Y.

Это так, как обычно делается в 3D-двигателях. Вы необходимы, чтобы сохранить положение изображения как свойство изображения для тестирования пересечения.

 

You can cast a ray (with an onclick on the canvas) into the canvas and manually test your images for intersection with the ray. You should write a

objectsUnderPoint( x, y ); 

function that returns an array of all the images that intersect with the ray at x, y.

This is the way it is usually done in 3D engines as well. You ofcourse need to keep the image position as a property of the image for intersection testing.

</div
 
 

Связанный проблема

1  Изолированные Директива охвата с двусторонним связыванием не отражает изменения в объеме контроллера  ( Isolated scope directive with two way binding doesnt reflect changes in control ) 
<Сильное> Сводка: При попытке изменить переменную область (массив), которая была установлена ​​для двухстороннего привязки данных в пределах выделенной дир...

0  Как добавить значение для массива после проверки другого массива  ( How to add value to array after checking another array ) 
У меня есть два массива как таковые: <код> UserGroupUser[{Id:"1",UserId:"2",UserGroupId"1"}, {Id:"2",UserId:"3",UserGroupId"1"}, {Id:...

13  Как перечислить все зарегистрированные события узла DOM с помощью JavaScript?  ( How to list all registered events of a dom node using javascript ) 
Я могу добавить или удалить обработчик событий для узла DOM. Можно ли выяснить все зарегистрированные обработчики событий данного узла DOM? Я имею в виду прям...

0  Asp.net внутри тега скрипта  ( Asp net inside a script tag ) 
Я пытаюсь получить некоторую работу с некоторыми JavaScript, который делает график в зависимости от предоставленной вами информации. Я говорю о Это <код...

-8  Как автоматически форматировать пользовательский ввод 4 цифры до последних 2 цифр  ( How to automatically format user input 4 digits to last 2 digits ) 
У меня есть текстовое поле срок действия к кредитным картам, который пользователь, способный ввести 4 цифры, но я хочу автоматически форматировать ввод пользо...

1  Поток данных в реальном времени на веб-страницу  ( Stream realtime data to web page ) 
Я работаю над проектом, где мы хотим отслеживать данные на канале Comm и предоставить обратную связь на веб-страницу. Данные будут прочитаны процессом, работа...

1  Как я могу выбрать вторую кнопку Отмена, а не первым?  ( How can i select the second cancel button instead of the first ) 
Я хочу отменить второй элемент строки вместо первого. Ниже приведен какой-то пример код для 2 позиций: <код> <div class="screenlet-body"> <form na...

0  Анимация холста, проблема с расчетами математики в моем коде JavaScript  ( Canvas animation issue with math calculations in my javascript code ) 
<Сильная> идея: Привет, это мой первый эксперимент с холстом анимацией. Я не уверен, что эта концепция уже существует, но я назвал мою версию «Двухугосудар...

-2  Динамический фон WordPress на основе изображений слайдера  ( Dynamic wordpress background based on slider images ) 
Я использую NivoSlider на WordPress, и я хочу, чтобы фона моей домашней страницы измениться на основе текущего изображения слайда! У меня нет опыта работы в J...

0  Почему угловые $ не удаляют старое значение?  ( Why is angular scope not removing old value ) 
У меня есть следующий контроллер <код> angular.module('publicApp') .controller('URLSummaryCtrl', function ($scope, $location, Article, $rootScope, $timeou...

0  Как создать элемент DOM в другой шаблон?  ( How to create a dom element to another template ) 
У меня есть пример сценария. Короче говоря - если вы нажмете на «Добавить» создают ряд новых элементов, так как он был заполнен полями. Используемый ионный. Н...

2  Это хорошая идея до $ .post в Google Spreadsheet?  ( Is it a good idea to post to google spreadsheet ) 
Я пытаюсь разработать функцию в моей веб-странице, которая посылает данные как можно добраться до доступа к центральному репозиторию позже. Было бы здорово, е...

0  По какой-то причине мой нижний колонтитул не очень мобильный  ( For some reason my footer isnt very mobile friendly ) 
90% моего веб-сайта мобильнее (все равно размера), но по какой-то причине мой нижний колонтитул в основном полностью отрезан на мобильном телефоне. То, как ...

3  OnleftClick & OnrightClick JavaScript Функции  ( Onleftclick onrightclick javascript functions ) 
В моем боковом коде сервера я динамически строим таблицу и именно сейчас я добавляю следующий код, чтобы обрабатывать Щелчок строки. <код> tr.Attributes.Add...

1  Расширение фона с помощью JavaScript  ( Extending a background using javascript ) 
У меня есть страница, которая выглядит так <код> ----------------------------------- | ************* | | ************* ...

Связанный проблема

1  Изолированные Директива охвата с двусторонним связыванием не отражает изменения в объеме контроллера 
0  Как добавить значение для массива после проверки другого массива 
13  Как перечислить все зарегистрированные события узла DOM с помощью JavaScript? 
0  Asp.net внутри тега скрипта 
-8  Как автоматически форматировать пользовательский ввод 4 цифры до последних 2 цифр 
1  Поток данных в реальном времени на веб-страницу 
1  Как я могу выбрать вторую кнопку Отмена, а не первым? 
0  Анимация холста, проблема с расчетами математики в моем коде JavaScript 
-2  Динамический фон WordPress на основе изображений слайдера 
0  Почему угловые $ не удаляют старое значение? 
0  Как создать элемент DOM в другой шаблон? 
2  Это хорошая идея до $ .post в Google Spreadsheet? 
0  По какой-то причине мой нижний колонтитул не очень мобильный 
3  OnleftClick & OnrightClick JavaScript Функции 
1  Расширение фона с помощью JavaScript