AnyGraph示例：AnyGraph内置点类型
本示例演示：显示AnyGraph内置点类型
xxxxxxxxxx[ {"type":"Point","x":50,"y":60,"size":20,"centerAsOrigin":true,"style":{"fillColor":"red","color":"none"},"uid":"G000003J"}, {"type":"Text","x":50,"y":76,"text":"pointType=0","vectorSize":true,"maxWidth":-1,"vertical":false,"style":{"fontSize":14,"fontName":"Arial","fillColor":"#003333","textAlign":"center"},"uid":"G000003K"}, {"type":"Point","x":164,"y":60,"pointType":1,"size":20,"centerAsOrigin":true,"style":{"fillColor":"red","color":"none"},"uid":"G000003L"}, {"type":"Text","x":164,"y":76,"text":"pointType=1","vectorSize":true,"maxWidth":-1,"vertical":false,"style":{"fontSize":14,"fontName":"Arial","fillColor":"#003333","textAlign":"center"},"uid":"G000003M"}, {"type":"Point","x":278,"y":60,"pointType":2,"size":20,"centerAsOrigin":true,"style":{"fillColor":"red","color":"none"},"uid":"G000003N"}, {"type":"Text","x":278,"y":76,"text":"pointType=2","vectorSize":true,"maxWidth":-1,"vertical":false,"style":{"fontSize":14,"fontName":"Arial","fillColor":"#003333","textAlign":"center"},"uid":"G000003O"}, {"type":"Point","x":392,"y":60,"pointType":3,"size":20,"centerAsOrigin":true,"style":{"fillColor":"red","color":"none"},"uid":"G000003P"}, {"type":"Text","x":392,"y":76,"text":"pointType=3","vectorSize":true,"maxWidth":-1,"vertical":false,"style":{"fontSize":14,"fontName":"Arial","fillColor":"#003333","textAlign":"center"},"uid":"G000003Q"}, {"type":"Point","x":506,"y":60,"pointType":4,"size":20,"centerAsOrigin":true,"style":{"fillColor":"red","color":"none"},"uid":"G000003R"}, {"type":"Text","x":506,"y":76,"text":"pointType=4","vectorSize":true,"maxWidth":-1,"vertical":false,"style":{"fontSize":14,"fontName":"Arial","fillColor":"#003333","textAlign":"center"},"uid":"G000003S"}, {"type":"Point","x":620,"y":60,"pointType":5,"size":20,"centerAsOrigin":true,"style":{"fillColor":"red","color":"none"},"uid":"G000003T"}, {"type":"Text","x":620,"y":76,"text":"pointType=5","vectorSize":true,"maxWidth":-1,"vertical":false,"style":{"fontSize":14,"fontName":"Arial","fillColor":"#003333","textAlign":"center"},"uid":"G000003U"}, {"type":"Point","x":734,"y":60,"pointType":6,"size":20,"centerAsOrigin":true,"style":{"fillColor":"red","color":"none"},"uid":"G000003V"}, {"type":"Text","x":734,"y":76,"text":"pointType=6","vectorSize":true,"maxWidth":-1,"vertical":false,"style":{"fontSize":14,"fontName":"Arial","fillColor":"#003333","textAlign":"center"},"uid":"G0000040"},xxxxxxxxxx<div id="graphWrapper" data-type="graph" style="width:800px; height:300px; border:solid 1px #CCC;"></div>xxxxxxxxxx import { Graph, Geometry, Point, Text, BgUtil } from "../../src/index.js"; // graph对象 graph = new Graph({ "target": "graphWrapper", "enabledGeomEvent": true }); // 网格水印层 BgUtil.generateGrid(Object.assign({ "interval": 10, "graph": graph }, graph.getSize())); // 新建绘图图层 let layer = graph.addLayer(); // 在画布中绘制图像 let pointType = 0; for (let y = 60, jj = graph.getSize().height; y < jj; y += 80) { for (let x = 50, ii = graph.getSize().width; x < ii; x += 114) { //"rotation": 30 * pointType % 360, let point = layer.getSource().add(new Point({ "x": x, "y": y, "pointType": pointType, "size": 20, "style": { "fillStyle": 1, "fillColor": "red", "color": "none" } })); point.on("click", activeShape); layer.getSource().add(new Text({ "x": x, "y": y + 16, "text": "pointType=" + pointType, "style": { "fontSize": 14, "fontName": "Arial", "fillColor": "#003333", "textAlign": "center" } })); pointType++; if (pointType > 19) break; } if (pointType > 19) break; } // render graph.render();