handle shadow

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) {

Android/doric/src/main/java/com/github/penfeizhou/doric/shader/ViewNode.java

@@ -136,6 +136,19 @@ public abstract class ViewNode<T extends View> 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;

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')

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