Node往页面添加图片的两种格式

格式1：Node 用dataModel添加图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Node 用dataModel添加图片</title>
    <style>
        html, body {
            padding: 0px;
            margin: 0px;
        }
        .main {
            margin: 0px;
            padding: 0px;
            position: absolute;
            top: 0px;
            bottom: 0px;
            left: 0px;
            right: 0px;
        }
    </style>
    <script>
        htconfig = {
            Default: {
                toolTipDelay: 300
            }
        };
    </script>
    <script src="../../../../lib/core/ht.js"></script>

    <script type="text/javascript">
        //声明图片
        ht.Default.setImage("man", "../../../../picture/png/manPng/man.png");

        //初始化
        function init() {
            dataModel = new ht.DataModel();
            g2d = new ht.graph.GraphView(dataModel);
            g2d.addToDOM();
            g2d.setEditable(true);
            view = g2d.getView();

            view.className = 'main';
            document.body.appendChild(view);


            addNode();
        }

        //设置图片位置 大小
        function addNode() {
            node = new ht.Node();
            dataModel.add(node)
            node.setImage('man');
            node.setPosition(800, 150);//设置图元中心点坐标 位置
            node.setSize(200, 200);  //setSize(width, height)  大小
            return node;
        }
    </script>
</head>
<body>
<body onload="init();"></body>
</body>
</html>

格式2：Node 用dm添加图片

<!DOCTYPE html>
<html>
<head>
    <title>Node 用dm添加图片</title>
    <style>
        .view {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
        }
    </style>
    <script src="../../../../lib/core/ht.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript">
        //声明图片
        ht.Default.setImage("man", "../../../../picture/png/manPng/man.png");

        //初始化
        function init() {
            var graph = window.graph = new ht.graph.GraphView(),
                dm = window.dm = graph.dm(),
                view = graph.getView();

            view.className = "view";
            document.body.appendChild(view);

            addNode();
        }

        //设置图片位置 大小
        function addNode() {
            var node = new ht.Node();
            dm.add(node);
            node.setImage('man');
            node.setPosition(800, 150);//设置图元中心点坐标 位置
            node.setSize(200, 200);  //setSize(width, height)  大小
        }
    </script>
</head>
<body onload="init();">
</body>
</html>

Node往页面添加图片的两种格式

猜你喜欢