Question

有没有一种方法不能将多个阴影彼此叠加？我正在尝试使用阴影来模拟元素周围的笔触。我需要使用阴影，因为当我们有带有透明点的蒙版或图像时，我需要它才能工作，而我找不到其他方法来完成同一件事。使用背景色的另一种方法不适用于具有透明度的png图像。

问题是，例如，当我为左侧和顶部定义阴影时，实际上并没有形成一个很好的重叠，而是将多余的阴影应用于有重叠的元素。最终以平坦的边缘而不是像应该的那样是圆形的边缘。请注意，尽管这是一个圆形的图像，但我们允许用户定义自己的蒙版并上传png，因此它几乎可以是任何形状。

以下是该问题的一个jsfiddle示例：https://jsfiddle.net/a67fqne2/17/

代码本身：

<div style="width: 391.6px; height: 369.6px; left: 239.6px; top: 28.9px; position: absolute; cursor: default; z-index: 52;">
  <div class="imageOuterStyleWrapper">
    <div class="imageMiddleStyleWrapper" style="filter: drop-shadow(rgb(139, 69, 19) 19.6px 0px 0px) drop-shadow(rgb(139, 69, 19) 0px 19.6px 0px) drop-shadow(rgb(139, 69, 19) -19.6px 0px 0px) drop-shadow(rgb(139, 69, 19) 0px -19.6px 0px); width: calc(100% - 39.16px); height: calc(100% - 39.16px); padding: 19.58px;">
      <div class="imageInnerStyleWrapper" style="clip-path: url(&quot;#Mask-2&quot;);"><img style="width: 100%; height: 133.083%; left: 0%; top: -16.5415%;" src="https://plicimgstaging-d6d.kxcdn.com?url=https%3A%2F%2Fplic-staging.s3.amazonaws.com%2Fphotos%2F4dbf8644-0751-4e9f-afaf-f5c4a00f6bae%2Foriginal%2FAbdulKarim-Naeemah-01195-00007.JPG%3FX-Amz-Algorithm%3DAWS4-HMAC-SHA256%26X-Amz-Credential%3DAKIAIZ3GLWGI2FROIRRA%252F20180712%252Fus-east-1%252Fs3%252Faws4_request%26X-Amz-Date%3D20180712T165503Z%26X-Amz-SignedHeaders%3DHost%26X-Amz-Expires%3D604800%26X-Amz-Signature%3Dd32c01d8dd7f82206b5f15028fc90a1ff6d5aadd71738648d8e477799e27816b&amp;op=resize,rotate&amp;deg=auto&amp;mode=clip&amp;filter=bilinear&amp;q=90&amp;w=450&amp;plic-ref=plic-books-dev&amp;sig=4ee24d37aa0356fe61c9500d370ca81944338fe5"></div>
    </div>
  </div>
</div>

<svg width="0" height="0" id="globalMaskDefinitions">
  <defs>
    <clipPath id="Mask-2" clipPathUnits="objectBoundingBox">
      <circle x="0" y="0" width="1" height="1" cx=".5px" cy=".5px" r=".5px"/>
    </clipPath>
  </defs>
</svg>

Answer 1

问题与这种情况下的圆形有关，因此将所有这些let node = node as! AugmentedRealityView3DObjectNode let mediaNode = mediaNode as! SCNNode let fontScalling: Float = 0.5 let marginScalling: Float = 0.9 let planeGeometry = mediaNode.geometry as! SCNPlane let textNode = mediaNode.childNodes.first! let mediaTextGeometry = textNode.geometry as! SCNText mediaTextGeometry.containerFrame = CGRect(withSize: CGSize(fromSize3D: node.augmentedRealityView.sizeForMainNode(node: node)) / CGFloat(fontScalling * marginScalling), centeredInContainerOfSize: .zero) let centerPoint = SCNVector3(getBoundingCenterPoint: mediaTextGeometry.boundingBox) textNode.position = SCNVector3(-centerPoint.x, -centerPoint.y, -centerPoint.z) * fontScalling * marginScalling textNode.scale = SCNVector3(qubicVector: fontScalling * marginScalling) // TODO: This causes crashes sometines in iOS 12. let boundingBoxSize = SCNVector3(getBoundingBoxSize: mediaTextGeometry.boundingBox) * fontScalling / marginScalling planeGeometry.width = CGFloat(boundingBoxSize.x) planeGeometry.height = CGFloat(boundingBoxSize.y)放置在不同的位置将不会保持圆形。

如果您更改颜色，这是一个更好的问题说明：

drop-shadow

div,
img {
  width: 100%;
  height: 100%;
  box-sizing: content-box;
}

.imageOuterStyleWrapper {
  width: 391.6px;
  height: 369.6px;
}

.imageMiddleStyleWrapper {
  filter: drop-shadow(red 19.6px 0px 0px) 
          drop-shadow(blue 0px 19.6px 0px) 
          drop-shadow(green -19.6px 0px 0px) 
          drop-shadow(yellow 0px -19.6px 0px);
  width: calc(100% - 39.16px);
  height: calc(100% - 39.16px);
  padding: 19.58px;
}
.imageInnerStyleWrapper {
  clip-path: url("#Mask-2");
}

但是，如果形状为正方形，则不会出现此问题，并且可以完美运行：

<div class="imageOuterStyleWrapper">
  <div class="imageMiddleStyleWrapper">
    <div class="imageInnerStyleWrapper" style=""><img src="http://wiesmann.codiferes.net/share/bitmaps/test_pattern.svg"></div>
  </div>



  <svg width="0" height="0">
  <defs>
    <clipPath id="Mask-2" clipPathUnits="objectBoundingBox">
      <circle x="0" y="0" width="1" height="1" cx=".5px" cy=".5px" r=".5px"/>
    </clipPath>
  </defs>
</svg>

div,
img {
  width: 100%;
  height: 100%;
  box-sizing: content-box;
}

.imageOuterStyleWrapper {
  width: 391.6px;
  height: 369.6px;
}

.imageMiddleStyleWrapper {
  filter: drop-shadow(red 19.6px 0px 0px) 
          drop-shadow(blue 0px 19.6px 0px) 
          drop-shadow(green -19.6px 0px 0px) 
          drop-shadow(yellow 0px -19.6px 0px);
  width: calc(100% - 39.16px);
  height: calc(100% - 39.16px);
  padding: 19.58px;
}

解决方法是使用SVG并依靠笔触获取所需内容：

<div class="imageOuterStyleWrapper">
  <div class="imageMiddleStyleWrapper">
    <div class="imageInnerStyleWrapper" style=""><img src="http://wiesmann.codiferes.net/share/bitmaps/test_pattern.svg"></div>
  </div>

我在这里使用了圆形，但是您可以轻松使用任何形状：

<svg width="200" height="200">
  <defs>
  <pattern id="img" patternUnits="userSpaceOnUse" width="200" height="200">
    <image  xlink:href="http://wiesmann.codiferes.net/share/bitmaps/test_pattern.svg" x="0" y="0" width="200" height="200" />
  </pattern>
  </defs>
  <circle fill="url(#img)" cx="100px" cy="100px" r="80px" stroke="rgb(139, 69, 19)" stroke-width="10"/>
</svg>

CSS：不要将多个阴影相互叠加

1 个答案: