创建与KineticJS SVG路径,我们可以实例化一个动态路径()对象。路径是最常用的,当我们想出口一个SVG路径进入一个HTML5 Canvas路径,或如果我们想展现复杂的图纸作为数据字符串,而不是创建一个自定义形状。列出了完整的属性和方法,看看动能。路径文件。
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.0.min.js"></script>
<script defer="defer">
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var path = new Kinetic.Path({
x: 240,
y: 40,
data: 'M12.582,9.551C3.251,16.237,0.921,29.021,7.08,38.564l-2.36,1.689l4.893,2.262l4.893,2.262l-0.568-5.36l-0.567-5.359l-2.365,1.694c-4.657-7.375-2.83-17.185,4.352-22.33c7.451-5.338,17.817-3.625,23.156,3.824c5.337,7.449,3.625,17.813-3.821,23.152l2.857,3.988c9.617-6.893,11.827-20.277,4.935-29.896C35.591,4.87,22.204,2.658,12.582,9.551z',
fill: 'green',
scale: 2
});
// add the shape to the layer
layer.add(path);
// add the layer to the stage
stage.add(layer);
</script>
</body>
</html>