gojs使用textBlock添加背景

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/super__code/article/details/79575190

引入:

在html中设置一容器

 <div id="myDiagramDiv" style="background-color: white; border: solid 1px black; width: 100%; height: 400px"></div>

script 引入

<script src="./assets/plugins/gojs/go.js"></script>   
 var $go = go.GraphObject.make;  // for conciseness in defining templates in this function
            myDiagram =$go(go.Diagram, "myDiagramDiv",  // must be the ID or reference to div
                    { initialContentAlignment: go.Spot.Center });
            // define all of the gradient brushes
            function nodeTypeImage(type) {
                switch (type) {
                    case "trunk": return "./assets/imgs/device.png";
                    case "Linka": return "./assets/imgs/linka.png";
                    case "Linkb": return "./assets/imgs/linkb.png";
                    case "center": return "./assets/imgs/seting.png";
                    case "work": return "./assets/imgs/set.png";
                    case "taskWrong": return "./assets/imgs/wrong.png";
                    case "deviceWrong": return "./assets/imgs/error.png";
                    case "deviceTask": return "./assets/imgs/wrongTask.png";
                }
            };
            // define the Node template for non-terminal nodes
            myDiagram.nodeTemplate =
                $go(go.Node, "Vertical",
                    // define the node's outer shape
                    $go(go.Picture,
                        { margin: 0, width: 60, height: 60,
                            imageStretch: go.GraphObject.None},
                        // new go.Binding("source")),
                        new go.Binding("source", "type", nodeTypeImage)),
                    // define the node's text
                    $go(go.TextBlock,//给textBlock添加点击事件
                        { alignment: go.Spot.Bottom, font: " 10pt Sans-Serif",
                            isMultiline: true,width:90,
                            wrap: go.TextBlock.WrapFit,
                            verticalAlignment: go.Spot.Bottom,
                            stroke:'#169BD5',
                            textAlign: "center",
                            click: function(ev, obj) {
                                if(obj.part.data.wrong==="taskWrong"){
                                 
                                }if(obj.part.data.wrong==='preWrong'){
                                   
                                }
                            }
                        },
                        new go.Binding("text", "text")),
                        $go("TreeExpanderButton")
                    );
            // define the Link template
            myDiagram.linkTemplate =
                $go(go.Link,  // the whole link panel
                    { selectable: false },
                    { routing: go.Link.Orthogonal, corner: 5, selectable: false },// the link style
                    $go(go.Shape, { strokeWidth: 2, stroke: 'lightblue' }),
                    $go(go.TextBlock, { textAlign: "center",stroke:"red" },  // centered multi-line text
                        new go.Binding("text", "text")),
                    $go(go.Picture,  //连线处添加背景图片
                        { margin: 0, width: 20, height: 40,
                            imageStretch: go.GraphObject.None
                            // segmentIndex: 1, segmentFraction: 0
                        },
                        // new go.Binding("source")),
                        new go.Binding("source", "type", nodeTypeImage))
                )  // the link shape
            // create the model for the double tree
            var nodeDataArray = [
                { key: "Root",text:"任务名称",type:"center",dir: "right"},
                { key: "L1",text:"省份1",type:"trunk",dir: "left", wrong:"preWrong",color:"red"},
                { key: "L2",text:"地市",type:"trunk",dir: "left"},
                { key: "L3",text:"地市",type:"trunk",dir: "left"},
                { key: "L4",text:"测试终端1",type:"trunk", dir: "left"},
                { key: "R2",text:"PING业务", type:"work",dir: "right"},
                { key: "R3",text:"三方出口域名",type:"Linka"},
                { key: "R4",text:"集团骨干域名", type:"Linka"},
                { key: "R5",text:"121.12.221.15(电信出口)", type:"Linkb"},
                { key: "R6",text:"121.12.221.23(联通出口)",wrong:"taskWrong",type:"Linkb"}
            ];
            var linkDataArray = [
                { from:"Root", to:"L1", type: "" },
                { from:"L1", to:"L2", type: "deviceTask" },
                { from:"L1", to:"L3", type: "" },
                { from:"L3", to:"L4", type: "" },
                { from:"Root", to:"R2", type: "" },
                { from:"R2", to:"R3", type: "" },
                { from:"R2", to:"R4", type: "" },
                { from:"R3", to:"R5", type: "" },
                { from:"R3", to:"R6", type: "deviceWrong"}
            ];
            myDiagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

效果图:




展开阅读全文

求助,如何添加背景..

05-04

