Перемещение импортированного изображения на холст - PullRequest
Новая
       1

Перемещение импортированного изображения на холст

0 голосов
/ 29 июня 2011

У меня проблема с движущимся изображением при импорте его в холст.Я попробовал этот код, но он не работает.Код просто перетаскивает изображение на холст, и оно работает, но когда я пытаюсь его переместить, оно не перемещается.Может кто-нибудь сказать мне, где ошибка.Вот код: 

<body>
<section>

<div>
<canvas id="canvas" width="300" height="200" style="border:1px solid" >
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>
<input  type="button" name="save" value="Drag Image" onClick="drag()"/>

</div>

<script type="text/javascript">

function drag(){
context.fillText("Drop an image onto the canvas", 50, 30);

var dx = 5;
var dy = 5;
var x = 170
var y = 100;
var img = new Image();
        hasText = true,
    clearCanvas = function () {
    if (hasText) {context.clearRect(0, 0, canvas.width, canvas.height);
    hasText = false;
                                }
                            };
        img.addEventListener("load", function() {
        clearCanvas();
    context.drawImage(img, x, y);
    }, false);


        // To enable drag and drop
    canvas.addEventListener("dragover", function (evt) {
       evt.preventDefault();}, false);

      // Handle dropped image file - only Firefox and Google Chrome
      canvas.addEventListener("drop", function (evt) {
     var files = evt.dataTransfer.files;
     if (files.length > 0) {
     var file = files[0];
     if (typeof FileReader !== "undefined" && file.type.indexOf("image") != -1) {
    var reader = new FileReader();

    reader.onload = function (evt) {
    img.src = evt.target.result;
   };
   reader.readAsDataURL(file);}
    }
   evt.preventDefault();}, false);



function doKeyDown(evt){
  switch (evt.keyCode) {
    case 38:  /* Up arrow was pressed */
        if (y - dy > 0){ 
        y -= dy;
      }
      break;
    case 40:  /* Down arrow was pressed */
        if (y + dy < c){ 
        y += dy;
      }
      break;
    case 37:  /* Left arrow was pressed */
        if (x - dx > 0){ 
        x -= dx;
      }
      break;
    case 39:  /* Right arrow was pressed */
        if (x + dx < canvas.width){ 
        x += dx;
      }
      break;
  }
}
function draw(){
clearCanvas();
context.drawImage(img, x, y);}

img.addEventListener('keydown',doKeyDown,true);
}
</script>
<script type="text/javascript">

canvas = document.getElementById("canvas");
context = canvas.getContext("2d");
setInterval(draw,5);

</script>

</section>
</body>
</html>

1 Ответ

1 голос
/ 29 июня 2011

Есть некоторые небольшие синтаксические ошибки, которые вызвали некоторые ошибки, если вы используете Firefox, вы должны попытаться использовать встроенную консоль ошибок JavaScript для Firefox (Tools -> Error Console) или firebug илиЕсли вы используете Chrome, встроенную консоль (Tools -> Javascript console), и это должно помочь вам отладить ваш скрипт.Кажется, что события keydown, прикрепленные к элементам canvas или canvas, не срабатывают, а установка прослушивателя событий keydown для подключения к окну, кажется, заставляет его работать должным образом.Кроме того, код загрузки не работает в Chrome, но это отдельная проблема. 

<html>
<head>
<title>Test Page</title>
</head>
<body>

<canvas id="canvas" width="300" height="200" style="border:1px solid" >
    This text is displayed if your browser does not support HTML5 Canvas.
</canvas>
<input  type="button" name="save" value="Drag Image" onClick="drag()"/>

<script type="text/javascript">
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

function drag(){
    context.fillText("Drop an image onto the canvas", 50, 30);
}

var dx = 5;
var dy = 5;
var x = 170
var y = 100;
var img = new Image();
hasText = true;

clearCanvas = function () {
    if (hasText) {
        context.clearRect(0, 0, canvas.width, canvas.height);
        hasText = false;
    } else {
        context.clearRect(0, 0, canvas.width, canvas.height);
    }
};

img.addEventListener("load", function() {
    clearCanvas();
    context.drawImage(img, x, y);
}, false);

// To enable drag and drop
canvas.addEventListener("dragover", function (evt) {
    evt.preventDefault();
}, false);

// Handle dropped image file - only Firefox and Google Chrome
canvas.addEventListener("drop", function (evt) {
var files = evt.dataTransfer.files;
if (files.length > 0) {
    var file = files[0];
    if (typeof FileReader !== "undefined" && file.type.indexOf("image") != -1) {
        var reader = new FileReader();
        reader.onload = function (evt) {
            img.src = evt.target.result;
        };
        reader.readAsDataURL(file);
    }
}
evt.preventDefault();
}, false);

function doKeyDown(evt){
    console.log(evt.keyCode);
    switch (evt.keyCode) {
    case 38:  /* Up arrow was pressed */
        if (y - dy > 0){ 
            y -= dy;
        }
        break;
    case 40:  /* Down arrow was pressed */
        if (y + dy < canvas.height){ 
            y += dy;
        }
        break;
    case 37:  /* Left arrow was pressed */
        if (x - dx > 0){ 
            x -= dx;
        }
        break;
    case 39:  /* Right arrow was pressed */
        if (x + dx < canvas.width){ 
            x += dx;
        }
        break;
    }
    draw();
}

function draw(){
    clearCanvas();
    context.drawImage(img, x, y);
}

window.addEventListener('keydown', doKeyDown, false);

//setInterval(draw,5);
</script>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...