From 9a94ed5dda2e20585e09d018e80dbee8aca92493 Mon Sep 17 00:00:00 2001 From: "pengfei.zhou" Date: Fri, 2 Aug 2019 17:11:35 +0800 Subject: [PATCH] handle shadow --- .../penfeizhou/doric/shader/DoricLayer.java | 32 +++++++++++++++++-- .../penfeizhou/doric/shader/ViewNode.java | 13 ++++++++ js-framework/demo.ts | 23 +++++++++++-- js-framework/src/ui/view.ts | 2 +- 4 files changed, 64 insertions(+), 6 deletions(-) diff --git a/Android/doric/src/main/java/com/github/penfeizhou/doric/shader/DoricLayer.java b/Android/doric/src/main/java/com/github/penfeizhou/doric/shader/DoricLayer.java index 5802c8c5..41ac734b 100644 --- a/Android/doric/src/main/java/com/github/penfeizhou/doric/shader/DoricLayer.java +++ b/Android/doric/src/main/java/com/github/penfeizhou/doric/shader/DoricLayer.java @@ -2,15 +2,18 @@ package com.github.penfeizhou.doric.shader; import android.content.Context; import android.graphics.Canvas; +import android.graphics.Color; import android.graphics.Paint; import android.graphics.Path; import android.graphics.RectF; +import android.graphics.Region; import android.os.Build; import android.support.annotation.NonNull; import android.support.annotation.Nullable; import android.support.annotation.RequiresApi; import android.util.AttributeSet; import android.view.View; +import android.view.ViewGroup; import android.widget.FrameLayout; /** @@ -20,7 +23,7 @@ import android.widget.FrameLayout; */ public class DoricLayer extends FrameLayout { private Path mCornerPath = new Path(); - private Paint shadowPaint = new Paint(); + private Paint mShadowPaint; private Paint mBorderPaint; private RectF mRect = new RectF(); private float[] mCornerRadii; @@ -63,22 +66,47 @@ public class DoricLayer extends FrameLayout { mRect.right = getWidth(); mRect.top = 0; mRect.bottom = getHeight(); + canvas.save(); if (mCornerRadii != null) { mCornerPath.reset(); mCornerPath.addRoundRect(mRect, mCornerRadii, Path.Direction.CW); canvas.clipPath(mCornerPath); } - super.dispatchDraw(canvas); + canvas.restore(); // draw border if (mBorderPaint != null) { + ((ViewGroup) getParent()).setClipChildren(false); if (mCornerRadii != null) { canvas.drawRoundRect(mRect, mCornerRadii[0], mCornerRadii[1], mBorderPaint); } else { canvas.drawRect(mRect, mBorderPaint); } } + if (mShadowPaint != null) { + ((ViewGroup) getParent()).setClipChildren(false); + canvas.save(); + if (mCornerRadii != null) { + canvas.clipPath(mCornerPath, Region.Op.DIFFERENCE); + canvas.drawRoundRect(mRect, mCornerRadii[0], mCornerRadii[1], mShadowPaint); + } else { + canvas.clipRect(mRect, Region.Op.DIFFERENCE); + canvas.drawRect(mRect, mShadowPaint); + } + canvas.restore(); + } + } + + public void setShadow(int sdColor, int sdOpacity, int sdRadius, int offsetX, int offsetY) { + if (mShadowPaint == null) { + mShadowPaint = new Paint(); + mShadowPaint.setAntiAlias(true); + mShadowPaint.setStyle(Paint.Style.FILL); + } + mShadowPaint.setColor(sdColor); + mShadowPaint.setAlpha(sdOpacity); + mShadowPaint.setShadowLayer(sdRadius, offsetX, offsetY, sdColor); } public void setBorder(int borderWidth, int borderColor) { diff --git a/Android/doric/src/main/java/com/github/penfeizhou/doric/shader/ViewNode.java b/Android/doric/src/main/java/com/github/penfeizhou/doric/shader/ViewNode.java index 6a928190..b9c011c1 100644 --- a/Android/doric/src/main/java/com/github/penfeizhou/doric/shader/ViewNode.java +++ b/Android/doric/src/main/java/com/github/penfeizhou/doric/shader/ViewNode.java @@ -136,6 +136,19 @@ public abstract class ViewNode extends DoricContextHolder { } } + break; + case "shadow": + if (doricLayer != null) { + if (prop.isObject()) { + doricLayer.setShadow( + prop.asObject().getProperty("color").asNumber().toInt(), + (int) (prop.asObject().getProperty("opacity").asNumber().toFloat() * 255), + DoricUtils.dp2px(prop.asObject().getProperty("radius").asNumber().toFloat()), + DoricUtils.dp2px(prop.asObject().getProperty("offsetX").asNumber().toFloat()), + DoricUtils.dp2px(prop.asObject().getProperty("offsetY").asNumber().toFloat()) + ); + } + } break; default: break; diff --git a/js-framework/demo.ts b/js-framework/demo.ts index c6950d27..dd65ac07 100644 --- a/js-framework/demo.ts +++ b/js-framework/demo.ts @@ -21,11 +21,11 @@ class CounterView extends ViewHolder { this.counter = new Text this.counter.text = "点击计数" this.counter.border = { - width: 10, + width: 1, color: Color.parse('#000000'), } this.counter.textSize = 20 - this.counter.corners = 5 + //this.counter.corners = 5 vlayout.space = 20 vlayout.layoutConfig = { alignment: new Gravity().center() @@ -34,7 +34,24 @@ class CounterView extends ViewHolder { width: 1, color: Color.parse("#000000"), } - vlayout.corners = 10 + this.counter.shadow = { + color: Color.parse("#00ff00"), + opacity: 0.5, + radius: 20, + offsetX: 10, + offsetY: 10, + } + vlayout.shadow = { + color: Color.parse("#00ff00"), + opacity: 0.5, + radius: 20, + offsetX: -10, + offsetY: 10, + } + vlayout.corners = { + leftBottom: 10, + rightBottom: 20, + } vlayout.addChild(this.number) vlayout.addChild(this.counter) // root.bgColor = Color.parse('#00ff00') diff --git a/js-framework/src/ui/view.ts b/js-framework/src/ui/view.ts index ff99df16..3117048a 100644 --- a/js-framework/src/ui/view.ts +++ b/js-framework/src/ui/view.ts @@ -35,7 +35,7 @@ export abstract class View implements Modeling { border?: { width: number; color: Color; } @Property - shadow?: { color: Color; opacity: number; radius: number; offset: { width: number; height: number; }; } + shadow?: { color: Color; opacity: number; radius: number; offsetX: number; offsetY: number } @Property alpha?: number