javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-11-05 13:26:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

use density for clip-path calculations

Browse Source
This commit is contained in:
vakrilov
2017-02-21 14:12:52 +02:00
parent 63302a4a72
commit 4116212657
1 changed files with 89 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
android/widgets/src/main/java/org/nativescript/widgets/BorderDrawable.java
View File

@@ -175,12 +175,12 @@ public class BorderDrawable extends ColorDrawable {
public BorderDrawable(float density) { public BorderDrawable(float density) {
super(); super();
this.density = 1f; this.density = density;
} }
public BorderDrawable(float density, String id) { public BorderDrawable(float density, String id) {
super(); super();
this.density = 1f; this.density = density;
this.id = id; this.id = id;
} }
@@ -285,10 +285,10 @@ public class BorderDrawable extends ColorDrawable {
return; return;
} }
float topBackoffAntialias = calculateBackoffAntialias(this.borderTopColor, this.borderTopWidth, this.density); float topBackoffAntialias = calculateBackoffAntialias(this.borderTopColor, this.borderTopWidth);
float rightBackoffAntialias = calculateBackoffAntialias(this.borderRightColor, this.borderRightWidth, this.density); float rightBackoffAntialias = calculateBackoffAntialias(this.borderRightColor, this.borderRightWidth);
float bottomBackoffAntialias = calculateBackoffAntialias(this.borderBottomColor, this.borderBottomWidth, this.density); float bottomBackoffAntialias = calculateBackoffAntialias(this.borderBottomColor, this.borderBottomWidth);
float leftBackoffAntialias = calculateBackoffAntialias(this.borderLeftColor, this.borderLeftWidth, this.density); float leftBackoffAntialias = calculateBackoffAntialias(this.borderLeftColor, this.borderLeftWidth);
RectF backgroundBoundsF = new RectF( RectF backgroundBoundsF = new RectF(
bounds.left + leftBackoffAntialias, bounds.left + leftBackoffAntialias,
@@ -296,7 +296,7 @@ public class BorderDrawable extends ColorDrawable {
bounds.right - rightBackoffAntialias, bounds.right - rightBackoffAntialias,
bounds.bottom - bottomBackoffAntialias); bounds.bottom - bottomBackoffAntialias);
float outerRadius = this.getUniformBorderRadius() * this.density; float outerRadius = this.getUniformBorderRadius();
// draw background // draw background
if (this.backgroundColor != 0) { if (this.backgroundColor != 0) {
@@ -306,9 +306,8 @@ public class BorderDrawable extends ColorDrawable {
backgroundColorPaint.setAntiAlias(true); backgroundColorPaint.setAntiAlias(true);
if (this.clipPath != null && !this.clipPath.isEmpty()) { if (this.clipPath != null && !this.clipPath.isEmpty()) {
drawClipPath(this.clipPath, canvas, backgroundColorPaint, backgroundBoundsF, density); drawClipPath(this.clipPath, canvas, backgroundColorPaint, backgroundBoundsF, this.density);
} } else {
else {
canvas.drawRoundRect(backgroundBoundsF, outerRadius, outerRadius, backgroundColorPaint); canvas.drawRoundRect(backgroundBoundsF, outerRadius, outerRadius, backgroundColorPaint);
} }
} }
@@ -338,9 +337,8 @@ public class BorderDrawable extends ColorDrawable {
params.posY = params.repeatY ? 0 : params.posY; params.posY = params.repeatY ? 0 : params.posY;
if (this.clipPath != null && !this.clipPath.isEmpty()) { if (this.clipPath != null && !this.clipPath.isEmpty()) {
drawClipPath(this.clipPath, canvas, backgroundImagePaint, backgroundBoundsF, density); drawClipPath(this.clipPath, canvas, backgroundImagePaint, backgroundBoundsF, this.density);
} } else {
else {
boolean supportsPathOp = android.os.Build.VERSION.SDK_INT >= 19; boolean supportsPathOp = android.os.Build.VERSION.SDK_INT >= 19;
if (supportsPathOp) { if (supportsPathOp) {
// Path.Op can be used in API level 19+ to achieve the perfect geometry. // Path.Op can be used in API level 19+ to achieve the perfect geometry.
@@ -350,8 +348,7 @@ public class BorderDrawable extends ColorDrawable {
backgroundNoRepeatPath.addRect(params.posX, params.posY, params.posX + imageWidth, params.posY + imageHeight, Path.Direction.CCW); backgroundNoRepeatPath.addRect(params.posX, params.posY, params.posX + imageWidth, params.posY + imageHeight, Path.Direction.CCW);
intersect(backgroundPath, backgroundNoRepeatPath); intersect(backgroundPath, backgroundNoRepeatPath);
canvas.drawPath(backgroundPath, backgroundImagePaint); canvas.drawPath(backgroundPath, backgroundImagePaint);
} } else {
else {
// Clipping here will not be anti-aliased but at least it won't shine through the rounded corners. // Clipping here will not be anti-aliased but at least it won't shine through the rounded corners.
canvas.save(); canvas.save();
canvas.clipRect(params.posX, params.posY, params.posX + imageWidth, params.posY + imageHeight); canvas.clipRect(params.posX, params.posY, params.posX + imageWidth, params.posY + imageHeight);
@@ -363,7 +360,7 @@ public class BorderDrawable extends ColorDrawable {
// draw border // draw border
if (this.hasUniformBorder()) { if (this.hasUniformBorder()) {
float borderWidth = this.getUniformBorderWidth() * this.density; float borderWidth = this.getUniformBorderWidth();
int borderColor = this.getUniformBorderColor(); int borderColor = this.getUniformBorderColor();
// iOS and browsers use black when no color is specified. // iOS and browsers use black when no color is specified.
@@ -376,21 +373,18 @@ public class BorderDrawable extends ColorDrawable {
if (this.clipPath != null && !this.clipPath.isEmpty()) { if (this.clipPath != null && !this.clipPath.isEmpty()) {
borderPaint.setStyle(Paint.Style.STROKE); borderPaint.setStyle(Paint.Style.STROKE);
borderPaint.setStrokeWidth(borderWidth); borderPaint.setStrokeWidth(borderWidth);
drawClipPath(this.clipPath, canvas, borderPaint, backgroundBoundsF, density); drawClipPath(this.clipPath, canvas, borderPaint, backgroundBoundsF, this.density);
} } else {
else {
if (outerRadius <= 0) { if (outerRadius <= 0) {
borderPaint.setStyle(Paint.Style.STROKE); borderPaint.setStyle(Paint.Style.STROKE);
borderPaint.setStrokeWidth(borderWidth); borderPaint.setStrokeWidth(borderWidth);
canvas.drawRect(middleBoundsF, borderPaint); canvas.drawRect(middleBoundsF, borderPaint);
} } else if (outerRadius >= borderWidth) {
else if (outerRadius >= borderWidth) {
borderPaint.setStyle(Paint.Style.STROKE); borderPaint.setStyle(Paint.Style.STROKE);
borderPaint.setStrokeWidth(borderWidth); borderPaint.setStrokeWidth(borderWidth);
float middleRadius = Math.max(0, outerRadius - halfBorderWidth); float middleRadius = Math.max(0, outerRadius - halfBorderWidth);
canvas.drawRoundRect(middleBoundsF, middleRadius, middleRadius, borderPaint); canvas.drawRoundRect(middleBoundsF, middleRadius, middleRadius, borderPaint);
} } else {
else {
Path borderPath = new Path(); Path borderPath = new Path();
RectF borderOuterBoundsF = new RectF(bounds.left, bounds.top, bounds.right, bounds.bottom); RectF borderOuterBoundsF = new RectF(bounds.left, bounds.top, bounds.right, bounds.bottom);
borderPath.addRoundRect(borderOuterBoundsF, outerRadius, outerRadius, Path.Direction.CCW); borderPath.addRoundRect(borderOuterBoundsF, outerRadius, outerRadius, Path.Direction.CCW);
@@ -401,12 +395,11 @@ public class BorderDrawable extends ColorDrawable {
} }
} }
} }
} } else {
else { float top = this.borderTopWidth;
float top = this.borderTopWidth * this.density; float right = this.borderRightWidth;
float right = this.borderRightWidth * this.density; float bottom = this.borderBottomWidth;
float bottom = this.borderBottomWidth * this.density; float left = this.borderLeftWidth;
float left = this.borderLeftWidth * this.density;
//lto rto //lto rto
// +---------------------+ // +---------------------+
@@ -489,10 +482,10 @@ public class BorderDrawable extends ColorDrawable {
} }
} }
private static float calculateBackoffAntialias(int borderColor, float borderWidth, float density){ private static float calculateBackoffAntialias(int borderColor, float borderWidth) {
// We will inset background colors and images so antialiasing will not color pixels outside the border. // We will inset background colors and images so antialiasing will not color pixels outside the border.
// If the border is transparent we will backoff less, and we will not backoff more than half a pixel or half the border width. // If the border is transparent we will backoff less, and we will not backoff more than half a pixel or half the border width.
float halfBorderWidth = borderWidth * density / 2.0f; float halfBorderWidth = borderWidth / 2.0f;
float normalizedBorderAlpha = ((float) Color.alpha(borderColor)) / 255.0f; float normalizedBorderAlpha = ((float) Color.alpha(borderColor)) / 255.0f;
return Math.min(0.5f, halfBorderWidth) * normalizedBorderAlpha; return Math.min(0.5f, halfBorderWidth) * normalizedBorderAlpha;
} }
@@ -504,6 +497,7 @@ public class BorderDrawable extends ColorDrawable {
private static Pattern spaceAndComma = Pattern.compile("[\\s,]+"); private static Pattern spaceAndComma = Pattern.compile("[\\s,]+");
private static Pattern space = Pattern.compile("\\s+"); private static Pattern space = Pattern.compile("\\s+");
private static void drawClipPath(String clipPath, Canvas canvas, Paint paint, RectF bounds, float density) { private static void drawClipPath(String clipPath, Canvas canvas, Paint paint, RectF bounds, float density) {
// Sample string is polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%); // Sample string is polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
String functionName = clipPath.substring(0, clipPath.indexOf("(")); String functionName = clipPath.substring(0, clipPath.indexOf("("));
@@ -533,17 +527,14 @@ public class BorderDrawable extends ColorDrawable {
String leftString = "0"; String leftString = "0";
if (arr.length == 1) { if (arr.length == 1) {
topString = rightString = bottomString = leftString = arr[0]; topString = rightString = bottomString = leftString = arr[0];
} } else if (arr.length == 2) {
else if (arr.length == 2) {
topString = bottomString = arr[0]; topString = bottomString = arr[0];
rightString = leftString = arr[1]; rightString = leftString = arr[1];
} } else if (arr.length == 3) {
else if (arr.length == 3) {
topString = arr[0]; topString = arr[0];
rightString = leftString = arr[1]; rightString = leftString = arr[1];
bottomString = arr[2]; bottomString = arr[2];
} } else if (arr.length == 4) {
else if (arr.length == 4) {
topString = arr[0]; topString = arr[0];
rightString = arr[1]; rightString = arr[1];
bottomString = arr[2]; bottomString = arr[2];
@@ -634,8 +625,7 @@ public class BorderDrawable extends ColorDrawable {
res.sizeX = imageWidth; res.sizeX = imageWidth;
res.sizeY = imageHeight; res.sizeY = imageHeight;
} } else if ("number".equals(vx.getType()) && "number".equals(vy.getType()) &&
else if ("number".equals(vx.getType()) && "number".equals(vy.getType()) &&
(("px".equals(vx.getUnit()) && "px".equals(vy.getUnit())) || ((vx.getUnit() == null || vx.getUnit().isEmpty()) && (vy.getUnit() == null || vy.getUnit().isEmpty())))) { (("px".equals(vx.getUnit()) && "px".equals(vy.getUnit())) || ((vx.getUnit() == null || vx.getUnit().isEmpty()) && (vy.getUnit() == null || vy.getUnit().isEmpty())))) {
imageWidth = vx.getValue(); imageWidth = vx.getValue();
imageHeight = vy.getValue(); imageHeight = vy.getValue();
@@ -643,14 +633,12 @@ public class BorderDrawable extends ColorDrawable {
res.sizeX = imageWidth; res.sizeX = imageWidth;
res.sizeY = imageHeight; res.sizeY = imageHeight;
} }
} } else if (this.backgroundSizeParsedCSSValues.length == 1 && "ident".equals(this.backgroundSizeParsedCSSValues[0].getType())) {
else if (this.backgroundSizeParsedCSSValues.length == 1 && "ident".equals(this.backgroundSizeParsedCSSValues[0].getType())) {
float scale = 0; float scale = 0;
if ("cover".equals(this.backgroundSizeParsedCSSValues[0].getString())) { if ("cover".equals(this.backgroundSizeParsedCSSValues[0].getString())) {
scale = Math.max(width / imageWidth, height / imageHeight); scale = Math.max(width / imageWidth, height / imageHeight);
} } else if ("contain".equals(this.backgroundSizeParsedCSSValues[0].getString())) {
else if ("contain".equals(this.backgroundSizeParsedCSSValues[0].getString())) {
scale = Math.min(width / imageWidth, height / imageHeight); scale = Math.min(width / imageWidth, height / imageHeight);
} }
@@ -676,24 +664,20 @@ public class BorderDrawable extends ColorDrawable {
if ("%".equals(vx.getUnit()) && "%".equals(vy.getUnit())) { if ("%".equals(vx.getUnit()) && "%".equals(vy.getUnit())) {
res.posX = spaceX * vx.getValue() / 100; res.posX = spaceX * vx.getValue() / 100;
res.posY = spaceY * vy.getValue() / 100; res.posY = spaceY * vy.getValue() / 100;
} } else if ("number".equals(vx.getType()) && "number".equals(vy.getType()) &&
else if ("number".equals(vx.getType()) && "number".equals(vy.getType()) &&
(("px".equals(vx.getUnit()) && "px".equals(vy.getUnit())) || ((vx.getUnit() == null || vx.getUnit().isEmpty()) && (vy.getUnit() == null || vy.getUnit().isEmpty())))) { (("px".equals(vx.getUnit()) && "px".equals(vy.getUnit())) || ((vx.getUnit() == null || vx.getUnit().isEmpty()) && (vy.getUnit() == null || vy.getUnit().isEmpty())))) {
res.posX = vx.getValue(); res.posX = vx.getValue();
res.posY = vy.getValue(); res.posY = vy.getValue();
} } else if ("ident".equals(vx.getType()) && "ident".equals(vy.getType())) {
else if ("ident".equals(vx.getType()) && "ident".equals(vy.getType())) {
if ("center".equals(vx.getString().toLowerCase(Locale.ENGLISH))) { if ("center".equals(vx.getString().toLowerCase(Locale.ENGLISH))) {
res.posX = spaceX / 2; res.posX = spaceX / 2;
} } else if ("right".equals(vx.getString().toLowerCase(Locale.ENGLISH))) {
else if ("right".equals(vx.getString().toLowerCase(Locale.ENGLISH))) {
res.posX = spaceX; res.posX = spaceX;
} }
if ("center".equals(vy.getString().toLowerCase(Locale.ENGLISH))) { if ("center".equals(vy.getString().toLowerCase(Locale.ENGLISH))) {
res.posY = spaceY / 2; res.posY = spaceY / 2;
} } else if ("bottom".equals(vy.getString().toLowerCase(Locale.ENGLISH))) {
else if ("bottom".equals(vy.getString().toLowerCase(Locale.ENGLISH))) {
res.posY = spaceY; res.posY = spaceY;
} }
} }
@@ -716,11 +700,9 @@ public class BorderDrawable extends ColorDrawable {
// If you only one keyword is specified, the other value is "center" // If you only one keyword is specified, the other value is "center"
if ("left".equals(val) || "right".equals(val)) { if ("left".equals(val) || "right".equals(val)) {
result = new CSSValue[]{values[0], center}; result = new CSSValue[]{values[0], center};
} } else if ("top".equals(val) || "bottom".equals(val)) {
else if ("top".equals(val) || "bottom".equals(val)) {
result = new CSSValue[]{center, values[0]}; result = new CSSValue[]{center, values[0]};
} } else if ("center".equals(val)) {
else if ("center".equals(val)) {
result = new CSSValue[]{center, center}; result = new CSSValue[]{center, center};
} }
} }
@@ -729,23 +711,18 @@ public class BorderDrawable extends ColorDrawable {
} }
private static float cssValueToDevicePixels(String source, float total, float density) { private static float cssValueToDevicePixels(String source, float total, float density) {
float result;
source = source.trim(); source = source.trim();
if (source.contains("%")) {
if (source.contains("px")) { return Float.parseFloat(source.replace("%", "")) * total / 100;
result = Float.parseFloat(source.replace("px", "")); } else if (source.contains("px")) {
} return Float.parseFloat(source.replace("px", "")) * density;
else if (source.contains("%")) {
result = (Float.parseFloat(source.replace("%", "")) / 100) * (total / density);
} else { } else {
result = Float.parseFloat(source); return Float.parseFloat(source) * density;
} }
return result * density;
} }
public String toDebugString() { public String toDebugString() {
return return getClass().getSimpleName() + "@" + Integer.toHexString(hashCode()) + "; " +
getClass().getSimpleName() + "@" + Integer.toHexString(hashCode()) + "; " +
"id: " + this.id + "; " + "id: " + this.id + "; " +