- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有这个 fiddle :
图像旋转不正确。我使用的代码是:
var stage = new Kinetic.Stage({
container: 'd',
width: 300,
height: 300
});
var layer = new Kinetic.Layer();
var isDragging = false;
var refRotation = null;
var rect = new Kinetic.Rect({
x: 150,
y: 150,
width: 100,
height: 100,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
offset: [50, 50],
dragOnTop: true,
draggable: true,
dragBoundFunc: function (pos) {
var xd = 150 - pos.x ;
var yd = 150 - pos.y ;
var theta = Math.atan2(yd, xd);
var deg = theta * 180 / Math.PI;
if (!isDragging) {
isDragging = true;
refRotation = deg;
} else {
var rotate = deg - refRotation;
rect.setRotationDeg(deg);
}
return {
x: this.getAbsolutePosition().x,
y: this.getAbsolutePosition().y
}
}
});
图层.add(矩形);stage.add(层);
有人知道我的数学出了什么问题吗???
我想要的新东西: http://jsfiddle.net/zk9cn/
最佳答案
不知道Math.atan2,但似乎x和y的计算对我来说不正确。我会从中心扣除位置,而不是从位置扣除中心。 http://jsfiddle.net/bighostkim/qZDcg/
var x = 150 - pos.x;
var y = 150 - pos.y;
var radian = Math.PI + Math.atan(y/x);
this.setRotation(radian);
另一件事,我还看到你的变量没有被使用; isDragging、refRotate 和旋转。
-----编辑----
如果你想通过拾取 Angular 来旋转矩形,可以使用以下代码。当你拾取 Angular 点时,按中心位置计算的度数已经是45。这就是为什么你不能正确拾取 Angular 点。调整45看起来是对的,但是当你拿起直线时,又会出错。除非是故意的,否则您的要求似乎有缺陷。 http://jsfiddle.net/bighostkim/7Q5Hd/
var pos = stage.getMousePosition();
var xd = 150 - pos.x ;
var yd = 150 - pos.y ;
var theta = Math.atan2(yd, xd);
var degree = theta / (Math.PI / 180) - 45;
this.setRotationDeg(degree);
关于javascript - 动力学.js : Rotating image on touch,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14949628/
我有这部分代码将 div 围绕一个圆圈对齐: angle = 0; mangle = 0; for(i = 1; i<= count; i++) { $("#p" +i).css
为什么平衡得到一个AVL树的过程叫做旋转 ? (当你在它时,什么是 单 和 双 旋转?) 我的每一本教科书都公然使用这个词,没有任何解释。 最佳答案 这是在你的树的子树中改变根的操作,这是非常简单的操
作为进入处理的一个小作业,我必须编写一些代码才能获得以下内容: 使用 public void setup() { size(300,200); noFill(); rect(100,
我遇到了 Google Chrome 控制台报告的问题。我使用的是 Ubuntu 12.04。控制台中的问题是: Uncaught TypeError: Cannot read propert
在统一编辑器中,当我启用“Pivot”时,游戏对象将围绕“枢轴点”位置旋转,当我启用“Center”时,游戏对象将围绕“中心点”旋转 但是如果我使用脚本旋转,它总是围绕“中心点”旋转,例如,这是我的场
rotate() 算法会从左边选择序列的元素。它的工作机制如图 1 所示。 图 1 rotate()算法的工作方式(点此查看大图) 为了理解如何旋转序列,可以将序列中的元素想象成手镯上的珠子。rota
在三个JS中,是否可以用鼠标旋转对象而不是用OrbitControls.js旋转相机( https://threejs.org/docs/#examples/controls/OrbitControl
我正在学习 CSS 过渡和转换。这是 HTML: Transformatons and Transitions animate animate2 d
我们有一个图像,它似乎在旋转时消失了一秒钟。这个问题存在于 IE8 中,但在 IE9 和其他支持 HTML5 的浏览器中工作正常。我们使用了 jQuery 旋转插件。 HTML CSS #obj {
作为评估的一部分,我被赋予了这项任务......“‘旋转’按钮应该翻转元素的纵横比。” 为了完成这个,我定位了元素并切换了一个类名(旋转),然后添加了这个 CSS... .main-inner.rot
我从 Unity 插件 Final IK 中看到了这行代码。 整个函数是这样的: //Limits rotation to a single degree of freedom (along axis
我正在尝试在动画关键帧内同时应用 -webkit-filter:hue-rotate() 和 -webkit-transform:rotate()。不幸的是,即使是 Chrome Canary 也无法
我正在尝试制作看起来像这样的波斯尼亚和黑塞哥维那国旗。 我正在努力实现星星的排列方式。它们位于 45 度倾斜轴上,但星星本身没有旋转。 以下是我正在尝试的最低限度代码,但它也会旋转星星。 有什么办法可
我正在尝试使用 ratcave for python 创建一个项目。但是当我导入 ratcave 时,出现以下错误: AttributeError: 'scipy.spatial.transform.
我正在尝试使用 ratcave for python 创建一个项目。但是当我导入 ratcave 时,出现以下错误: AttributeError: 'scipy.spatial.transform.
我的问题是我使用支持 CSS2 和 javascript 但不支持 css3 的 html 到 pdf 生成器 (acts_as_flying_saucer),所以我不能使用 transform: r
我做了以下转换: // Translate my cube to origin myCubeModelMatrix = glm::translate( myCubeModelMatrix, vec3(
我正在将一些基于 PIL 的代码转换为 NumPy,但我发现 skimage.transform.rotate函数比 PIL 的 Image.rotate 慢显着。 作为一个粗略的比较,使用 skim
前言 .我知道过去曾多次问过这个问题,但没有一个解决方案实际上对我有用。自从提出类似问题(根据耗时过滤的 Google 搜索)以来,也已经有好几年了,因此大多数较旧的答案都已过时。如果有任何方法可以让
我试图将元素从其起始旋转点旋转 360 度,而不是从 0deg。例如,如果起点是 90deg,它会从 90deg 旋转到 90deg(整圈)。 我的目标是使用简单的@keyframes 动画来旋转元素
我是一名优秀的程序员,十分优秀!