swift - 角度渐变层

coder 2023-09-04 原文

我有自定义 UIView 类，它在 Swift 2 中呈现渐变。我正在努力制作一个有角度的渐变，以便它从左上角绘制到右下角。有人可以帮我一下吗？

import UIKit

class GradientView: UIView {

    let gradientLayer = CAGradientLayer()

    override func awakeFromNib() {
        // 1
        self.backgroundColor = ColorPalette.White

        // 2
        gradientLayer.frame = self.bounds

        // 3
        let color1 = ColorPalette.GrdTop.CGColor as CGColorRef
        let color2 = ColorPalette.GrdBottom.CGColor as CGColorRef
        gradientLayer.colors = [color1, color2]

        // 4
        gradientLayer.locations = [0.0, 1.0]

        // 5
        self.layer.addSublayer(gradientLayer)
    }

}

我怀疑这应该是别的东西，但无论我输入什么都没有改变。

gradientLayer.locations = [0.0, 1.0]

最佳答案

您不想使用locations 来指定渐变的方向。而是为此使用 startPoint 和 endPoint。

locations 数组用于指定在 startPoint 和 endPoint 之间应该发生渐变的位置。例如，如果您希望颜色仅出现在起点和终点范围中间 10% 的范围内，您可以使用:

locations = [0.45, 0.55]

locations 数组不指定方向。 startPoint 和 endPoint 可以。因此，对于从左上角到右下角的对角渐变，您可以设置 CGPoint(x: 0, y: 0) 的 startPoint 和 endPoint 到 CGPoint(x: 1, y: 1)。

例如:

@IBDesignable
class GradientView: UIView {

    override class var layerClass: AnyClass { return CAGradientLayer.self }

    private var gradientLayer: CAGradientLayer { return layer as! CAGradientLayer }

    @IBInspectable var color1: UIColor = .white { didSet { updateColors() } }
    @IBInspectable var color2: UIColor = .blue  { didSet { updateColors() } }

    override init(frame: CGRect = .zero) {
        super.init(frame: frame)
        configureGradient()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        configureGradient()
    }

    private func configureGradient() {
        gradientLayer.startPoint = CGPoint(x: 0, y: 0)
        gradientLayer.endPoint = CGPoint(x: 1, y: 1)
        updateColors()
    }

    private func updateColors() {
        gradientLayer.colors = [color1.cgColor, color2.cgColor]
    }

}

例如

请注意，与眼前的问题无关:

如果您要将渐变添加为子层，您需要在 layoutSubviews 中更新此子层的 frame，以便作为 View 的 bounds 改变了，gradientLayer 的 frame 也改变了。但是，比这更好的是，覆盖 View 的 layerClass，它不仅会为您实例化 CAGradientLayer，而且您还可以像 View 一样享受渐变的动态调整大小变化，特别是更优雅地处理动画变化。
同样，我设置了 color1 和 color2，它们会触发渐变的更新，这样颜色的任何变化都会立即反射(reflect)在 View 。
我做了这个@IBDesignable，所以如果我把它放在它自己的框架中，然后在 IB 中添加 GradientView，我会看到在 IB 中呈现的效果。

有关 Swift 2 的实现，请参阅 previous revision of this answer .

关于swift - 角度渐变层，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37038055/

swift 角度 code gradientLayer color uiview swift2 gradient cagradientlayer

有关swift - 角度渐变层的更多相关文章

