如何使畫布上的上傳圖像像Google Map函數一樣可拖動？

Question

我的問題說明了一切。 這是將圖片上傳到canvas元素中的代碼，我希望它可以像Google地圖中的地圖一樣可拖動。 最終，我將要放大和縮小。

在Canvas中甚至有可能嗎？ 在很多搜索中，我發現Canvas仍然有局限性，因此我們應該首先回答這個問題。

如果有人可以找到我，那只是最好的javascript代碼。 我最終將其轉換為應用程序，我想用更簡單的JS減少加載時間。

如果有人真的有很好的iOS開發canvas.html5.javascript源，我也將非常感謝。 這是我的第一個項目，並且像往常一樣，我付出了更多的努力。 謝謝！

<!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>

謝謝！

Answer 1

您將需要將mouse / touch事件綁定添加到canvas元素，然后根據事件重新繪制畫布。

http://jsfiddle.net/rpKXm/

這是我一起提出的一個粗略例子。 它不能處理多次拖動，但我將其作為練習留給您。

希望能幫助到你

如何使畫布上的上傳圖像像Google Map函數一樣可拖動？

問題描述

1 個解決方案

解決方案1
1 2012-03-31 16:28:32

如何使畫布上的上傳圖像像Google Map函數一樣可拖動？

問題描述

1 個解決方案

解決方案1 1 2012-03-31 16:28:32

解決方案1
1 2012-03-31 16:28:32