- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我正在寻找一种最快速、最轻便的方法来将形状和 Sprite 拖放到 JS Canvas 上以用于游戏开发目的。
我首先使用当前鼠标位置和圆圈的原点进行距离检查。它可以工作,但是当它们重叠时我们会遇到问题,而且我不知道在每个“帧”上测试多个 Sprite 和其他形状时它的效果如何。
感谢任何关于更好方法的评论或指示!
我宁愿不使用像 jQuery 这样的库,因为我追求纯粹的速度和轻便,当然还要学习实际的方法!这是我所在的位置:
//add the canvas listeners and functions
canvas.addEventListener("mousemove",mousemove);
canvas.addEventListener("mousedown",mousedown);
canvas.addEventListener("mouseup",mouseup);
function mousemove(e){
mouseX = e.layerX - canvas.offsetLeft;
mouseY = e.layerY - canvas.offsetTop;
//for each circle stored in my array of Circle objects, is my mouse within its'
//bounds? If so, set the circles' (X,Y) to my mouse's (X,Y)
for(i=0;i<circArray.length;i++){
dx = mouseX - circArray[i].x;
dy = mouseY - circArray[i].y;
dist = Math.sqrt((dx*dx) + (dy*dy));
if(draggable && dist < circArray[i].r){
circArray[i].x = mouseX;
circArray[i].y = mouseY;
}
}
}
function mousedown(){
draggable = true;
}
function mouseup(){
draggable = false;
}
最佳答案
这是我用于拖动单个项目的设置。我不知道你是否想拖动多个东西,这是一个轻微的修改。
换句话说:在 mousedown 中以您绘制对象的保留顺序搜索命中对象(因此最上面的项目首先被命中),存储该命中项目,然后 mousedrag 只是将坐标/增量传递给该项目。
//start with only the mousedown event attached
canvas.addEventListener("mousedown",mousedown);
//and some vars to track the dragged item
var dragIdx = -1;
var dragOffsetX, dragOffsetY;
function mousedown(e){
//...calc coords into mouseX, mouseY
for(i=circArray.length; i>=0; i--){ //loop in reverse draw order
dx = mouseX - circArray[i].x;
dy = mouseY - circArray[i].y;
if (Math.sqrt((dx*dx) + (dy*dy)) < circArray[i].r) {
//we've hit an item
dragIdx = i; //store the item being dragged
dragOffsetX = dx; //store offsets so item doesn't 'jump'
dragOffsetY = dy;
canvas.addEventListener("mousemove",mousemove); //start dragging
canvas.addEventListener("mouseup",mouseup);
return;
}
}
}
function mousemove(e) {
//...calc coords
circArray[dragIdx].x = mouseX + dragOffsetX; //drag your item
circArray[dragIdx].y = mouseY + dragOffsetY;
//...repaint();
}
function mouseup(e) {
dragIdx = -1; //reset for next mousedown
canvas.removeListener(.... //remove the move/up events when done
}
我的 js 目前还很生疏,但这应该能说明问题。 dragOffsetX/Y 用于防止项目在单击时跳到光标处。您也可以只存储旧的鼠标坐标并向您的项目添加一个增量。
此外,您可以存储对它的引用,而不是存储拖动项的索引,或者可能是一个引用数组来拖动多个项目。而不是直接操作您的项目,您可以在它们上放置一个鼠标按下/拖动/向上界面,让它们处理它。这将使混入其他类型的项目变得更加容易。
我不确定的另一件事是您如何计算坐标。我做了一些不同的事情,但它是旧代码,我猜你的方法也一样。 -t
关于javascript - Javascript Canvas 中最干净的拖放代码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8528428/
我刚刚开始使用 javascript,多年来一直使用 C# 和 OO 语言。 我发现我将我的代码放在这样的文件中, database.js sync.js date.js 而且感觉非常程序化,基本上就
当我运行 git clean --dry-run 时,结果有点像: Would remove an_untracked_file Would remove an_untracked_file_2 Wo
嘿,第一次在 Stack Overflow 上提问,所以请放轻松! 我最近开始开发一个 CMS 驱动的网站,该网站需要多语言功能(12 种语言!)。我过去曾推出过 Expression Engine/
我正在使用可移植类库构建 Android/iOS xamarin 表单应用程序。我正在寻找在 PCL 项目中执行此示例的最佳方法: https://msdn.microsoft.com/en-us/l
我经常听到有关"new"MV* 框架的信息。我修改了 KnockoutJS,创建了一个发票应用程序,但我更喜欢用原始 JavaScript 编写干净、模块化的代码——必要时利用实用程序 API 和其他
我有这段 javascript 代码,当我点击按钮时, Canvas 会被清除。 但是当我移动鼠标时, Canvas 会显示我之前写的内容,而且它不会以空白 Canvas 开始 单击按钮后如何从空白
我有一个带有 5 个内部字符串变量的对象,但其中 3 个是可选的。我可以为每个可能的组合创建一个构造函数,或者我可以调用通用构造函数并向其传递一些空字符串。后一种情况对我来说很有趣,如果我在调用构造函
我是 SQL 的新手。我正在尝试从数据库 (Postgres) 获取数据,如果这些数据无效,则即时替换它们。是否可以使用纯 SQL 来执行此操作?例如,在我的数据库 users 中,我有包含以下数据的
当我清理 TOMCAT 或清理 tomcat 工作目录时,我丢失了保存在 Tomcat 文件夹中的所有文件,我可以禁用此选项吗? 最佳答案 清理 tomcat 工作目录将清除部署到 Tomcat 中的
我正在清理我的一个旧项目。它必须做的一件事是——给定笛卡尔网格系统和网格上的两个正方形,找到所有正方形的列表,连接这两个正方形中心的线将通过这些正方形。 这里的特殊情况是所有起点和终点都被限制在正方形
我现在正在学习如何使用 makefile 并制作了以下 makefile(我在 Windows 上使用 visual studio 命令行编译器) CC = cl CFLAG = /EHsc test
我做了 git checkout master。如果我执行 git status 它会在我的工作目录中显示两个更改的文件,即使我没有碰过它们。这似乎是某种行尾问题。 git reset --hard
在我看来,Makefile 规则大致可以分为“积极”和“消极”规则:“积极”规则创建丢失或更新过时的文件,而“消极”规则删除文件。 为“肯定”规则编写先决条件非常简单:如果目标和先决条件是文件名,ma
我的电脑上安装了 WAMP,我想在其中运行 Drupal 6。 当我安装 Drupal 时,我可以选择激活 Clean URL。 首先,我将 Drupal 安装放在 www 文件夹中,我可以选择启用干
考虑以下堆栈跟踪: In [3]: f.clean() ------------------------------------------------------------------------
我放弃了。我已经阅读了这里的几十个问题,甚至问了我自己的问题,我尝试了很多事情,我只是不知道该怎么做。 我需要使用以下格式创建 url:(NSFW 链接,请注意) http://jbthehot.co
下面的代码是我目前的解决方案。 我试图模仿的一个很好的例子是 FrameworkElement.ActualWidth 属性。您知道 ActualWidth 属性是如何计算和重新分配的,每当 Widt
当然,Ruby 确实有递归,就像任何其他高级编程语言一样。只要递归深度不是太高,这就可以正常工作,但如果是,您将捕获堆栈溢出: #!/usr/bin/ruby2.0 def rec_naive(i)
我找到的最短方法是: n = 5 # Python 2. s = str(n) i = int(s) # Python 3. s = bytes(str(n), "ascii") i = int(s)
这是一种经常出现的情况,对我来说永远不会太容易。我想我会问其他人如何处理它。 想象一下,如果 demo=60 命令行参数的处理是这样完成的: if DemoOptionSpecified() {
我是一名优秀的程序员,十分优秀!