shadow 相关问题

我有一个矢量可绘制对象（category_bg），我将其用作 FrameLayout 的背景我有一个矢量可绘制对象（category_bg），我将其用作 FrameLayout 的背景 <?xml version="1.0" encoding="utf-8"?> <vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="200dp" android:height="100dp" android:viewportWidth="600" android:viewportHeight="450"> <path android:fillColor="#FFFFFF" android:fillType="evenOdd" android:pathData="M24.8,21.4c0,0,73.8-8.1,161.3-8.1c77.7,0,153.9,2,231.9,2c88.5,0,156.3,6,156.3,6c5.6,0,10.1,4.5,10.1,10.1 c0,0,2,41.2,2,134.1c0,68.5,4,77.9,4,139.1c0,65-6,114.9-6,114.9c0,5.6-4.5,10.1-10.1,10.1c0,0-32.1,7.1-80.6,7.1 c-47.5,0-99.6-7.1-164.7-7.1c-77.6,0-160.9,6-219.4,6c-52.8,0-84.7-6-84.7-6c-5.6,0-10.1-4.5-10.1-10.1c0,0-4-46.6-4-111.9 c0-85.8-1-102.9-1-183.5c0-55,5-92.7,5-92.7C14.7,25.9,19.2,21.4,24.8,21.4z" /> </vector> 我想向矢量绘图添加阴影我的 xml 文件 <FrameLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/category_bg" android:padding="3dp"> <com.shaker.materialComponents.view.MaskableFrameLayout android:id="@+id/category" android:layout_width="match_parent" android:layout_height="wrap_content" app:mask="@drawable/pic_mask" app:porterduffxfermode="DST_IN"> <com.shaker.materialComponents.view.AspectRatioImageView android:id="@+id/image" android:layout_width="match_parent" android:layout_height="wrap_content" android:adjustViewBounds="true" android:scaleType="centerCrop" android:src="@drawable/meal" app:aspectRatio="0.75" app:aspectRatioEnabled="true" app:dominantMeasurement="width"/> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="bottom" android:background="@drawable/category_gradient_bg" android:gravity="center" android:orientation="horizontal" android:paddingBottom="16dp" android:paddingLeft="16dp" android:paddingRight="16dp" android:paddingTop="20dp"> <com.shaker.materialComponents.view.MaterialTextView android:id="@+id/name" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:ellipsize="end" android:lines="1" android:text="Salads" android:textColor="#fff" android:textSize="18dp" android:textStyle="bold" app:customFont="GothamRounded-Bold.ttf"/> <ImageView android:id="@+id/expand_btn" android:layout_width="20dp" android:layout_height="20dp" android:src="@drawable/expand_button"/> </LinearLayout> </com.shaker.materialComponents.view.MaskableFrameLayout> 当前结果添加阴影后应该是这样的所有的荣誉都归于pskink，他在评论中将此代码链接到了问题。不幸的是，这似乎仍然是唯一的解决方案 // test code View v = new View(this); setContentView(v); Drawable source = getResources().getDrawable(R.drawable.chrome); Drawable mask = getResources().getDrawable(R.drawable.chrome_mask);; int[] colors = { Color.RED, Color.BLACK }; Drawable shadow = new GradientDrawable(GradientDrawable.Orientation.LEFT_RIGHT, colors); Shape s = new S(this, source, mask, shadow, 8); v.setBackground(new ShapeDrawable(s)); // end of test code ~ class S extends Shape { Context ctx; Drawable source; Drawable mask; Drawable shadow; float shadowRadius; Matrix matrix = new Matrix(); Bitmap bitmap; public S(Context ctx, Drawable source, Drawable mask, Drawable shadow, float shadowRadius) { this.ctx = ctx; this.source = source; this.mask = mask; this.shadow = shadow; this.shadowRadius = shadowRadius; } @Override protected void onResize(float width, float height) { int intrinsicWidth = source.getIntrinsicWidth(); int intrinsicHeight = source.getIntrinsicHeight(); source.setBounds(0, 0, intrinsicWidth, intrinsicHeight); mask.setBounds(0, 0, intrinsicWidth, intrinsicHeight); shadow.setBounds(0, 0, intrinsicWidth, intrinsicHeight); RectF src = new RectF(0, 0, intrinsicWidth, intrinsicHeight); RectF dst = new RectF(0, 0, width, height); matrix.setRectToRect(src, dst, Matrix.ScaleToFit.CENTER); Paint p = new Paint(); p.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN)); bitmap = Bitmap.createBitmap(intrinsicWidth, intrinsicHeight, Bitmap.Config.ARGB_8888); Canvas c = new Canvas(bitmap); shadow.draw(c); c.saveLayer(null, p, Canvas.ALL_SAVE_FLAG); mask.draw(c); c.restore(); bitmap = blurRenderScript(bitmap); c = new Canvas(bitmap); int count = c.saveLayer(null, null, Canvas.ALL_SAVE_FLAG); source.draw(c); c.saveLayer(null, p, Canvas.ALL_SAVE_FLAG); mask.draw(c); c.restoreToCount(count); } @Override public void draw(Canvas canvas, Paint paint) { canvas.drawColor(0xffdddddd); canvas.drawBitmap(bitmap, matrix, null); } Bitmap blurRenderScript(Bitmap input) { Bitmap output = Bitmap.createBitmap(input.getWidth(), input.getHeight(), input.getConfig()); RenderScript rs = RenderScript.create(ctx); ScriptIntrinsicBlur script = ScriptIntrinsicBlur.create(rs, Element.U8_4(rs)); Allocation inAlloc = Allocation.createFromBitmap(rs, input, Allocation.MipmapControl.MIPMAP_NONE, Allocation.USAGE_GRAPHICS_TEXTURE); Allocation outAlloc = Allocation.createFromBitmap(rs, output); script.setRadius(shadowRadius); script.setInput(inAlloc); script.forEach(outAlloc); outAlloc.copyTo(output); rs.destroy(); return output; } } 使用上面的解决方案，我对可绘制的圆形进行了此操作： val source: Drawable = ContextCompat.getDrawable(context,R.drawable.my_drawable)!! val colors = intArrayOf( Color.GRAY, Color.TRANSPARENT ) val shadow: Drawable = GradientDrawable(GradientDrawable.Orientation.BOTTOM_TOP, colors) val s: Shape = DrawableShadow(context, source, source, shadow, 10f) imageView.background = ShapeDrawable(s) imageView.setImageResource(R.drawable.my_drawable) 和我改变的DrawableShadow： class DrawableShadow( private val context: Context, private val source: Drawable, private val mask: Drawable, private val shadow: Drawable, private val shadowRadius: Float ) : Shape() { ... override fun draw(canvas: Canvas, paint: Paint?) { canvas.drawColor(Color.TRANSPARENT) ... 感谢@pskink的解决方案如果您已经在使用 compose（或者愿意通过使用 ComposeView 和传统视图方法将其集成到您的项目中），您可以这样做： Box{ Icon( imageVector = Icons.Default.ArrowForward, contentDescription = null, Modifier .offset(x = (-1).dp, y = (1).dp) .blur(4.dp), tint = Color.Black ) Icon( imageVector = Icons.Default.ArrowForward, contentDescription = null, tint = Color.White ) } 看起来像这样：可以使用模糊修改器和色调参数进行调整。为了清晰起见，本示例中的图标和值进行了硬编码。

