JavaScript分形树

参考博客:c++分形树绘制
js 利用canvas绘制直线、曲线

1、算法描述

假设A点坐标为(x,y),B点坐标为(x0,y0),C点坐标为(x1,y1),D点坐标为(x2,y2),α为主干和枝干的夹角(父枝干和子枝干的夹角),angle为当前要描绘的树干与x轴正方形的夹角(注意angle与α的关系),L为主干的长度。

初始状态下,angle=π/2

实现的算法步骤:
1、画出主干AB,即线段(x,y)-(x0,y0)。

2、计算出D点的坐标,由于屏幕坐标系x正方向为水平向右,y正方向为水平向下,因此
x2 = x0 + 2/3L * cos(angle-α) y2 = y0 - 2/3L * sin(angle-α) (注意是减号)。

3、计算出C点的坐标, x1 = x0 - 2/3L * cos(angle+α) y1 = y0 - 2/3L * sin(angle+α)

4、将D点替换B点,B点替换A点,重复步骤1,画出枝干BD(

  • 2
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
JavaScript目录代码是一种用于呈现和组织层级结构数据的代码。它可以在网页上创建一个可交互的目录视图,使用户能够展开和折叠层级目录,以便更好地浏览和定位所需的内容。 通常,使用JavaScript目录代码需要以下步骤: 1. 创建HTML结构:首先,在HTML文件中创建一个容器元素,用于显示目录。这可以是一个<div>元素或其他任何具有唯一标识的元素。例如:<div id="tree"></div> 2. 编写JavaScript代码:接下来,在JavaScript文件中编写代码来实现目录功能。首先,创建一个表示目录的数据结构,例如一个包含节点和子节点的对象数组。 3. 递归构建目录:使用递归算法,遍历目录数据结构,将每个节点动态地添加到HTML容器中。对于每个节点,创建一个包含节点内容的元素,并将其附加到其父节点元素上。还可以为父节点和子节点添加相应的样式或事件处理程序。 4. 添加交互功能:为每个目录节点添加交互功能,使用户可以展开或折叠子节点。这可以通过在点击节点时切换其展开/折叠状态来实现。可以使用事件处理程序来监听节点点击事件,并在每次展开/折叠操作后更新节点的样式。 5. 样式和自定义:可以根据需求对目录进行自定义设置,如样式、图标、字体等。可以使用CSS来为目录节点和容器元素添加样式,并使用JavaScript代码来动态添加相应的类或属性。 总而言之,JavaScript目录代码可以帮助我们有效地组织和展示层级结构数据,使用户能够更好地浏览和搜索内容。它是一种常用的界面组件,在许多网站和应用程序中都得到广泛应用。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值