本人纯新手.....不知道该怎么弄,网上看了很多解释,但都无法解决问题....rnrnrnimport java.awt.*;rnimport java.awt.Graphics;rnimport java.awt.GridLayout;rnimport java.awt.event.ActionEvent;rnimport java.awt.event.ActionListener;rnimport java.net.URL;rnrnimport javax.swing.ButtonGroup;rnimport javax.swing.ImageIcon;rnimport javax.swing.JButton;rnimport javax.swing.JFrame;rnimport javax.swing.JLabel;rnimport javax.swing.JPanel;rnimport javax.swing.JRadioButton;rnimport javax.swing.JTextField;rnimport java.awt.event.*;rnrnimport javax.swing.ImageIcon;rnimport javax.swing.JFrame;rnimport javax.swing.JLabel;rnimport javax.swing.JPanel;rnrnrnpublic class TestAbc extends JFramern rn JFrame win;rn JLabel lab;rn rn public TestAbc()rn rn win = new JFrame("CLOCK");rn// MyPanel pan1 = new MyPanel();rn //pan1.setBounds(0, 0, 240, 280);rn// pan1.add(new Clock());rn rn// MyPanel pan2 = new MyPanel();rn// lab = new JLabel("xxxxxxxxxxxxxx");rn// pan2.add(lab);rn rn // 设置整体布局rn MyPanel pan = new MyPanel();rn pan.setLayout(new GridLayout(1, 1));rn pan.add(new Clock());rn// pan.add(pan1);rn// pan.add(pan2);rn rn// ((JPanel) win.getContentPane()).setOpaque(false);rn pan.setBackground(null);rn// pan1.setBackground(null);rn// pan2.setBackground(null);rnrn MyPanel pan0 = new MyPanel();rn //pan0.setPreferredSize(pan.getPreferredSize());rn pan0.setLayout(null);rn pan.setBounds(0, 0, 240, 275);rn //pan.setBounds(0, 0, pan.getPreferredSize().width, pan.getPreferredSize().height);rn //URL url = TestAbc.class.getResource("c:/2.jpg");rn ImageIcon img = new ImageIcon("c:/2.jpg");rn JLabel lab = new JLabel(img);rn lab.setBounds(0, 0, img.getIconWidth(), img.getIconHeight());rn// lab.setBounds(0, 0, 100, 100);rn pan0.add(lab,-1);rn// pan0.add(new Clock(),0);rn pan0.add(pan,0);rn rn win.setContentPane(pan0);rn rn //win.setContentPane(pan);rn //setBack();rn //(JPanel)pan.getContentPane().setOpaque(false);rn rn //win.pack();rn win.setSize(275, 280);rn win.setVisible(true);rnrn win.addWindowListener(new WindowAdapter() rn rn public void windowClosing(WindowEvent e) rn rn System.exit(0);rn rn );rn rnrnrnrn public static class MyPanel extends JPanel rn public void paint(Graphics g) rn paintChildren(g);rn rn rnrn public void setBack() rn ((JPanel) win.getContentPane()).setOpaque(false);rn // Winter.jpg这个图片的位置要跟当前这个类是同一个包下rn //URL url = TestAbc.class.getResource("c:/2.jpg");rn ImageIcon img = new ImageIcon("c:/2.jpg");rnrn JLabel background = new JLabel(img);rn win.getLayeredPane().add(background, new Integer(Integer.MIN_VALUE));rn background.setBounds(0, 0, img.getIconWidth(), img.getIconHeight());rn rn rn rn public static void main(String args[])rn new TestAbc();rn rnrn/* JFrame win = new JFrame();rn win.add(new Clock(), BorderLayout.CENTER);rn rn win.setTitle("时钟");rn TextField ta = new TextField("07软件1班3107006729郭晋君",1);rn win.add(ta,BorderLayout.SOUTH);rn rn win.setVisible(true);rn rn win.setSize(246, 300);rn //ImagePanel ip = new ImagePanel();rnrn win.validate();rn //testBackgroundColor();rnrn win.addWindowListener(new WindowAdapter() rn rn public void windowClosing(WindowEvent e) rn rn System.exit(0);rn rn );rn */rn rnrnrnrnrnrn==============================================================rnrnrnrnimport java.awt.*;rnrnimport java.awt.event.*;rnrnimport javax.swing.Timer;rnrnimport java.awt.geom.*;rnrnimport java.util.*;rnrn rnrnrn rnrnclass Clock extends Canvas implements ActionListener rnrn Date date;rnrn Timer secondTime;rn int hour, munite, second;rnrn Line2D secondLine, muniteLine, hourLine;rnrn int a, b, c;rnrn double pointSX[] = new double[60],//用来表示秒针端点坐标的数组rnrn pointSY[] = new double[60], rnrn pointMX[] = new double[60], //用来表示分针端点坐标的数组rnrn pointMY[] = new double[60], rnrn pointHX[] = new double[60], //用来表示时针端点坐标的数组rnrn pointHY[] = new double[60];rnrn rnrn Clock() rnrn secondTime = new Timer(1000, this);rnrn pointSX[0] = 0; //12点秒针位置rnrn pointSY[0] = -100;rnrn pointMX[0] = 0; //12点分针位置rnrn pointMY[0] = -90;rnrn pointHX[0] = 0; //12点时针位置rnrn pointHY[0] = -70;rnrn double angle = 6 * Math.PI / 180; //刻度为6度rnrn for (int i = 0; i < 59; i++) //计算出各个数组中的坐标rnrn rnrn pointSX[i + 1] = pointSX[i] * Math.cos(angle) - Math.sin(angle)rnrn * pointSY[i];rnrn pointSY[i + 1] = pointSY[i] * Math.cos(angle) + pointSX[i]rnrn * Math.sin(angle);rnrn pointMX[i + 1] = pointMX[i] * Math.cos(angle) - Math.sin(angle)rnrn * pointMY[i];rnrn pointMY[i + 1] = pointMY[i] * Math.cos(angle) + pointMX[i]rnrn * Math.sin(angle);rnrn pointHX[i + 1] = pointHX[i] * Math.cos(angle) - Math.sin(angle)rnrn * pointHY[i];rnrn pointHY[i + 1] = pointHY[i] * Math.cos(angle) + pointHX[i]rnrn * Math.sin(angle);rnrn rnrn for (int i = 0; i < 60; i++) rnrn pointSX[i] = pointSX[i] + 120; //坐标平移rnrn pointSY[i] = pointSY[i] + 120;rnrn pointMX[i] = pointMX[i] + 120; //坐标平移rnrn pointMY[i] = pointMY[i] + 120;rnrn pointHX[i] = pointHX[i] + 120; //坐标平移rnrn pointHY[i] = pointHY[i] + 120;rnrn rnrn secondLine = new Line2D.Double(0, 0, 0, 0);rnrn muniteLine = new Line2D.Double(0, 0, 0, 0);rnrn hourLine = new Line2D.Double(0, 0, 0, 0);rnrn secondTime.start(); //秒针开始计时rnrn rnrn rnrn public void paint(Graphics g) rnrn for (int i = 0; i < 60; i++) //绘制表盘上的小刻度和大刻度rnrn rnrn int m = (int) pointSX[i];rnrn int n = (int) pointSY[i];rnrn if (i % 5 == 0) rnrn g.setColor(Color.red);rnrn g.fillOval(m - 4, n - 4, 8, 8);rnrn else rnrn g.setColor(Color.cyan);rnrn g.fillOval(m - 2, n - 2, 4, 4);rnrn rnrn rnrn g.fillOval(115, 115, 10, 10); //钟表中心的实心圆rnrn Graphics2D g_2d = (Graphics2D) g;rnrn g_2d.setColor(Color.red);rnrn g_2d.draw(secondLine);rnrn BasicStroke bs = new BasicStroke(3f, BasicStroke.CAP_ROUND,rnrn BasicStroke.JOIN_MITER);rnrn g_2d.setStroke(bs);rnrn g_2d.setColor(Color.blue);rnrn g_2d.draw(muniteLine);rnrn bs = new BasicStroke(6f, BasicStroke.CAP_BUTT, BasicStroke.JOIN_MITER);rnrn g_2d.setStroke(bs);rnrn g_2d.setColor(Color.green);rnrn g_2d.draw(hourLine);rn rn //g_2d.setBackground(Color.red);rnrn rnrn rnrn public void actionPerformed(ActionEvent e) rnrn if (e.getSource() == secondTime) rnrn date = new Date();rnrn String s = date.toString();rnrn hour = Integer.parseInt(s.substring(11, 13));rnrn munite = Integer.parseInt(s.substring(14, 16));rnrn second = Integer.parseInt(s.substring(17, 19)); //获取时间中的秒rnrn int h = hour % 12;rnrn a = second; //秒针端点的坐标rnrn b = munite; //分针端点的坐标rnrn c = h * 5 + munite / 12; //时针端点的坐标rnrn secondLine.setLine(120, 120, (int) pointSX[a], (int) pointSY[a]);rnrn muniteLine.setLine(120, 120, (int) pointMX[b], (int) pointMY[b]);rnrn hourLine.setLine(120, 120, (int) pointHX[c], (int) pointHY[c]);rnrn repaint();rnrn rnrn rnrn 论坛