android vector shadow

回答 3 投票 0

有什么方法可以轻松地为 SVG 提供嵌入框阴影吗？

我希望能够为这个房子形状的 SVG 添加微妙的嵌入阴影。 HTML：我希望能够为这个房子形状的 SVG 添加微妙的嵌入阴影。 HTML： <!DOCTYPE html> <html> <head> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <svg class="homeButton" xmlns="http://www.w3.org/2000/svg" height="10em" viewBox="0 0 576 512"><path d="M575.8 255.5c0 18-15 32.1-32 32.1h-32l.7 160.2c0 2.7-.2 5.4-.5 8.1V472c0 22.1-17.9 40-40 40H456c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1H416 392c-22.1 0-40-17.9-40-40V448 384c0-17.7-14.3-32-32-32H256c-17.7 0-32 14.3-32 32v64 24c0 22.1-17.9 40-40 40H160 128.1c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2H104c-22.1 0-40-17.9-40-40V360c0-.9 0-1.9 .1-2.8V287.6H32c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z"/></svg> </body> </html> CSS： * { background-color: lightcoral; text-align: center; } .homeButton { fill: white; margin-top: 12em; } 我尝试从互联网上复制粘贴代码，这是我所能做的，因为我对此类事情的经验非常有限。似乎没什么作用。尝试使用滤镜使用投影： * { background-color: lightcoral; text-align: center; } .homeButton { fill: white; margin-top: 12em; filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3)); }

html css shadow dropshadow

回答 1 投票 0

Android CardView 阴影被截断

阴影似乎切断了我的一些 CardView 用法。知道为什么吗？看起来删除父级上的填充可以解决问题，但我确实想要填充。我不想在

android android-cardview shadow

回答 2 投票 0

