Не удалось манипулировать изображением с помощью кнопки масштабирования

<!DOCTYPE HTML> 
<html> 
<head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script> 
    <style> 
     body { 
      margin: 0px; 
      padding: 0px; 
     } 

     #wrapper { 
      position: relative; 
      border: 1px solid #9C9898; 
      width: 578px; 
      height: 200px; 
     } 

     #buttonWrapper { 
      position: absolute; 
      width: 30px; 
      top: 2px; 
      right: 2px; 
     } 

     input[type = 
     "button"] { 
      padding: 5px; 
      width: 30px; 
      margin: 0px 0px 2px 0px; 
     } 
    </style> 
    <script> 
     function draw(scale, translatePos){ 
      var canvas = document.getElementById("myCanvas"); 
      var context = canvas.getContext("2d"); 
      var imageObj = new Image(); 

       imageObj.onload = function() { 
       context.drawImage(imageObj, 69, 50); 
       }; 
       imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg'; 

      // clear canvas 
      context.clearRect(0, 0, canvas.width, canvas.height); 

      context.save(); 
      context.translate(translatePos.x, translatePos.y); 
      context.scale(scale, scale); 
      /*context.beginPath(); // begin custom shape 
      context.moveTo(-119, -20); 
      context.bezierCurveTo(-159, 0, -159, 50, -59, 50); 
      context.bezierCurveTo(-39, 80, 31, 80, 51, 50); 
      context.bezierCurveTo(131, 50, 131, 20, 101, 0); 
      context.bezierCurveTo(141, -60, 81, -70, 51, -50); 
      context.bezierCurveTo(31, -95, -39, -80, -39, -50); 
      context.bezierCurveTo(-89, -95, -139, -80, -119, -20); 
      context.closePath(); // complete custom shape 
      var grd = context.createLinearGradient(-59, -100, 81, 100); 
      grd.addColorStop(0, "#8ED6FF"); // light blue 
      grd.addColorStop(1, "#004CB3"); // dark blue 
      context.fillStyle = grd; 
      context.fill(); 

      context.lineWidth = 5; 
      context.strokeStyle = "#0000ff"; 
      context.stroke();*/ 
      context.restore(); 
     } 

     window.onload = function(){ 
      var canvas = document.getElementById("myCanvas"); 

      var translatePos = { 
       x: canvas.width/2, 
       y: canvas.height/2 
      }; 

      var scale = 1.0; 
      var scaleMultiplier = 0.8; 
      var startDragOffset = {}; 
      var mouseDown = false; 

      // add button event listeners 
      document.getElementById("plus").addEventListener("click", function(){ 
       scale /= scaleMultiplier; 
       draw(scale, translatePos); 
      }, false); 

      document.getElementById("minus").addEventListener("click", function(){ 
       scale *= scaleMultiplier; 
       draw(scale, translatePos); 
      }, false); 

      // add event listeners to handle screen drag 
      canvas.addEventListener("mousedown", function(evt){ 
       mouseDown = true; 
       startDragOffset.x = evt.clientX - translatePos.x; 
       startDragOffset.y = evt.clientY - translatePos.y; 
      }); 

      canvas.addEventListener("mouseup", function(evt){ 
       mouseDown = false; 
      }); 

      canvas.addEventListener("mouseover", function(evt){ 
       mouseDown = false; 
      }); 

      canvas.addEventListener("mouseout", function(evt){ 
       mouseDown = false; 
      }); 

      canvas.addEventListener("mousemove", function(evt){ 
       if (mouseDown) { 
        translatePos.x = evt.clientX - startDragOffset.x; 
        translatePos.y = evt.clientY - startDragOffset.y; 
        draw(scale, translatePos); 
       } 
      }); 

      draw(scale, translatePos); 
     }; 



     jQuery(document).ready(function(){ 
      $("#wrapper").mouseover(function(e){ 
       $('#status').html(e.pageX +', '+ e.pageY); 
      }); 
     }) 
    </script> 
</head> 
<body onmousedown="return false;"> 
    <div id="wrapper"> 
     <canvas id="myCanvas" width="578" height="200"> 
     </canvas> 
     <div id="buttonWrapper"> 
      <input type="button" id="plus" value="+"><input type="button" id="minus" value="-"> 
     </div> 
    </div> 
    <h2 id="status"> 
    0, 0 
    </h2> 
</body> 
</html>

Приведенный выше код взято с this question, который отлично работает, просто копируя весь код. Моя цель состоит в том, чтобы сохранить все, оставаясь тем же, но используя изображение вместо формы облака, которое рисовалось по контексту. Я попробовал метод drawImage и успешно нарисовал изображение, но я больше не мог увеличивать/уменьшать или даже перетаскивать. Могу ли я узнать, что случилось с context?Не удалось манипулировать изображением с помощью кнопки масштабирования

источник

2013-09-25 Isaac Lem

Не могли бы вы также/вместо показать код, который вы получили проблемы с? Код выше, если работает и из примера, не может помочь нам значительно отслеживать ошибку в вашем коде :-) – K3N

@ Ken-AbdiasSoftware: На самом деле есть и код для изображений и облака, просто прокомментируйте один из них. Во всяком случае, я прокомментировал облако и покажу изображение. Надеюсь, это поможет, спасибо. –

Ложная тревога, это просто я ослеп. Спасибо 8-) – K3N

Хорошо, что происходит в вашем коде сейчас, так это то, что вы рисуете свое изображение после вызова восстановления, в результате чего ничего не происходит.

Это связано с тем, что загрузка изображения асинхронна.

Что вам нужно сделать, это включить загрузку изображения так, чтобы он сошелся ранее в трубопроводе, затем использовать изображение, встроенное в масштабировании, например, принимая загрузку изображений из функции draw:

var canvas = document.getElementById("myCanvas"); 
var context = canvas.getContext("2d"); 
var imageObj = new Image(); 

imageObj.onload = function() { 
    /// now the image has loaded, now we can scale it 
    draw(); 
}; 
imageObj.src = 'image-url'; 

function draw() { 
    // clear canvas 
    context.clearRect(0, 0, canvas.width, canvas.height); 

    context.save(); 
    context.translate(translatePos.x, translatePos.y); 
    context.scale(scale, scale); 

    /// draw image here 
    context.drawImage(imageObj, 69, 50); 

    context.restore(); 
}

Тогда каждый раз, вам необходимо повторно масштаб изображения просто вызвать draw().

ONLINE DEMO HERE

источник

2013-09-25 04:04:54 K3N

Не удалось манипулировать изображением с помощью кнопки масштабирования

ответ

Смежные вопросы