Автоматически щелкните объект холста

Question

Я хочу автоматически щелкнуть объект холста HTML5, чтобы я мог запускать автоматическое тестирование на основе селена. Я прошел через много ресурсов о автоматически запускающее событие щелчка как в этом примере: Trigger Click

и этот пример о создании интерактивных объектов в полотне: Clicking Canvas Objects

Я попытался совместить эти два примера, чтобы сделать автоматически интерактивными холст объект. Но по какой-то причине я не могу заставить его работать. Я добавил следующий код во втором примере и должен автоматически щелкнуть объект по координате (305, 340).

var e = jQuery.Event("click", { pageX: 305, pageY: 340 }); 
 
$('#myCanvas').trigger(e);

var e = jQuery.Event("click", { pageX: 305, pageY: 340 }); $('#myCanvas').trigger(e);

Что я здесь отсутствует? Являются ли «нажимать на холст» и «нажимать на объект холста» разными понятиями? Пожалуйста помоги.

спасибо, что заранее.

Answer 1

Я, наконец, решил эту проблему. Я сохранил текущий экземпляр всего отображаемого объекта в массиве.

var node = new Array(); 
for((var i in currentProject.rectangle)){ 
node.push(toArray(currentProject.rectangle[i])); 
} 

Все эти объекты получили идентификатор, чтобы я мог получить доступ к этим объектам и их текущему положению через свой идентификатор. Позже, когда мне пришлось нажимать на определенный объект, я искал объект в этом массиве и получал его позицию x и y и просто переопределял значения pageX и pageY.

clickedX = currentProject.rectangle[ID].x; 
clickedY = currentProject.rectangle[ID].y; 
clickData = {x: clickedX, y: clickedY}; 

SimulatedClickEvent(clickData); 

function SimulatedClickEvent(data) { 
this.pageX = data.x; 
this.pageY = data.y; 
this.preventDefault = function() { 
} 
} 

Таким образом, я смог получить доступ к объектам в холсте, не сильно мешая холсту.

Answer 2

вот модификация примера кода вы получили выше

$(document).ready(function() { 

    // canvas 
    var x = 20; 
    var y = 20 
    var canvas = document.getElementById('canvas'); 
    var ctx = canvas.getContext('2d'); 
    ctx.fillRect(x, y, 25, 25); 

    // canvas click 
    $("canvas").on({ 
     click: function(e){ 
      alert(e.pageX +", "+ e.pageY); 
     } 
    }); 

    // jquery event 
    var l = $("canvas").offset().left; 
    var t = $("canvas").offset().top; 
    var eve = jQuery.Event("click", { pageX: x+l, pageY: y+t }); 
    $("canvas").trigger(eve); 

}); 

вот рабочий пример >>http://jsfiddle.net/goutgffw/1

Answer 3

Вы пробовали с помощью щелчка координаты на объекте холст. Я столкнулся с подобной ситуацией, когда мне нужно щелкнуть элемент внутри холста, и следующий код сделал трюк.

Actions clickAt = new Actions(driver); 
clickAt.moveToElement(canvasElement, xCoordinates, yCoordinates).click(); 
clickAt.build().perform();