UITableViewCell：子视图阴影被其他单元格和表视图外部切断？

我有一个单元格垂直间距为 10px 的设计。我想在这些单元格周围设置阴影（实际上我将这些阴影应用到每个单元格的子视图），但这是结果...

ios uitableview shadow

回答 2 投票 0

快速将阴影绘制到 uibezier 路径

我有一个奇怪的问题。尽管我确实阅读了很多有关如何执行此操作的教程，但最终结果仅显示贝塞尔线，而不显示任何阴影。我的代码非常简单：让边界...

swift shadow uibezierpath cashapelayer

回答 4 投票 0

适用于 Android 的 Shadow Gradle 插件

有人成功使用Shadow Gradle Plugin生成AAR吗？我收到错误无法找到方法 ShadowJar()。这是我的配置插件{ id 'com.android.library' id '

android gradle shadow fatjar

回答 2 投票 0

CSS 滤镜阴影在 Safari 浏览器中悬停时看起来不同，如何解决？

我用滤镜阴影设置了悬停按钮的样式，如下所示： -webkit-filter: drop-shadow(0 0 0px rgba(0, 0, 0, 0)); 过渡：变换 0.6 秒缓入输出，过滤 0.8 秒缓入输出；变换：翻译...

css reactjs safari webkit shadow

回答 0 投票 0

Android TextView Shadow 是如何工作的

我有带阴影的文本视图要显示，我输入了 Shadow ShadowX 和 ShadowY 以及 ShadowRadius 的参数，如下面的 XML 代码所示我有带有阴影的文本视图要显示，我将 Shadow ShadowX 和 ShadowY 以及 ShadowRadius 的参数放入以下 XML 代码中 <TextView android:id="@+id/Title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:shadowDx="1" android:shadowDy="1" android:shadowColor="#e41919" android:shadowRadius="0.6" android:text="@string/nader" android:textColor="#e1e1e1" android:textStyle="bold" /> 但我不知道 Shadow X 、Shadow Y 和 Shadow Radius 在后台如何工作 android 如何从概念上评估这些参数值？ android:shadowDx – 指定阴影的 X 轴偏移量。您可以给出 -/+ 值，其中 -Dx 在文本左侧绘制阴影，+Dx 在右侧绘制阴影 android:shadowDy – 指定阴影的 Y 轴偏移。 -Dy 指定文本上方的阴影，+Dy 指定文本下方的阴影。 android:shadowRadius – 指定阴影边缘的模糊程度。如果需要突出阴影，请提供一个较小的值。 android 如何在逻辑上使用上述属性值而不指定任何格式的值，例如，请向我发送有关这些属性的任何教程 URL dp 像素如果您有任何有关 Shadow 参数的教程和参考，请帮助并向我发送有关 Shadow 的这些属性的博客 URL 教程请参考以下链接： http://android--code.blogspot.in/2015/05/android-textview-text-shadow.html 你必须在yout xml文件中取出3-4个textview，然后更改每个textview的shadowDx，shadowDy和阴影颜色，然后你就会观察到差异。在 TextView XML 中添加属性： android:shadowColor="#ff6ccDze0" android:shadowRadius="5" android:shadowDy="6" android:shadowDx="7" 尝试不同的值，我注意到 dx 的负值会将整个阴影向左移动（即平移） dx 的正值会将整个阴影向右移动（即平移） dy 的负值会向上移动（即平移）整个阴影 dy 的正值使整个阴影向下移动（即平移）距离由数值决定：绝对值越大，距离越大。

android textview shadow

回答 3 投票 0

html 画布阴影应用于所有内容

如果您定义一次阴影，那么它之后将应用于画布上的所有“图形”（这就是它应该做的）。样本： http://flanvas.com/development/flanvas/test.html 是否...

html canvas shadow

回答 5 投票 0

我在 Three.js 中遇到奇怪或部分阴影。只是想在一个或一组立方体上获得基本的阴影

目前正在尝试让一些阴影在 Three.js 中工作，尽管对 javascript 还很陌生。在尝试让一个立方体出现并具有像样的阴影后，我能够得到部分阴影，但它......

javascript three.js shadow

回答 1 投票 0

使用线性渐变快速添加阴影

我正在尝试添加阴影（如下图）但我有这样的结果代码：函数 addShadow() { 层.masksToBounds = false 图层.shadowRadius = 10 图层.shadowOpacity = ...

swift layer shadow

回答 1 投票 0

Android Jetpack Compose：深色内容的阴影无法正确显示

我试图在卡片、Surface 或任何容器中显示阴影，但阴影未在深色内容中显示。无关紧要：黑色或内部深色图像。尝试改变阴影颜色...

android android-jetpack-compose shadow android-compose-card

回答 1 投票 0

如何删除 Xamarin Forms 上按钮的阴影

可以吗？我想删除 Xamarin Forms 上按钮的阴影。谢谢

button xamarin.forms shadow

回答 5 投票 0

如何使背景出现在具有自己背景颜色的子元素上

我有一个带子项的可滚动容器元素： Adipisci，totam。错误，命令。我有一个带子项的可滚动容器元素： <ul class="scroll-shadows"> <li>Adipisci, totam.</li> <li>Error, dicta.</li> <li class="disabled-item">Disabled input</li> <li>Eveniet, dolorem!</li> ... </ul> 可滚动容器有顶部阴影（背景）： background: linear-gradient( gray, white ) center top; 子项已禁用并具有背景颜色： .disabled-item { background-color: #F6F6F7; } 问题是禁用元素的背景颜色出现在背景阴影上方。有没有办法将阴影优先于背景颜色，以便阴影出现在顶部？我尝试过的：尝试使用背景混合模式，但没有效果。尝试使用z-indexes，但没有效果。您可以在这里看到问题： // just so demo loads scrolled down a little. document.querySelector(".scroll-shadows").scrollTop = 30; .disabled-item { background-color: #F6F6F7; } .scroll-shadows { width: 600px; max-height: 300px; overflow: auto; -webkit-overflow-scrolling: touch; overflow-scrolling: touch; background: /* Shadow TOP */ linear-gradient( gray, white ) center top; background-repeat: no-repeat; background-size: 100% 60px; background-attachment: scroll; } /* Not important to the functionality, just for this particular demo */ .scroll-shadows { list-style: none; padding-left: 1rem; padding-right: 1rem; } .scroll-shadows > * { padding: 0.2rem; } * { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; display: grid; place-items: center; font: 500 100% system-ui, sans-serif; } .scroll-shadows { --scrollbarBG: transparent; --thumbBG: #90a4ae; scrollbar-width: thin; scrollbar-color: var(--thumbBG) var(--scrollbarBG); } .scroll-shadows::-webkit-scrollbar { width: 8px; } .scroll-shadows::-webkit-scrollbar-track { background: var(--scrollbarBG); } .scroll-shadows::-webkit-scrollbar-thumb { background-color: var(--thumbBG); border-radius: 6px; border: 3px solid var(--scrollbarBG); } <div> <ul class="scroll-shadows"> <li>Adipisci, totam.</li> <li>Error, dicta.</li> <li class="disabled-item">Disabled input</li> <li>Eveniet, dolorem!</li> <li>Id, tempora!</li> <li>Voluptate, consectetur?</li> <li>Voluptatibus, omnis.</li> <li>Eius, fugit.</li> <li>Quia, non!</li> <li>At, laudantium?</li> <li>Commodi, maiores!</li> <li>Lorem</li> <li>Ipsum</li> <li>Dolor</li> <li>Sit</li> <li>Amet</li> </ul> </div> CodePen：https://codepen.io/Radek-Skrabal/pen/oNJzMEQ 您可以尝试向 .disabled-item 元素添加具有“darken”值的混合混合模式；它看起来像这样： .disabled-item { background-color: #F6F6F7; mix-blend-mode: darken; }

css scroll background background-color shadow

回答 1 投票 0

一种在背景颜色上设置渐变的 CSS 方法

你能帮我解决以下挑战吗？有针对这个的解决方法吗？他们有一个带有子项的可滚动容器：阿迪皮斯西，... 你能帮我解决以下挑战吗？这个问题有解决办法吗？他们有一个带孩子的可滚动容器： <ul class="scroll-shadows"> <li>Adipisci, totam.</li> <li>Error, dicta.</li> <li class="disabled-item">Disabled input</li> <li>Eveniet, dolorem!</li> ... </ul> 可滚动容器有顶部阴影（背景）： background: linear-gradient( gray, white ) center top; 子项已禁用（背景颜色）： .disabled-item { background-color: #F6F6F7; } 有没有办法让阴影优先于背景颜色？我为这种情况创建了一个CodePen： https://codepen.io/Radek-Skrabal/pen/oNJzMEQ 尝试使用背景混合模式，但没有效果。尝试使用z-indexes，但没有效果。您可以尝试向 .disabled-item 元素添加具有“darken”值的混合混合模式；它看起来像这样： .disabled-item { background-color: #F6F6F7; mix-blend-mode: darken; }

css scroll background background-color shadow

回答 1 投票 0

shadow 相关问题

最新问题