首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

原 基于 HTML5 Canvas 的简易

不管在任何领域,只要能让非程序员能通过拖拽来实现 2D 和 3D 的设计就是很牛的,今天我们不需要 3dMaxs 等设计软件,直接用 HT 就能自己写出一个 2D 3D 编辑器,实现这个功能我觉得成就感还是爆棚的...本例地址:http://www.hightopo.com/demo/drag-create-data/  下面是实现效果: ?...我们首先将所有需要用到的 json 文件作为矢量输出,矢量的好处是组件上的图元缩放都不会失真,并且不再需要为 Retina 显示屏提供不同尺寸的图片, 在 devicePixelRatio 多样化的移动时代...ht.widget.Toolbar 工具条中添加元素,添加的元素是从 createItem 函数中传回来的元素,我们在这个函数中利用了 vector 矢量创造了一个矩形和一张图片的结合体,我们将之前注册好的矢量传给这个结合体中的

1K40
您找到你想要的搜索结果了吗?
是的
没有找到

JS实现超简易轮播

2 1.画界面 1.画显示区域 首先就是画个固定的区域, 用来展示轮播当前能看到的, 其余超出的部分, 使用 overflow: hidden 隐藏. .box { width: 300px;...height: 200px; overflow: hidden; } 2.画轮播主体 假设五张, 将他们横向排列(图片太麻烦, 我就css画了...初始排列: |1|2|3|4|5| 初始化后排列: |5|1|2|3|4|5|1| 2.代码片段 代码使用ES6语法, 这些无所谓, 具体逻辑知道就行 1.构造器 构造器接收一个变量, 切换轮播的延时...在构造器里新建了一些常量, 轮播的DOM, 轮播图片的DOM数组, 轮播的个数(注意是没有初始化前的图片个数), 以及赋值延时(默认是1000ms) 随后调用初始化函数 constructor (delay...随后, 将轮播显示的位置定在第一张图片位置, 即1的位置 currentPosition变量用于标记当前滚动的图片 init () { // 将轮播第一项克隆, 并放在最后 const cloneFirst

10K30

快速开发基于 HTML5 网络拓扑应用

结合 《数百个 HTML5 例子学习 HT 图形组件 – 拓扑篇》可以容易理解构建一个拓扑界面基本上就是操作 DataModel 数据模型,以下为构建上图界面效果的模型代码部分: // init data...其实自动布局无法提供算法进行图元摆放,以便达到业务展示的需求,可参考《电信网络拓扑自动布局 - 曲线布局》和《电信网络拓扑自动布局 - 总线布局》,这两篇文章详细分析了如果自定义出总线和沿着任意曲线布局的案例...以上创建网络图元、设置图元连线关系、配置图元风格属性、进行图元布局摆放就是构建拓扑的几个基本步骤,其实熟悉了 HT 分分钟就能开发出像模像样的 HTML5 网络拓扑应用,如果需要数据存储可参考《HT...,不收任何约束,可以随心所欲的设计你的网络拓扑整体系统架构。...更多 HTML5 拓扑图例子可参考:http://www.hightopo.com/demos/index.html ?

1.9K80

基于 HTML5 Canvas 的简易 2D 3D 编辑器

不管在任何领域,只要能让非程序员能通过拖拽来实现 2D 和 3D 的设计就是很牛的,今天我们不需要 3dMaxs 等设计软件,直接用 HT 就能自己写出一个 2D 3D 编辑器,实现这个功能我觉得成就感还是爆棚的...本例地址:http://www.hightopo.com/demo/drag-create-data/  下面是实现效果: ?...我们首先将所有需要用到的 json 文件作为矢量输出,矢量的好处是组件上的图元缩放都不会失真,并且不再需要为 Retina 显示屏提供不同尺寸的图片, 在 devicePixelRatio 多样化的移动时代...ht.widget.Toolbar 工具条中添加元素,添加的元素是从 createItem 函数中传回来的元素,我们在这个函数中利用了 vector 矢量创造了一个矩形和一张图片的结合体,我们将之前注册好的矢量传给这个结合体中的

2.2K70

快速开发基于 HTML5 网络拓扑应用

结合 《数百个 HTML5 例子学习 HT 图形组件 – 拓扑篇》可以容易理解构建一个拓扑界面基本上就是操作 DataModel 数据模型,以下为构建上图界面效果的模型代码部分: // init data...其实自动布局无法提供算法进行图元摆放,以便达到业务展示的需求,可参考《电信网络拓扑自动布局 - 曲线布局》和《电信网络拓扑自动布局 - 总线布局》,这两篇文章详细分析了如果自定义出总线和沿着任意曲线布局的案例...以上创建网络图元、设置图元连线关系、配置图元风格属性、进行图元布局摆放就是构建拓扑的几个基本步骤,其实熟悉了 HT 分分钟就能开发出像模像样的 HTML5 网络拓扑应用,如果需要数据存储可参考《HT...,不收任何约束,可以随心所欲的设计你的网络拓扑整体系统架构。...更多 HTML5 拓扑图例子可参考:http://www.hightopo.com/demos/index.html ?

1.9K60

原 快速开发基于 HTML5 网络拓扑

效果 2d 3d ? ? 代码实现 其实不管是 2d 还是 3d,在 HT 中,数据绑定不分维度的,所以两者在实现上非常类似。...如果节点都没有创建,也不可能获取到图片对应的节点(或者说如果直接把这个矢量拿来作为一个节点的图片,有可能出现的情况就是,六个设备的变化情况都一模一样!毕竟是同一个节点!)。...所以我们得把这些特殊的部分从图片中删除掉,然后在对应的位置填充上节点,再给节点设置上设备的矢量。先把对应位置的矢量删除掉,如下图红框部分: ?...我们在红框部分单独创建八个设备节点,并给这八个节点分别设置同一张矢量。诶?你可能会诧异为什么同一张显示却不同(灯亮的变化顺序不同),下面我们来看看这是怎么完成的。 ?...那么这八个拥有相同矢量的设备是如何通过代码控制闪烁灯随机变化的呢?关键就在我们上面绘制的矢量图中,前面有意略过了这部分:数据绑定。

1.5K20
领券