图形组件的基础是图形,图形的基础是2D,如形状,路径片段,渐变填充,边框等,SVG中每个图形要素都有对应的标签元素,Canvas中则提供了一些绘制函数,路径和形状的管理需要自己实现,Qunee组件中提供了丰富的基本图形
基本图形
Qunee组件中内置提供了丰富的基本图形,可通过Q.Shapes类来获取与使用
使用基本图形
Qunee中的基本图形可以在Q.Shapes中获取,传入图形名称和大小信息,返回图形路径
var shape = Q.Shapes.getShape(Q.Consts.SHAPE_ARROW_4, 100, 100);
得到图形对象后,可以设置给节点对象,显示在画布中
var shape = Q.Shapes.getShape(Q.Consts.SHAPE_ARROW_4, 100, 100); var node = graph.createNode(); node.image = shape;
呈现效果

设置图形样式
默认是线框图,可以设置填充颜色和渐变,设置描边样式,此外还支持旋转,尺寸调整等功能
代码
var shape = Q.Shapes.getShape(Q.Consts.SHAPE_ARROW_4, 100, 100); var node = graph.createNode(); node.image = shape; node.setStyle(Q.Styles.SHAPE_FILL_GRADIENT, new Q.Gradient(Q.Consts.GRADIENT_TYPE_LINEAR, ['#00d4f9', '#1ea6e6'], null, Math.PI/2)); node.setStyle(Q.Styles.SHAPE_STROKE, 4); node.setStyle(Q.Styles.SHAPE_STROKE_STYLE, "#e9e9e9"); node.rotate = Math.PI / 3;
运行效果

所有的基本图形
Qunee内置的基本图形名称定义在常量类中:Q.Consts.SHAPE_***,可以通过名字从Q.Shapes中一个一个获取,下面是目前所有的基本图形

定制自己的图形
注册一个新的图形很容易,创建一条path,然后起个名字并注册到Q.Shapes
这里是一个十字图形的例子
var path = new Path(); path.moveTo(20, 0); path.lineTo(40, 0); path.lineTo(40, 20); path.lineTo(60, 20); path.lineTo(60, 40); path.lineTo(40, 40); path.lineTo(40, 60); path.lineTo(20, 60); path.lineTo(20, 40); path.lineTo(0, 40); path.lineTo(0, 20); path.lineTo(20, 20); path.closePath(); Q.Shapes.register("cross", path); var shape = Q.Shapes.getShape("cross", 100, 100); var node = graph.createNode(); node.image = shape; node.setStyle(Q.Styles.SHAPE_FILL_GRADIENT, new Q.Gradient(Q.Consts.GRADIENT_TYPE_LINEAR, ['#00d4f9', '#1ea6e6'], null, Math.PI/2)); node.setStyle(Q.Styles.SHAPE_STROKE, 4); node.setStyle(Q.Styles.SHAPE_STROKE_STYLE, "#e9e9e9"); node.rotate = Math.PI / 3;
可以注意到,任意一条路径注册到图形集合后,就可以获取不同大小的新的图形了
呈现效果

箭头呈现
Qunee中的所有基本图形都可以作为箭头来呈现
var shape = graph.createShapeNode(); shape.lineTo(100, 0); shape.rotate = Math.PI / 6; shape.setStyle(Q.Styles.ARROW_TO, Q.Consts.SHAPE_ARROW_5); shape.setStyle(Q.Styles.LAYOUT_BY_PATH, true); shape.setStyle(Q.Styles.ARROW_TO_FILL_COLOR, "#000"); shape.setStyle(Q.Styles.SHAPE_STROKE_STYLE, "#000");
呈现效果

使用定制的箭头
也可以使用之前自定义的十字图形作为箭头
var shape = graph.createShapeNode(); shape.lineTo(100, 0); shape.rotate = Math.PI / 6; shape.setStyle(Q.Styles.ARROW_FROM, Q.Consts.SHAPE_ARROW_STANDARD_OPEN); shape.setStyle(Q.Styles.ARROW_TO, "cross"); shape.setStyle(Q.Styles.LAYOUT_BY_PATH, true); shape.setStyle(Q.Styles.ARROW_TO_SIZE, 16); shape.setStyle(Q.Styles.ARROW_TO_FILL_GRADIENT, new Q.Gradient(Q.Consts.GRADIENT_TYPE_LINEAR, ['#00d4f9', '#1ea6e6'], null, Math.PI/2)); shape.setStyle(Q.Styles.ARROW_TO_STROKE, 0.1); shape.setStyle(Q.Styles.ARROW_TO_STROKE_STYLE, "#000"); shape.setStyle(Q.Styles.SHAPE_STROKE, 2); shape.setStyle(Q.Styles.SHAPE_STROKE_STYLE, "#000");
呈现效果
好吧,一点都不像箭头

默认基本图形和箭头效果
Qunee默认图形的效果

在线演示
http://demo.qunee.com/#Shape Demo
Leave a Reply