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

您需要将鼠标/触摸事件绑定添加到canvas元素，然后根据事件重绘画布。

http://jsfiddle.net/rpKXm/

这是一个粗略的例子，我把它们放在一起。它不会处理多个拖拽，但我会将其作为练习留给你。

希望有所帮助

如何在画布中上传图像像谷歌地图功能一样可拖动？

1 个答案: