1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
|
SVG.Line = function() {
this.constructor.call(this, SVG.create('line'))
}
// Inherit from SVG.Shape
SVG.Line.prototype = new SVG.Shape
// Add required methods
SVG.extend(SVG.Line, {
// Move over x-axis
x: function(x) {
var b = this.bbox()
return x == null ? b.x : this.attr({
x1: this.attr('x1') - b.x + x
, x2: this.attr('x2') - b.x + x
})
}
// Move over y-axis
, y: function(y) {
var b = this.bbox()
return y == null ? b.y : this.attr({
y1: this.attr('y1') - b.y + y
, y2: this.attr('y2') - b.y + y
})
}
// Move by center over x-axis
, cx: function(x) {
var half = this.bbox().width / 2
return x == null ? this.x() + half : this.x(x - half)
}
// Move by center over y-axis
, cy: function(y) {
var half = this.bbox().height / 2
return y == null ? this.y() + half : this.y(y - half)
}
// Set line size by width and height
, size: function(width, height) {
var b = this.bbox()
return this
.attr(this.attr('x1') < this.attr('x2') ? 'x2' : 'x1', b.x + width)
.attr(this.attr('y1') < this.attr('y2') ? 'y2' : 'y1', b.y + height)
}
// Set path data
, plot: function(x1, y1, x2, y2) {
return this.attr({
x1: x1
, y1: y1
, x2: x2
, y2: y2
})
}
})
//
SVG.extend(SVG.Container, {
// Create a line element
line: function(x1, y1, x2, y2) {
return this.put(new SVG.Line().plot(x1, y1, x2, y2))
}
})
|