openGL实现三维背景添加

05-27

[img=https://img-bbs.csdn.net/upload/201305/27/1369588527_185497.jpg][/img]rn假设如上图:蓝球绕红球旋转(简单模拟一个太阳系),现在想给添加一个太空效果的背景,应该怎么写?不是给球添加纹理。。rn附:#include rnrn#define WIDTH 400rn#define HEIGHT 400rnrnstatic GLfloat angle = 0.0f;rnrnvoid myDisplay(void)rnrn glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);rnrn // 创建透视效果视图rn glMatrixMode(GL_PROJECTION);rn glLoadIdentity();rn gluPerspective(90.0f, 1.0f, 1.0f, 20.0f);rn glMatrixMode(GL_MODELVIEW);rn glLoadIdentity();rn gluLookAt(0.0, 5.0, -10.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0);rnrn // 定义太阳光源,它是一种白色的光源rn rn GLfloat sun_light_position[] = 0.0f, 0.0f, 0.0f, 1.0f;rn GLfloat sun_light_ambient[] = 0.0f, 0.0f, 0.0f, 1.0f;rn GLfloat sun_light_diffuse[] = 1.0f, 1.0f, 1.0f, 1.0f;rn GLfloat sun_light_specular[] = 1.0f, 1.0f, 1.0f, 1.0f;rnrn glLightfv(GL_LIGHT0, GL_POSITION, sun_light_position);rn glLightfv(GL_LIGHT0, GL_AMBIENT, sun_light_ambient);rn glLightfv(GL_LIGHT0, GL_DIFFUSE, sun_light_diffuse);rn glLightfv(GL_LIGHT0, GL_SPECULAR, sun_light_specular);rnrn glEnable(GL_LIGHT0);rn glEnable(GL_LIGHTING);rn glEnable(GL_DEPTH_TEST);rn rnrn // 定义太阳的材质并绘制太阳rn rn GLfloat sun_mat_ambient[] = 0.0f, 0.0f, 0.0f, 1.0f;rn GLfloat sun_mat_diffuse[] = 0.0f, 0.0f, 0.0f, 1.0f;rn GLfloat sun_mat_specular[] = 0.0f, 0.0f, 0.0f, 1.0f;rn GLfloat sun_mat_emission[] = 0.5f, 0.0f, 0.0f, 1.0f;rn GLfloat sun_mat_shininess = 0.0f;rnrn glMaterialfv(GL_FRONT, GL_AMBIENT, sun_mat_ambient);rn glMaterialfv(GL_FRONT, GL_DIFFUSE, sun_mat_diffuse);rn glMaterialfv(GL_FRONT, GL_SPECULAR, sun_mat_specular);rn glMaterialfv(GL_FRONT, GL_EMISSION, sun_mat_emission);rn glMaterialf (GL_FRONT, GL_SHININESS, sun_mat_shininess);rnrn glutSolidSphere(2.0, 40, 32);rn rnrn // 定义地球的材质并绘制地球rn rn GLfloat earth_mat_ambient[] = 0.0f, 0.0f, 0.5f, 1.0f;rn GLfloat earth_mat_diffuse[] = 0.0f, 0.0f, 0.5f, 1.0f;rn GLfloat earth_mat_specular[] = 0.0f, 0.0f, 1.0f, 1.0f;rn GLfloat earth_mat_emission[] = 0.0f, 0.0f, 0.0f, 1.0f;rn GLfloat earth_mat_shininess = 30.0f;rnrn glMaterialfv(GL_FRONT, GL_AMBIENT, earth_mat_ambient);rn glMaterialfv(GL_FRONT, GL_DIFFUSE, earth_mat_diffuse);rn glMaterialfv(GL_FRONT, GL_SPECULAR, earth_mat_specular);rn glMaterialfv(GL_FRONT, GL_EMISSION, earth_mat_emission);rn glMaterialf (GL_FRONT, GL_SHININESS, earth_mat_shininess);rnrn glRotatef(angle, 0.0f, -1.0f, 0.0f);rn glTranslatef(5.0f, 0.0f, 0.0f);rn glutSolidSphere(2.0, 40, 32);rn rnrn glutSwapBuffers();rnrnvoid myIdle(void)rnrn angle += 1.0f;rn if( angle >= 360.0f )rn angle = 0.0f;rn myDisplay();rnrnrnint main(int argc, char* argv[])rnrn glutInit(&argc, argv);rn glutInitDisplayMode(GLUT_RGBA | GLUT_DOUBLE);rn glutInitWindowPosition(200, 200);rn glutInitWindowSize(WIDTH, HEIGHT);rn glutCreateWindow("OpenGL光照演示");rn glutDisplayFunc(&myDisplay);rn glutIdleFunc(&myIdle);rn glutMainLoop();rn return 0;rnrn 论坛

没有更多推荐了,返回首页