标签：doc shape list cvs 尺寸 graph lol 最大 doctype
1.简略
<!DOCTYPE html> <html> <head> <title>公交车（简略）</title> <style> .view { position: absolute; left: 0; right: 0; top: 0; bottom: 0; } body { background: black; } </style> <script type="text/javascript" src="../../../../lib/core/ht.js"></script> <script type="text/javascript" src="../../../../lib/plugin/ht-flow.js"></script> <script type="text/javascript" src="../../../../lib/plugin/ht-xeditinteractor.js"></script> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript"> //公交车 ht.Default.setImage("bus", "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAADuUlEQVR4Xu2XS2hcVRzGf+ec+8hMnaRJbNQkJVRIfZS0ahobRKHu+rIPROtK1AqSLmyrVhBcZKWb1EYXBdGF+NioEVqirlSM4itiKImVoNWpj5a2ah5tJ5nk3vN3LvfOIpQJc1dZmA+++z/nu/P9z8c5ZxZXiQhLCQ38vwMsB1gOoCJ2vTi02ck1fmpFEAEBkIW/UqTTtaqw3OylJ7493P06YAGciMH83D1rG33aGzMABFYIS5TYgtEqImEK3TMKrRRCAgFBODE6dwB4C5ghQaaj95O3j49NyrwVufXIqFyZF/lnRuRiIa7R/JaU+vr+Mdn3Xl4eeTcvj5XqXcdOiRWRpwb/kFXde5pJoAFH1VzT2ZhzuVwExzFcmoWpGVtiGNVojjEp9CIorenf3caRnW0c3dXG2qYV/PJvwN1r6mjd/fQLgFMO4OJlb26p9fj+7CwZX1MMKVEW1Jo0egCeq5megcmCMF2IA41fKHLn6hzZuoYHgZpyAANCa63DlTlLjWcIQ7BWlRjXIArgaoIq9cif8Q1zIYSR38b+/NQcjobN7Q2Zdc8ObAOUAyiNwgLnLs+T812UAqM1WgSlVImQq0mp+y77P8wjAq6JL2vWLUbh2NiaY7Cx5UnguAKaNvaPnn9oU3PpCApopeJ/gQhlGKXQCqxQlR71AHhnTysTBXj5u7/JTxVxtWJXez23NWe4/40xRg51rHQAMAa0Jus7gCCACAugVFmrTrciPDp4FgEcFd8JgA9OT+L7LmgD4DkABT/HrPHwvYD113rU+hpRigUQIQ2EhX5FfDyf/Rkw8BcUsg2U7wAjB1bT+7XgukV+mghAa0SXUwI2BBvEVQAqhVGgiH1X+xEB4+d47aLD9CGoA5xyO6vB91w0IGHI9GAf8+fGAXBvuInaHQdRno/YsPJuKIXSpqJfHBetDZwCASgHWPfKBfZqMNkVaKM4/2YvG1pX0r33GQC++WKIkyeOct3DvUgQIhUCqCiAYxb1GwuHHxDeb5mEffVxgOfsADIUNQZtHMbzP9Kx8yB9fS8B0NPTw+df9rPpq1exYbDYDlThD0Epnjeax8s7MH46DwgQNTAEVijMzOK6HkA0jjR+PvM7NlxsB6rzl9ciedYDa5IK4GzdtuNYV1fXjRtuvwOAkyM/MDw8/OvHHw3uBwIqIKV/AvgNwEtCNCVsA7q3bNl6Zvv2+yRiNI605F1TBab11wMeVwMXuB7oBO5N2JloLhWQyl9lkzpgVcK6FOY0/qXH8qfZkgdYDvAftC1Oc+4ypOMAAAAASUVORK5CYII="); function init() { var graph = window.graph = new ht.graph.GraphView(),//GraphView 拓扑图形组件 dm = graph.dm(), view = graph.getView(); var node1 = new ht.Node(), node2 = new ht.Node(), edge3 = new ht.Edge(node1, node2); view.className = "view"; document.body.appendChild(view); //位置1 dm.add(node1); //位置2 node2.setPosition(0, 200); dm.add(node2); //汽车前进线 edge3.s("edge.type", "points"); edge3.s("edge.points", new ht.List([//线点集合 （无两端点） { x: 0, y: 25 }, { x: 25, y: 25 }, { x: 25, y: 50 }, { x: 50, y: 50 }, { x: 50, y: 75 }, { x: 75, y: 75 }, { x: 75, y: 200 } ])); edge3.s("flow", true);//值为true或false，控制此ht.Shape或ht.Edge是否可流动， 默认值为false,一般选择false edge3.s("flow.count", 3);//控制流动组的个数，默认为1 每组几辆车 edge3.s("flow.step", 4);//控制流动的步进，默认为3 车速 edge3.s("flow.element.image", "bus"); //字符串类型，指定流动组中元素的图片，图片需要提前通过ht.Default.setImage注册 edge3.s("flow.element.max", 60);//流动组中最大元素的尺寸，默认为7 edge3.s("flow.element.min", 7);//流动组中最小元素的尺寸，默认为0;每个流动组中的元素的尺寸从flow.element.max递减至flow.element.min， 如果希望元素尺寸保持一致，将这两个参数设为一致即可。 edge3.s("flow.element.count", 2);//每个流动组中的元素的个数，默认为10 edge3.s("flow.element.autorotate", true);//值为true或false，控制流动组中的元素是否与路径的方向保持一致，默认为false 一般为false edge3.s("flow.element.shadow.visible", false);//值为true或false，控制流动组中的元素是否显示渐变阴影，默认为true edge3.s("shape.background", null); //流动组中元素的背景颜色，默认为rgba(255, 255, 114, 0.4) 一般为null dm.add(edge3); graph.translate(500, 300);//在当前坐标的基础上增加x、y两个方向的平移值（当前内容 向右移动x，向下移动y） graph.setZoom(2);//缩放操作（当前内容按照比例放大和缩小） graph.enableFlow(60);//流动的时间间隔 （流动到头的时间） } </script> </head> <body onload="init();"> </body> </html>
标签：doc shape list cvs 尺寸 graph lol 最大 doctype
原文地址：https://www.cnblogs.com/ynhk/p/10945204.html
