我正在尝试以与鼠标单击相同的方向旋转的方式移动对象，并移动到鼠标单击的位置。到目前为止，我安排了运动，但我认为 Angular 有问题，因为它没有像我那样旋转。我在哪里犯了错误？我该如何解决？
var theThing = document.querySelector("#thing");
var container = document.querySelector("#contentContainer");
var triangle = document.querySelector("#triangle");
container.addEventListener("click", getClickPosition, false);
function getClickPosition(e) {
var xPosition = e.clientX;
var yPosition = e.clientY;
var translate3dValue = "translate3d(" + xPosition + "px," + yPosition +
"px,0)";
var spx = document.querySelector("#triangle").clientWidth / 2;
var spy = document.querySelector("#triangle").clientHeight / 2;
var angle = Math.atan2(yPosition - spy, xPosition - spx) * 180 /
Math.PI;
if (angle < 0) {
angle = 360 - (-angle);
}
theThing.style.transform = translate3dValue;
theThing.style.transform += "rotate(" + angle + "deg)"
}body {
background-color: #FFF;
padding: 0;
margin: 0;
}
#contentContainer {
width: 500px;
height: 500px;
border: 15px #EDEDED solid;
overflow: hidden;
background-color: #F2F2F2;
cursor: pointer;
}
#thing {
width: 75px;
height: 75px;
background-color: rgb(255, 207, 0);
border-radius: 0%;
transform: translate3d(200px, 100px, 0);
transition: transform.2s ease-in;
}
#triangle {
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 45px solid transparent;
border-bottom: 75px solid black;
}<div id="contentContainer">
<div id="thing">
<div id="triangle">
</div>
</div>
</div>
最佳答案
您必须稍微调整一下并替换硬编码值。此外，这并不意味着以任何方式高效或优雅。
<html>
<head>
<title>Move to click position</title>
<style>
body {
background-color: #FFF;
padding: 0;
margin: 0;
}
#contentContainer {
width: 500px;
height: 500px;
/* border: 15px #EDEDED solid; */
overflow: hidden;
background-color: #F2F2F2;
cursor: pointer;
display: block;
}
#thing {
width: 75px;
height: 75px;
background-color: rgb(255, 207, 0);
border-radius: 0%;
/* transform: translate3d(200px, 100px, 0); */
transition: transform.2s ease-in;
/* transform-origin: 0% 0% */
}
#triangle {
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 45px solid transparent;
border-bottom: 75px solid black;
}
</style>
</head>
<body>
<div id="contentContainer">
<div id="thing">
<div id="triangle">
</div>
</div>
</div>
<script>
var theThing = document.querySelector("#thing");
var container = document.querySelector("#contentContainer");
var triangle = document.querySelector("#triangle");
container.addEventListener("click", getClickPosition, false);
// container.addEventListener("mousemove", getClickPosition, false);
// we'll keep tarck of a vector going from center to head
var center = {
'x': 75 / 2.0,
'y': 75 / 2.0
}
var head = {
'x': 75 / 2.0,
'y': 0.0
}
function norm(vx, vy) {
return Math.sqrt(vx * vx + vy * vy);
}
function normalize(vx, vy) {
d = norm(vx, vy);
return { 'x': vx / d, 'y': vy / d };
}
function dot(vx, vy, wx, wy) {
return vx * wx + vy * wy;
}
function det(vx, vy, wx, wy) {
return vx * wy - vy * wx;
}
// compute clockwise angle between two vectors
function vwAngle(vx, vy, wx, wy) {
return Math.atan2(det(vx, vy, wx, wy), dot(vx, vy, wx, wy));
}
function getClickPosition(e) {
var xPosition = e.clientX;
var yPosition = e.clientY;
console.log(xPosition, yPosition);
var spx = document.querySelector("#triangle").clientWidth / 2.0;
var spy = document.querySelector("#triangle").clientHeight / 2.0;
console.log(spx, spy);
console.log();
// vector from center to mouse
var m = normalize(
xPosition - center.x,
yPosition - center.y
);
// v is a vector fron center to head
var vNormalized = normalize(head.x - center.x, head.y - center.y);
// clockwise angle between vectors m and v
var between = -vwAngle(m.x, m.y, vNormalized.x, vNormalized.y);
// Update vector v by updated head:
// rotate v around point
var cosb = Math.cos(between);
var sinb = Math.sin(between);
var vRotated = {
'x': cosb * vNormalized.x - sinb * vNormalized.y,
'y': sinb * vNormalized.x + cosb * vNormalized.y
};
var d = norm(head.x - center.x, head.y - center.y);
head.x = center.x + vRotated.x * d;
head.y = center.y + vRotated.y * d;
// translation:
var dx = xPosition - center.x
var dy = yPosition - center.y
center.x = xPosition - 75 / 2.0;
center.y = yPosition - 75 / 2.0;
head.x += dx;
head.y += dy;
var translate3dValue = "translate3d(" + center.x + "px," + center.y + "px,0)";
theThing.style.transform = translate3dValue;
theThing.style.transform += "rotate(" + (between * 180 / Math.PI) + "deg)";
}
</script>
</body>
</body>
</html>
关于javascript - 根据鼠标单击移动和旋转对象？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54454577/
总的来说，我对ruby还比较陌生，我正在为我正在创建的对象编写一些rspec测试用例。许多测试用例都非常基础，我只是想确保正确填充和返回值。我想知道是否有办法使用循环结构来执行此操作。不必为我要测试的每个方法都设置一个assertEquals。例如:describeitem,"TestingtheItem"doit"willhaveanullvaluetostart"doitem=Item.new#HereIcoulddotheitem.name.shouldbe_nil#thenIcoulddoitem.category.shouldbe_nilendend但我想要一些方法来使用
在控制台中反复尝试之后，我想到了这种方法，可以按发生日期对类似activerecord的(Mongoid)对象进行分组。我不确定这是完成此任务的最佳方法，但它确实有效。有没有人有更好的建议，或者这是一个很好的方法？#eventsisanarrayofactiverecord-likeobjectsthatincludeatimeattributeevents.map{|event|#converteventsarrayintoanarrayofhasheswiththedayofthemonthandtheevent{:number=>event.time.day,:event=>ev
我的代码目前看起来像这样numbers=[1,2,3,4,5]defpop_threepop=[]3.times{pop有没有办法在一行中完成pop_three方法中的内容？我基本上想做类似numbers.slice(0,3)的事情，但要删除切片中的数组项。嗯...嗯，我想我刚刚意识到我可以试试slice! 最佳答案 是numbers.pop(3)或者numbers.shift(3)如果你想要另一边。 关于ruby-多次弹出/移动ruby数组，我们在StackOverflow上找到一
我有一个表单，其中有很多字段取自数组(而不是模型或对象)。我如何验证这些字段的存在？solve_problem_pathdo|f|%>... 最佳答案 创建一个简单的类来包装请求参数并使用ActiveModel::Validations。#definedsomewhere,atthesimplest:require'ostruct'classSolvetrue#youcouldevencheckthesolutionwithavalidatorvalidatedoerrors.add(:base,"WRONG!!!")unlesss
好的，所以我的目标是轻松地将一些数据保存到磁盘以备后用。您如何简单地写入然后读取一个对象？所以如果我有一个简单的类classCattr_accessor:a,:bdefinitialize(a,b)@a,@b=a,bendend所以如果我从中非常快地制作一个objobj=C.new("foo","bar")#justgaveitsomerandomvalues然后我可以把它变成一个kindaidstring=obj.to_s#whichreturns""我终于可以将此字符串打印到文件或其他内容中。我的问题是，我该如何再次将这个id变回一个对象？我知道我可以自己挑选信息并制作一个接受该信
如果您尝试在Ruby中的nil对象上调用方法，则会出现NoMethodError异常并显示消息:"undefinedmethod‘...’fornil:NilClass"然而，有一个tryRails中的方法，如果它被发送到一个nil对象，它只返回nil:require'rubygems'require'active_support/all'nil.try(:nonexisting_method)#noNoMethodErrorexceptionanymore那么try如何在内部工作以防止该异常？ 最佳答案 像Ruby中的所有其他对象
我在Rails工作并有以下类(class):classPlayer当我运行时bundleexecrailsconsole然后尝试:a=Player.new("me",5.0,"UCLA")我回来了:=>#我不知道为什么Player对象不会在这里初始化。关于可能导致此问题的操作/解释的任何建议？谢谢，马里奥格 最佳答案 havenoideawhythePlayerobjectwouldn'tbeinitializedhere它没有初始化很简单，因为你还没有初始化它!您已经覆盖了ActiveRecord::Base初始化方法，但您没有调
我有一个服务模型/表及其注册表。在表单中，我几乎拥有服务的所有字段，但我想在验证服务对象之前自动设置其中一些值。示例:--服务Controller#创建Action:defcreate@service=Service.new@service_form=ServiceFormObject.new(@service)@service_form.validate(params[:service_form_object])and@service_form.saverespond_with(@service_form,location:admin_services_path)end在验证@ser
我有一个用户工厂。我希望默认情况下确认用户。但是鉴于unconfirmed特征，我不希望它们被确认。虽然我有一个基于实现细节而不是抽象的工作实现，但我想知道如何正确地做到这一点。factory:userdoafter(:create)do|user,evaluator|#unwantedimplementationdetailshereunlessFactoryGirl.factories[:user].defined_traits.map(&:name).include?(:unconfirmed)user.confirm!endendtrait:unconfirmeddoenden
当我在我的Rails应用程序根目录中运行rakedoc:app时，API文档是使用/doc/README_FOR_APP作为主页生成的。我想向该文件添加.rdoc扩展名，以便它在GitHub上正确呈现。更好的是，我想将它移动到应用程序根目录(/README.rdoc)。有没有办法通过修改包含的rake/rdoctask任务在我的Rakefile中执行此操作？是否有某个地方可以查找可以修改的主页文件的名称？还是我必须编写一个新的Rake任务？额外的问题:Rails应用程序的两个单独文件/README和/doc/README_FOR_APP背后的逻辑是什么？为什么不只有一个？