Interdire de placer la croix sur certaines coordonnées

Je vise à transmettre le test suivant à quelques personnes. L'exercice consiste à choisir un point sur l'image qui sera représenté par une croix.Interdire de placer la croix sur certaines coordonnées

Avec .php je vais stocker chaque participation, et pour chaque nouvel affichage pour une nouvelle personne, la personne verra l'historique des choix. Dans l'exemple, il y avait une participation signel avec les coordonnées (570,80). Mon but, est d'interdire au participant suivant de placer sa croix sur la coordonnée (570,80) + - 10px (largeur de la croix). Pour extrapoler, le fonctionnement complet devrait permettre de choisir les coordonnées déjà choisies. Comment faire ça ?

<body> 
<div style="width : 75%;margin : auto;"> 
    <canvas id="Canvas" width="954" height="267"></canvas> 
</div> 

<script> 
var canvas = document.getElementById('Canvas'); 
var context = canvas.getContext("2d"); 

// Map sprite 
var mapSprite = new Image(); 
mapSprite.src = "image.png"; 
var array_x = ["570"]; 
var array_y = ["80"]; 





//Declare Marker sprite 
var Marker = function() { 
    this.Sprite = new Image(); 
    this.Sprite.src = "cross.png" 
    this.Width = 10; 
    this.Height = 10; 
    this.XPos = 0; 
    this.YPos = 0; 
} 

var Markers = new Array(); 

var mouseClicked = function (mouse) { 
    // Get corrent mouse coords 
    var rect = canvas.getBoundingClientRect(); 
    var mouseXPos = Math.round(mouse.x - rect.left); 
    var mouseYPos = Math.round(mouse.y - rect.top); 

    console.log("Marker added"); 

    // Move the marker when placed to a better location 
    var marker = new Marker(); 
    marker.XPos = mouseXPos - (marker.Width/2); 
    marker.YPos = mouseYPos - marker.Height; 
    marker.YPosNew = marker.YPos; 
    Markers.push(marker); 

    // Draw marker 
    context.drawImage(Markers[0].Sprite, Markers[0].XPos, Markers[0].YPos, Markers[0].Width, Markers[0].Height); 
    // Calculate postion text 
    var markerText = Markers[0].XPos + ", " + Markers[0].YPosNew; 


    // disable pointer after 1s 
    setTimeout(function(){ 
    document.getElementById('Canvas').style.cursor="not-allowed"; } , 1000); 
} 

// Add mouse click event listener to canvas 
canvas.addEventListener("mousedown", mouseClicked, false); 

var main = function() { 
    draw(); 
}; 

var draw = function() { 
    // Clear Canvas 
    context.fillStyle = "#000"; 
    context.fillRect(0, 0, canvas.width, canvas.height); 

    // Draw diagramme 
    context.drawImage(mapSprite, 0, 0, 954, 267); 
    //draw all precedent cross 
    cross = new Image(); 
    cross.src = "cross.png"; 

    setTimeout(function(){ 
    for (var i = 0; i < array_x.length; i++) { 
    context.drawImage(cross, array_x[i], array_y[i], 10, 10); 
    }}, 750); 


} 
mapSprite.addEventListener('load', main); 
</script>

Source

2017-10-02 ranell

il suffit d'utiliser un 'si()' chèque de déclaration? – ProEvilz

L'option la plus simple consiste simplement à vérifier si elle intersecte cette zone après qu'elle a été placée et affiche une erreur. Quel genre de chose essayez-vous de faire? – DBS

par exemple. 'if (coords == XX) {return false}' ou quelque chose le long de ces lignes – ProEvilz

Vous pouvez essayer quelque chose comme ça:

var array_x = [570], 
 
    array_y = [180] 
 

 
function canBeMarked(x, y) { 
 
    for (var i = 0; i < array_x.length; i++) { 
 
    if (x > array_x[i] - 10 && x < array_x[i] + 10 
 
    && y > array_y[i] - 10 && y < array_y[i] + 10) { 
 
     return false; 
 
    } 
 
    } 
 
    
 
    return true; 
 
} 
 

 
var x = 565, 
 
    y = 189; 
 
    
 
console.log(`[x: ${x}, y: ${y}] can be marked ? ${canBeMarked(x, y)}`); 
 

 
x = 200; 
 

 
console.log(`[x: ${x}, y: ${y}] can be marked ? ${canBeMarked(x, y)}`);

Source

2017-10-02 11:40:53

Interdire de placer la croix sur certaines coordonnées

Répondre

Questions connexes