javascript - 画线时CSS定位对齐？

Question

我做了一个简单的 jsbin在两点之间画一条线。 (没有绘图库。只有 js/jq)。

我已经有了计算 Angular 代码(我从 this 库中获取)。

所以它看起来像这样:

当我拖动右下角圆圈时(我添加了 jquery draggable)，一切看起来都不错。为什么它看起来不错？

因为 origin-transform 的代码是:top left

$("#line") .width(...)
           .css('-webkit-transform', 'rotate(' + angle  + 'deg)')
           .css('-webkit-transform-origin','top left').

所以 div 的(实际上是红线)旋转轴是左上点。

太好了。

那么问题出在哪里呢？

当我弄乱了 left top 圆圈时，它就开始了...这里 - 我不知道如何处理红线位置...

• 如何修复 -webkit-transform-origin 中的代码以支持这两种更改？

Answer 1

你只是忘了设置线的左偏移量:

添加

.css('left',x2+10)

(并将 .css('top',$('#box2').offset().top+10) 更改为 .css('left',y2+10 ))

一切都会正常进行:

Your modified example - 现在有了正确的开始；)