Skip to content

Commit

Permalink
解决 firefox 下 getBBox() 在图形未加到容器时出错的问题
Browse files Browse the repository at this point in the history 
这是 issue #13 的其中一个问题。
  • Loading branch information
@techird
techird committed Jan 7, 2014
1 parent 38aa2bb commit 7094f6a
Show file tree
Hide file tree
Showing 3 changed files with 50 additions and 38 deletions.
2 changes: 1 addition & 1 deletion demo/kitychart/charts/gender-chart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,9 +27,9 @@ var KCGenderChart = kity.createClass("GenderChart", (function() {
var rect2 = new kity.Rect(30, me.R * 0.2, -25, -me.R * 0.1, 0);
polygon1.fill(color);
rect2.fill(color);
_paper.addShape(group);
group.addShapes([polygon1, rect2]);
group.translate(me.centerX + me.R + 10, me.centerY).setAnchor(me.centerX, me.centerY).rotate(rotate);
_paper.addShape(group);
};
//绘制十字
var drawCross = function(color, rotate) {
Expand Down
74 changes: 38 additions & 36 deletions demo/ringpalette/ringpalette.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ define(function(require, exports, module) {
return require('core/class').createClass({
base: Group,
mixins: [Draggable],
constructor: function( innerRadius, outerRadius, trackCount, trackPieCount, initSaturation) {
constructor: function(innerRadius, outerRadius, trackCount, trackPieCount, initSaturation) {
this.callBase();
this.innerRadius = innerRadius || 200;
this.outerRadius = outerRadius || 400;
Expand All @@ -31,109 +31,111 @@ define(function(require, exports, module) {
this.generateLabels();
},
generateCircle: function() {
this.circle = new Circle( this.innerRadius );
this.circle = new Circle(this.innerRadius);
this.circle.stroke(new Pen('white', 5));
this.circle.setStyle('cursor', 'move');
this.addShape(this.circle);
},
generateTracks: function() {
this.pies = new Group();
for(var trackNumber = 0; trackNumber < this.trackCount; trackNumber++) {
this.pies.addShapes( this.generateTrackPies( trackNumber ) );
for (var trackNumber = 0; trackNumber < this.trackCount; trackNumber++) {
this.pies.addShapes(this.generateTrackPies(trackNumber));
}
this.addShape(this.pies.rotate(-this.angleStep / 2));
},
generateTrackPies: function( trackNumber ) {
generateTrackPies: function(trackNumber) {
var trackInnerRadius = this.innerRadius + this.trackHeight * trackNumber,
trackOuterRadius = trackInnerRadius + this.trackHeight;
var h,
s = this.saturation,
l = this.getTrackLightness( trackNumber );
l = this.getTrackLightness(trackNumber);
var color, pie;
var hStep = 360 / this.trackPieCount;
var trackPies = [];

for(h = 0; h < 360; h += hStep ) {
for (h = 0; h < 360; h += hStep) {
color = Color.createHSL(h, s, l);
pie = new Pie(trackInnerRadius + 1, trackOuterRadius, h + 0.2, h + hStep - 0.2);
pie.fill( pie.color = color );
pie.fill(pie.color = color);
trackPies.push(pie);
}
return trackPies;
},
getTrackLightness: function( trackNumber ) {
var lMin = 20, lMax = 95;
getTrackLightness: function(trackNumber) {
var lMin = 20,
lMax = 95;
return lMin + trackNumber / this.trackCount * (lMax - lMin);
},
generateLabels: function() {
var fontSize = this.innerRadius / 6;
this.rgbLabel = new Text().setAnchor('center').setSize(fontSize).setY(-this.innerRadius / 8);
this.hslLabel = new Text().setAnchor('center').setSize(fontSize).setY(this.innerRadius / 4);
this.rgbLabel = new Text().setTextAnchor('center').setSize(fontSize).setY(-this.innerRadius / 8);
this.hslLabel = new Text().setTextAnchor('center').setSize(fontSize).setY(this.innerRadius / 4);
this.addShape(this.rgbLabel);
this.addShape(this.hslLabel);
},
control: function() {
var ring = this;
this.on('mouseover', function( e ) {
this.on('mouseover', function(e) {
var pie = e.targetShape;
if( pie instanceof Pie ) {
if (pie instanceof Pie) {
var color = pie.color;

pie.scale(2);
pie.stroke('white');

ring.setCircleColor( color );
ring.setCircleColor(color);
ring.bringFront(pie);
}
});
this.on('mouseout', function( e ) {
this.on('mouseout', function(e) {
var pie = e.targetShape;
if( pie instanceof Pie ) {
if (pie instanceof Pie) {
pie.resetTransform();
pie.stroke('none');
ring.showSelected();
}
});
this.on('click', function( e ) {
this.on('click', function(e) {
var pie = e.targetShape;
if( pie instanceof Pie ) {
ring.selectedPie( pie );
if (pie instanceof Pie) {
ring.selectedPie(pie);
}
});
},
selectedPie: function( pie ) {
if(this.selected) {
selectedPie: function(pie) {
if (this.selected) {
this.selected.stroke('none');
}
this.selected = pie;
},
showSelected: function() {
var pie = this.selected, pen;
if( pie ) {
var pie = this.selected,
pen;
if (pie) {
pen = new Pen().setWidth(5).setColor('white');
pie.stroke( pen );
this.bringFront( pie );
this.setCircleColor( pie.color );
pie.stroke(pen);
this.bringFront(pie);
this.setCircleColor(pie.color);
}
},
setCircleColor: function(color) {
this.circle.color = color;
this.circle.fill( color );
this.circle.fill(color);
var labelColor = color.get('l') >= 50 ?
color.dec('l', 50).set('s', 10) :
color.inc('l', 50).set('s', 10);
this.rgbLabel.setContent( color.toRGB() ).fill( labelColor );
this.hslLabel.setContent( color.toHSL() ).fill( labelColor );
this.rgbLabel.setContent(color.toRGB()).fill(labelColor);
this.hslLabel.setContent(color.toHSL()).fill(labelColor);
},
bringFront: function( obj ) {
bringFront: function(obj) {
obj.container.removeShape(obj).addShape(obj);
},
updateSaturation: function(s) {
this.s = s;
this.pies.eachItem(function(index, pie) {
pie.fill(pie.color.set('s', s));
});
if(this.circle.color) {
if (this.circle.color) {
this.setCircleColor(this.circle.color.set('s', s));
}
},
Expand All @@ -142,24 +144,24 @@ define(function(require, exports, module) {
min: -this.outerRadius * 0.8,
max: this.outerRadius * 0.8,
length: this.outerRadius * 1.6,
value : 0
value: 0
};
return this.pan;
},
drag: function() {
return this.callMixin( {
return this.callMixin({
target: this.circle,
move: function(e) {
var pan = this.getPan();
pan.value += e.delta.x;
pan.value = Math.min(pan.value, pan.max);
pan.value = Math.max(pan.value, pan.min);
this.updateSaturation( 100 * (pan.value - pan.min) / pan.length );
this.updateSaturation(100 * (pan.value - pan.min) / pan.length);
this.updatePosition(pan.value);
}
});
},
updatePosition: function( x ) {
updatePosition: function(x) {
this.setTransform(new Matrix().translate(x, 0));
}
});
Expand Down
12 changes: 11 additions & 1 deletion src/graphic/shape.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,17 @@ define(function(require, exports, module) {
return this.node;
},
getBoundaryBox: function() {
var box = this.node.getBBox();
var box;
try {
box = this.node.getBBox();
} catch (e) {
box = {
x: this.node.clientLeft,
y: this.node.clientTop,
width: this.node.clientWidth,
height: this.node.clientHeight
};
}
return box;
},
getRenderBox: function() {
Expand Down

0 comments on commit 7094f6a

Please sign in to comment.