HTML / JS Canvas在对象之间画线

马丁·K

我的项目需要帮助。我用HTML5,JS和CSS3制作ERD图生成器。我只想念我的项目中的一个功能,那就是链接两个对象(矩形)。我试图使此功能,但它只能直接使用,但我希望线条成90度角。

为了获得更好的exaplain,这是我现在拥有的:http ://i.stack.imgur.com/fpfKb.png
这就是我想要的:http : //i.stack.imgur.com/eCNKX.png

所以这里是什么功能,我想不通:此功能必须带2个对象。对象具有位置X和Y,宽度和高度。并在该对象中函数计算最佳边以链接这两个对象和90度角。

因此,例如,它返回:(
起点)Point1:123,566
(换行处)Point2:223,766
(点换行)Point3:153,266
(End Point)Point4:33,234有

什么想法?我只想要算法的建议。谢谢你们 :)。

大邱
  1. 找出哪个对象较小left和哪个较小top值(如果这是您放置它们的方式)
  2. 找出两个对象的高度和宽度。
  3. 找出起点和终点:
    • 起点X在left + width左对象的
    • 起点的Y在top + height/2左对象的
    • 端点的X在left正确的对象处
    • 端点的Y在top + height/2正确的对象处
  4. “换行点”在起点的Y处以及在起点X和终点X之间的X处。换行的第二点在端点的Y处,并且具有相同的X。
  5. 连接3点的方式与连接对象之前相同。

很抱歉没有发布代码。如果您发布示例代码,则可以将其添加为答案。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

在 html 页面之间共享 js 对象

来自分类Dev

HTML到JS对象

来自分类Dev

在对象启动JS完成之前,防止显示以编程方式附加的HTML对象

来自分类Dev

JS模块:直接在对象中返回函数和在对象中返回函数之间的区别

来自分类Dev

语音气泡html5 canvas js

来自分类Dev

如何在对象原型链和表示它们的HTML之间建立联系?

来自分类Dev

如何增加HTML5 canvas中JS对象的旋转角度?

来自分类Dev

从html加载的主要js和js脚本之间的状态访问

来自分类Dev

从JS中的对象数组创建HTML列表

来自分类Dev

使用HTML CSS和JS拖动对象

来自分类Dev

附加到HTML元素的JS对象

来自分类Dev

将 HTML 表格转换为 JS 对象

来自分类Dev

如何从 js 对象完全创建 HTML?

来自分类Dev

如何在html中的两个div之间画线

来自分类Dev

在d3.js中的点之间画线

来自分类Dev

在对象数组 js 中搜索值

来自分类Dev

Three.js和HTML5 Canvas toDataURL

来自分类Dev

JS:如何获取受支持的HTML canvas globalCompositeOperation类型的列表

来自分类Dev

HTML5 Canvas JS上的冲突检测

来自分类Dev

three.js OrbitControls与HTML5 Canvas冲突吗?

来自分类Dev

在HTML5 Canvas中的两个或多个对象之间应用重力

来自分类Dev

在JS,CSS和HTML之间显示/隐藏功能

来自分类Dev

在Node.js中的HTML页面之间重定向

来自分类Dev

将对象放入数组CSS的问题 JS | 的HTML

来自分类Dev

如何仅从返回的对象Vue.js中获取HTML

来自分类Dev

js对象中的JSON数据进入html列表

来自分类Dev

如何使用按钮显示html中的js对象

来自分类Dev

如何使用HTML ID调用JS对象(例如datepicker)方法?

来自分类Dev

根据对象状态在js / html中动态创建按钮

Related 相关文章

热门标签

归档