Use FractionalOffset for gradients

These were using Offsets, but they're really FractionalOffsets.

Fixes #2318
This commit is contained in:
Adam Barth 2016-03-15 19:30:41 -07:00
parent 0eea48c8bd
commit 502a4ae078
5 changed files with 18 additions and 21 deletions

View File

@ -397,8 +397,8 @@ class CardCollectionState extends State<CardCollection> {
Shader _createShader(Rect bounds) { Shader _createShader(Rect bounds) {
return new LinearGradient( return new LinearGradient(
begin: const Offset(0.0, 0.0), begin: const FractionalOffset(0.0, 0.0),
end: const Offset(0.0, 1.0), end: const FractionalOffset(0.0, 1.0),
colors: <Color>[const Color(0x00FFFFFF), const Color(0xFFFFFFFF)], colors: <Color>[const Color(0x00FFFFFF), const Color(0xFFFFFFFF)],
stops: <double>[0.1, 0.35] stops: <double>[0.1, 0.35]
) )

View File

@ -285,8 +285,8 @@ class GradientNode extends NodeWithSize {
Rect rect = Point.origin & size; Rect rect = Point.origin & size;
Paint gradientPaint = new Paint()..shader = new LinearGradient( Paint gradientPaint = new Paint()..shader = new LinearGradient(
begin: const Offset(0.0, 0.0), begin: const FractionalOffset(0.0, 0.0),
end: const Offset(0.0, 1.0), end: const FractionalOffset(0.0, 1.0),
colors: <Color>[colorTop, colorBottom], colors: <Color>[colorTop, colorBottom],
stops: <double>[0.0, 1.0] stops: <double>[0.0, 1.0]
).createShader(rect); ).createShader(rect);

View File

@ -244,12 +244,6 @@ class BoxShadow {
String toString() => 'BoxShadow($color, $offset, $blurRadius, $spreadRadius)'; String toString() => 'BoxShadow($color, $offset, $blurRadius, $spreadRadius)';
} }
// TODO(ianh): We should probably expose something that does this on Rect.
// https://github.com/flutter/flutter/issues/2318
Point _offsetToPoint(Offset offset, Rect rect) {
return new Point(rect.left + offset.dx * rect.width, rect.top + offset.dy * rect.height);
}
/// A 2D gradient. /// A 2D gradient.
abstract class Gradient { abstract class Gradient {
const Gradient(); const Gradient();
@ -259,8 +253,8 @@ abstract class Gradient {
/// A 2D linear gradient. /// A 2D linear gradient.
class LinearGradient extends Gradient { class LinearGradient extends Gradient {
const LinearGradient({ const LinearGradient({
this.begin: const Offset(0.0, 0.5), this.begin: const FractionalOffset(0.0, 0.5),
this.end: const Offset(1.0, 0.5), this.end: const FractionalOffset(1.0, 0.5),
this.colors, this.colors,
this.stops, this.stops,
this.tileMode: TileMode.clamp this.tileMode: TileMode.clamp
@ -272,7 +266,7 @@ class LinearGradient extends Gradient {
/// ///
/// For example, a begin offset of (0.0,0.5) is half way down the /// For example, a begin offset of (0.0,0.5) is half way down the
/// left side of the box. /// left side of the box.
final Offset begin; final FractionalOffset begin;
/// The offset from coordinate (0.0,0.0) at which stop 1.0 of the /// The offset from coordinate (0.0,0.0) at which stop 1.0 of the
/// gradient is placed, in a coordinate space that maps the top left /// gradient is placed, in a coordinate space that maps the top left
@ -280,7 +274,7 @@ class LinearGradient extends Gradient {
/// ///
/// For example, an end offset of (1.0,0.5) is half way down the /// For example, an end offset of (1.0,0.5) is half way down the
/// right side of the box. /// right side of the box.
final Offset end; final FractionalOffset end;
/// The colors the gradient should obtain at each of the stops. /// The colors the gradient should obtain at each of the stops.
/// ///
@ -299,7 +293,7 @@ class LinearGradient extends Gradient {
@override @override
Shader createShader(Rect rect) { Shader createShader(Rect rect) {
return new ui.Gradient.linear( return new ui.Gradient.linear(
<Point>[_offsetToPoint(begin, rect), _offsetToPoint(end, rect)], <Point>[begin.withinRect(rect), end.withinRect(rect)],
colors, stops, tileMode colors, stops, tileMode
); );
} }
@ -348,7 +342,7 @@ class LinearGradient extends Gradient {
/// A 2D radial gradient. /// A 2D radial gradient.
class RadialGradient extends Gradient { class RadialGradient extends Gradient {
const RadialGradient({ const RadialGradient({
this.center: const Offset(0.5, 0.5), this.center: const FractionalOffset(0.5, 0.5),
this.radius: 0.5, this.radius: 0.5,
this.colors, this.colors,
this.stops, this.stops,
@ -360,7 +354,7 @@ class RadialGradient extends Gradient {
/// ///
/// For example, an offset of (0.5,0.5) will place the radial /// For example, an offset of (0.5,0.5) will place the radial
/// gradient in the center of the box. /// gradient in the center of the box.
final Offset center; final FractionalOffset center;
/// The radius of the gradient, as a fraction of the shortest side /// The radius of the gradient, as a fraction of the shortest side
/// of the paint box. /// of the paint box.
@ -389,7 +383,7 @@ class RadialGradient extends Gradient {
@override @override
Shader createShader(Rect rect) { Shader createShader(Rect rect) {
return new ui.Gradient.radial( return new ui.Gradient.radial(
_offsetToPoint(center, rect), center.withinRect(rect),
radius * rect.shortestSide, radius * rect.shortestSide,
colors, stops, tileMode colors, stops, tileMode
); );
@ -645,6 +639,9 @@ class FractionalOffset {
Offset alongSize(Size other) { Offset alongSize(Size other) {
return new Offset(dx * other.width, dy * other.height); return new Offset(dx * other.width, dy * other.height);
} }
Point withinRect(Rect rect) {
return new Point(rect.left + dx * rect.width, rect.top + dy * rect.height);
}
@override @override
bool operator ==(dynamic other) { bool operator ==(dynamic other) {

View File

@ -14,7 +14,7 @@ void main() {
decoration: new BoxDecoration( decoration: new BoxDecoration(
backgroundColor: const Color(0xFF00FF00), backgroundColor: const Color(0xFF00FF00),
gradient: new RadialGradient( gradient: new RadialGradient(
center: Offset.zero, radius: 1.8, center: FractionalOffset.zero, radius: 1.8,
colors: <Color>[Colors.yellow[500], Colors.blue[500]]), colors: <Color>[Colors.yellow[500], Colors.blue[500]]),
boxShadow: elevationToShadow[3]) boxShadow: elevationToShadow[3])
); );

View File

@ -10,8 +10,8 @@ import 'package:test/test.dart';
Shader createShader(Rect bounds) { Shader createShader(Rect bounds) {
return new LinearGradient( return new LinearGradient(
begin: const Offset(0.0, 0.0), begin: const FractionalOffset(0.0, 0.0),
end: const Offset(0.0, 1.0), end: const FractionalOffset(0.0, 1.0),
colors: <Color>[const Color(0x00FFFFFF), const Color(0xFFFFFFFF)], colors: <Color>[const Color(0x00FFFFFF), const Color(0xFFFFFFFF)],
stops: <double>[0.1, 0.35] stops: <double>[0.1, 0.35]
) )