Qunee中的基本图形与箭头

发表于 & 归档在 HTML, HTML5, JavaScript.

基本图形 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中一个一个获取，下面是目前所有的基本图形 qunee所有的基本图形  

定制自己的图形

注册一个新的图形很容易，创建一条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  ]]>