изменение кликаемого изображения на холсте - PullRequest
Новая
       3

изменение кликаемого изображения на холсте

0 голосов
/ 12 сентября 2011

Я делаю этот простой холст.в нем три изображения (идентичные изображения).Я хочу изменить только изображение, на которое нажали.что я пытаюсь сделать, это сохранить порядок изображений в массиве.и только изменение индекса изображения, по которому щелкнули.пока я не знаю, как это сделать!я сделал это с жестко закодированным, но не могу сделать это в целом, так как я не знаю, где пользователь нажал.если бы я мог получить положение мыши, когда она была нажата, или идентификатор изображения, по которому щелкнули, я мог бы что-то сделать, но я новичок в html5, так что я понятия не имею, как это сделать, может ли кто-нибудь указать мне правуюнаправление?вот мой код 

    <style> 
        body {
            margin: 0px;
            padding: 0px;
        }

        #myCanvas {
            border: 2px solid #9C9898;
        }
    </style> 
    <script> 

       if(window.addEventListener) {

window.addEventListener('load', function ()
{

           var my = new Array();
var i=0;
            var canvas = document.getElementById("myCanvas");
            var context = canvas.getContext("2d");
            var imageObj = new Image();
            var imageObj1 = new Image();
            imageObj.onload = function(){
 imageObj1.src = "watermelon-duck-outline.png";
 for (var x = 0; x <= 1200;x += 400 ) { alert(i,x);
  my[i]=imageObj;
 context.drawImage(imageObj, x, 0);
++i;
}
context.drawImage(imageObj, 0, 0);
            }
            imageObj.src = "tomato2.jpg";

            change.addEventListener('mousedown', function ()      {ButtonDown (change)}, false);

            function ButtonDown (change)
{ canvas.width = canvas.width; 
 i--;
 for (var x = 800; x >= 0;x -= 400 ) {
  if(i!=2){my[i]=imageObj;}else{my[i]=imageObj1;}
 context.drawImage(my[i], x, 0);
i--;
}}



         init();
}, false); }
    </script> 
</head> 
<body >

    <canvas id="myCanvas" width="1250" height="650"> 
    </canvas>
    <button id="change" type="button">Change</button>

</body>

1 Ответ

1 голос
/ 12 сентября 2011

Демонстрация в реальном времени

Вот как бы я это сделал.В основном вам нужно хранить x,y,width,height каждого изображения.Эти значения нужны для того, чтобы при щелчке внутри холста можно было сопоставлять границы каждого изображения по x и y щелчка мыши.После этого можно легко определить, какое изображение было нажато.Надеемся, что следующего кода достаточно, чтобы вы пошли по правильному пути. 

var canvas = document.getElementById("myCanvas"),
    ctx = canvas.getContext("2d");

ctx.fillStyle = "#f00";
ctx.strokeStyle = "#0f0";

var images = [];
images.push({x : 10, y : 10, width:50, height:50}, {x : 70, y : 10, width:50, height:50}, {x : 130, y : 10, width:50, height:50});

//draw some rects, this would be your images
for(var i = 0; i < images.length; i++){
    ctx.fillRect(images[i].x, images[i].y, images[i].width, images[i].height); 
}

canvas.onclick = function(e){
    var x = 0,
        y = 0;

    if (e.pageX || e.pageY) { 
        x = e.pageX;
        y = e.pageY;
    }
    else { 
        x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; 
        y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; 
    } 

    x -= canvas.offsetLeft;
    y -= canvas.offsetTop;

// This is where you go through all the images, and check the x and y from the mouse event against your images.
    for(var i = 0; i < images.length; i++){
        if(x > images[i].x && x < images[i].x + images[i].width && y > images[i].y && y < images[i].y + images[i].height){
            ctx.strokeRect(images[i].x, images[i].y, images[i].width, images[i].height); 
          alert('Image ' + i + ' selected');  
        }
    }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...