javascript – 沿固定角度“向外”移动矢量
作者:互联网
我已经搜索了这个问题的答案并尝试了许多提议的解决方案,但似乎都没有.我一直在努力解决这个问题,所以非常感谢任何见解.
我在JS画布上有3个形状(矢量,我猜),每个形状的方向表示为0度和宽度.我需要从它的方向“直接”拖出其中一个形状.这很难用语言来解释,所以请查看我创建的图形:
中间(对角线)形状为45度.它的起源是红点,(x1,y1).用户拖动形状,鼠标位于绿点(x2,y2).由于形状的原点位于左下方,我需要将形状定位在浅蓝色形状的位置,就像用户从形状的原点直接向外拖动一样.
我认为这不重要,但我用来做这个的库是KineticJS.这是我可用的代码和一些可能有助于解决问题的信息.此代码将形状定位在鼠标顶部,这不是我想要的:
var rotationDeg = this.model.get("DisplayOri"), // rotation in degrees
rotationRadians = rotationDeg * Math.PI / 180, // rotation in rads
unchanged = this.content.getAbsolutePosition(), // {x,y} of the shape before any dragging
dragBoundFunc = function (changed) {
// called on a mouseMove event, so changed is always different and is the x,y of mouse on stage
var delta = {
x: changed.x - unchanged.x,
y: changed.y - unchanged.y
};
return changed; // go to the mouse position
};
[编辑]我应该提到明显的“返回增量”不起作用.
解决方法:
听起来你想约束对象的运动.
>确定表示约束轴的向量:也就是说,我们只希望沿此线发生运动.从图中可以看出,这是从红点到左边的短线方向.该向量的方向为-1 / m,其中m是我们移动的线的斜率.
>限制运动.移动由鼠标移动增量表示 – 但我们只希望该移动的部分在约束轴的方向上.这是通过两个向量的点积来完成的.
所以在伪代码中
m = (line.y2 - line.y1)/(line.x2 - line.x1)
constraintSlope = -1/m
contraintVector = {1, constraintSlope} //unit vector in that direction
userMove = {x2-x1, y2-y1} //vector of mouse move direction
projection = userMove.x * constraintVector.x + userMove.y * constraintVector.y
translation = projection * constraintVector //scaled vector
标签:javascript,html5-canvas,vector,trigonometry,kineticjs 来源: https://codeday.me/bug/20190625/1284882.html