kity
Version:
Kity Graphic Library
45 lines (38 loc) • 1.2 kB
HTML
<html>
<head>
<title> 坐标系 </title>
<script src="../../dist/kity.min.js"></script>
<script src="coordinate.js"></script>
<style>
body, div, html {
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
</head>
<body>
</body>
<script>
var paper = new kity.Paper(document.body).pipe(function() {
var width = 500, height = 300;
this.setWidth(500).setHeight(300);
this.setViewBox(-80.5, -80.5, width, height)
this.addShape(new Coordinate('black', [-8, 39], [-8, 19])).pipe(function() {
this.addShape(new kity.Rect(30, 30, 0, 0)
.fill('rgba(0, 0, 0, 0.5)')
.stroke('black'));
});
});
var rect = new Coordinate('red', [-2, 10], [-2, 10]).pipe(function() {
this.addShape(new kity.Rect(30, 30, 0, 0)
.fill('rgba(255, 0, 0, 0.5)')
.stroke('red'));
});
paper.addShape(rect);
rect.setScale(2);
paper.addShape(new kity.Text('matrix(' + rect.getTransform().valueOf().join(', ') + ')')
.setY(10).setX(100).setVerticalAlign('top').fill('red'));
</script>
</html>