Как сделать загруженное изображение на холсте перетаскиваемым как функция карты Google? - PullRequest
0 голосов
/ 31 марта 2012

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

Возможно ли это даже в Canvas?Во многих моих поисках я видел, что у Canvas все еще есть ограничения, поэтому мы должны сначала ответить на этот вопрос.

Если кто-то сможет найти меня, просто код JavaScript, который будет лучшим.В конце концов я перевожу это в приложение, и я хотел бы сократить время загрузки с помощью более простого JS.

Если у кого-то есть действительно хорошие исходники canvas.html5.javascript для разработки на ios, я был бы очень признателен за это.Это мой первый проект, и, как обычно, у меня есть немного больше, что я могу жевать.Спасибо!

<!doctype html>
<head>
<meta charset="utf-8">
<title>Capstone Test</title>

<link rel="stylesheet" type="text/css" href="style.css" />

<!-- iPad icon for app --!>
<link rel="apple-touch-icon" href="#" />
<link rel="apple-touch-icon-precomposed" href="#"/>

<!-- Controls page scaling -->
<meta name="viewport" content="user-scalable=yes, width=device-width" />

<script src="NKit.js" type="text/javascript" charset="utf-8"></script>

<script>
window.onload = function(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var destX = 0;
var destY = 0;
var imageObj = new Image();

imageObj.onload = function(){
    context.drawImage(imageObj, destX, destY);
};
imageObj.src = "westeros.png";

</script>

</head>

<body>

<div class="container">

<section class="left">

            <canvas id="myCanvas" height=1024 width=360>

            </canvas>

    </section>
</div>

Спасибо!

1 Ответ

1 голос
/ 31 марта 2012

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

http://jsfiddle.net/rpKXm/

вот грубый пример, который я бросил вместе. Он не обрабатывает многократные перетаскивания, но я оставлю это как упражнение для вас.

Надеюсь, это поможет

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...