javascript - SVG 向圆环图添加径向渐变 - 2
我正在用d3.js绘制图表。是否可以向圆环图添加径向渐变，这张图片怎么样？最佳答案假设圆弧部分是已填充的路径元素，您可以使用径向渐变来获得该结果。参见thissimilarquestion，我们可以重用这个例子来达到:vardataset={apples:[53245,28479,19697,24037,40245],};varwidth=460,height=300,radius=Math.min(width,height)/2;varcolor=d3.scale.category20();varpie=d3.layout.p
javascript - 是否可以使用图像或 CSS 渐变来填充 Google map 中的水域？ - 2
我目前正在从事某个元素，需要将下一个设计实现到Googlemap。我没有在谷歌地图样式引用中找到任何线索来回答这个问题-https://developers.google.com/maps/documentation/javascript/style-reference所以，我想知道-是否有可能(仅使用API)？或者需要一些技巧？例如，我考虑过让水域透明并将虚线图像放在map后面。提前致谢! 最佳答案在这个回答中，我将讨论关闭map上水几何体的可见性并设置map背后的背景颜色。首先，如前一个答案所述，您必须关闭map的可见性。您可
javascript - 动画渐变颜色 React Native - 2
我正在尝试在ReactNative中创建一个渐变，该渐变将在应用程序打开时以一种颜色开始，然后每30秒逐渐变为另一种颜色。常规线性渐变在不尝试添加动画的情况下工作。我尝试使用插值和动画计时，如ReactNative文档中所示，但似乎没有任何效果。我的代码:importReact,{Component}from'react';import{processColor,AppRegistry,StyleSheet,Dimensions,Animated,Image,Easing,View}from'react-native';importTimerMixinfrom'react-timer-
javascript - Flot 上的渐变 - 2
如何在饼图上设置渐变效果？[{label:i,data:1000,color:["rgb(190,110,110)","rgb(140,70,70)","rgb(110,50,50)","rgb(60,10,10)"]},//nextserie]不起作用。另外，如何将渐变效果设置为图表的默认颜色？您可以按数字对其进行索引，例如:[{label:i,data:1000,color:1,},//nextserie] 最佳答案我现在添加了对使用径向或线性渐变渲染饼图的支持。pullrequest#853中引用了我的提交.带有径向渐变的“
javascript - 如何为大像素的渐变制作动画？ - 2
我正在做一个项目，我希望黑暗覆盖屏幕，Angular色在黑暗中发光。我尝试为场景设置动画，然后使用以下代码在其上绘制黑暗:varcanvas=document.getElementById('canvas');varctx=canvas.getContext('2d');varcanvasWidth=canvas.width;varcanvasHeight=canvas.height;varpixelSize=30;varwidth=canvasWidth/pixelSize;varheight=canvasHeight/pixelSize;varlightX=canvasWidth/
javascript - 将线性渐变拆分为一个对象 - 2
这个问题在这里已经有了答案:parsecssgradientrulewithJavascriptregex(3个答案)关闭5年前。我想将linear-gradient值拆分为具有键和值的object。我有这个:linear-gradient(10deg,#111,rgba(111,111,11,0.4),rgba(255,255,25,0.1))我想要这样:linear-gradient:{angle:'10deg',color1:'#111',color2:'rgba(111,11,11,0.4)',color3:'rgba(255,255,25,0.1)',}已编辑:我尝试了我的代
安卓渐变的背景框实现 - 2
安卓渐变的背景框实现1.背景实现方法1.利用PorterDuffXfermode进行图层的混合，这是最推荐的方法，也是最有效的。2.利用canvas裁剪实现，这个方法有个缺陷，就是圆角会出现毛边，也就是锯齿。3.利用layer绘制边框1.背景万恶的设计小姐姐又来搞事情啦，你说好好的设计一个纯色的背景框框不好嘛，非要把一个框框弄成渐变的，如果不拿出放大镜估计没几个人能看出来它是渐变的。来，我让你看看是啥样框子是从左到右渐变的，设计应该是做了一个底图，然后上面盖了一个白色圆角矩形。那么我们该怎么去实现它呢？实现方法下面介绍三种实现它的方法。先贴上源码地址，大家记得给个starhttps://git
javascript - ChartJS 圆环图渐变填充 - 2
所以我尝试为ChartJS圆环图制作渐变填充，但这只能在水平方向上使用，而不是在圆形中使用。这是我正在使用的代码:varctx=document.getElementById("chart-area").getContext("2d");vargradient1=ctx.createLinearGradient(0,0,0,175);gradient1.addColorStop(0.0,'#ACE1DB');gradient1.addColorStop(1.0,'#7FBDB9');vargradient2=ctx.createLinearGradient(0,0,400,400);g
javascript - 获取带有渐变的colorbar中特定位置的颜色值 - 2
我使用CSS3样式(fiddle)生成了一个渐变颜色条，现在想要该颜色条中特定位置的颜色值(通过x和y坐标)。据我所知，没有直接的方法可以做到这一点。我看到两个选项:在JavaScript中实现梯度算法并从头开始计算值。是否有确切的定义该算法如何适用于多种颜色？渐变在每个浏览器中看起来都一样吗？使用canvas和createLinearGradient方法绘制渐变，直接访问Canvas获取颜色值。还有其他选择吗？最佳答案我选择实现您的第一个解决方案(使用JavaScript计算渐变)。这意味着您不需要依赖对canvas元素的支持
javascript - g.raphael.js 饼图渐变效果 - 2
我使用raphael.js在我的网站上绘制图像/图表，但在我的饼图上实现渐变效果时遇到了问题。我是这样调用它的:window.onload=function(){varr=Raphael("holder");varpie=r.g.piechart(250,240,180,,{colors:["#fff","#cc3333","#f200fd"]});};我在文档中读到渐变效果是可能的，就像某些示例中显示的那样。我试过:{colors:["r#fff-#ccc","r#fff-#ccc","r#fff-#ccc"]}或{gradients:["r#fff-#ccc","r#fff-#cc

swift - 角度渐变层

有关swift - 角度渐变层的更多相关文章

随机推荐