二维流动的实现
三种方式实现二维平面的流动
- 利用shape
<!DOCTYPE html>
<html>
<head>
<title>二维流动</title>
<style>
.view {
background: black;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
</style>
<script src="../guide/lib/core/ht.js"></script>
<script src="../guide/lib/plugin/ht-modeling.js"></script>
<script src="../guide/lib/plugin/ht-obj.js"></script>
<script src="../guide/lib/plugin/ht-edgetype.js"></script>
<script src="../guide/lib/plugin/ht-form.js"></script>
<script src="../guide/lib/plugin/ht-vector.js"></script>
<script src="../guide/lib/plugin/ht-flow.js"></script>
<script src="../guide/lib/plugin/ht-contextmenu.js"></script>
<script src="../guide/lib/plugin/contextmenu.js"></script>
<script src="../guide/lib/plugin/ht-dashflow.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript">
window.addEventListener("load", function() {
var graph = (window.graph = new ht.graph.GraphView()),
dm = (window.dm = graph.dm()),
view = graph.getView();
var shape = new ht.Shape();
shape.setPoints(
new ht.List([
{
x: 0, y: 0 },
{
x: 50, y: 0 },
{
x: 50, y: 25 },
{
x: 200, y: 25 },
{
x: 200, y: 50 },
{
x: 230, y: 50 },
{
x: 230, y: 65 }
])
);
// shape.setSegments(new ht.List([1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2]));
shape.setSize(500, 300);
shape.setPosition(400, 300);
shape