jjzjj

swift - 裁剪 subview 的边框

coder 2023-09-07 原文

我正在尝试绘制两个 UIView 的轮廓，但是通过使用 border 属性我似乎无法实现我想要的。我正在获取左侧的图像，我想要右侧的图像:

这是我的代码:

    let main = UIView()
    main.frame = CGRect(x: 50, y: 50, width: 200, height: 100)
    main.backgroundColor = UIColor.clear
    self.view.addSubview(main)

    let v1 = UIView()
    v1.frame = CGRect(x: 0, y: 0, width: 200, height: 50)
    v1.backgroundColor = UIColor.blue
    main.addSubview(v1)

    let v2 = UIView()
    v2.frame = CGRect(x: 0, y: 50, width: 150, height: 50)
    v2.backgroundColor = UIColor.red
    main.addSubview(v2)

    main.clipsToBounds = true
    main.layer.borderColor = UIColor.black.cgColor
    main.layer.borderWidth = 3

最佳答案

您需要像这样创建自定义形状的边框层:

let main = UIView()
main.frame = CGRect(x: 50, y: 50, width: 200, height: 100)
main.backgroundColor = UIColor.clear
self.view.addSubview(main)

let v1 = UIView()
v1.frame = CGRect(x: 0, y: 0, width: 200, height: 50)
v1.backgroundColor = UIColor.blue
main.addSubview(v1)

let v2 = UIView()
v2.frame = CGRect(x: 0, y: 50, width: 150, height: 50)
v2.backgroundColor = UIColor.red
main.addSubview(v2)


// Custom Shape Layer    
let maskLayer = CAShapeLayer()
maskLayer.frame = main.bounds

// Custom CGPath        
let resultPath = CGMutablePath()
resultPath.addPath(CGPath(rect: v1.frame, transform: nil))
resultPath.addPath(CGPath(rect: v2.frame, transform: nil))
maskLayer.path = resultPath

// Add border
let borderLayer = CAShapeLayer()
borderLayer.path = maskLayer.path
borderLayer.strokeColor = UIColor.black.cgColor
borderLayer.lineWidth = 5
borderLayer.frame = main.bounds
borderLayer.zPosition = -1
main.layer.addSublayer(borderLayer)

关于swift - 裁剪 subview 的边框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41278472/

subviewswiftmainborderLayerbackgroundColoruser-interfaceborder

有关swift - 裁剪 subview 的边框的更多相关文章

  1. ruby-on-rails - 回形针调整大小并裁剪为矩形 - 2

    所以我期待一系列不同尺寸和纵横比的照片。我希望能够缩小/拉伸(stretch)照片以尽可能适合200x100矩形，然后裁剪不适合的其余部分。我希望裁剪也发生在中心周围。这可能吗？我对imagemagick文档感到很困惑。谢谢! 最佳答案 Paperclip的#选项将完全满足您的需求:在指定尺寸内最大程度地适应图像，然后在中心处利用重力裁剪多余部分。例子:has_attached_file:photo,:styles=>{:original=>"200x100#"}注意:如果您想保持原样不变并生成额外的裁剪缩略图，只需将:origin

  2. ruby-on-rails - 如何在 rails 中使用载波 'after the fact' 裁剪图像？ - 2

    我想做的是上传一张图片，然后将用户带到一个新页面，我将在该页面上使用Jcrop让用户选择他们想要裁剪的图片部分，然后存储该图片。本质上，我想让它成为一个两阶段过程。我知道如何执行javascript部分，并且我了解如何创建此功能的基本流程。但是，我不知道关于如何实现此目的的载波细节。我能找到的最接近的是:image.recreate_versions!但我仍然无法传入高度/宽度和开始x,y来裁剪它。例如，我如何告诉carrierwave在“事后”进行裁剪-即不是在第一次上传图像时？我看到了“处理”图像的方法，但它们会以固定的高度和宽度自动发生。我该如何延迟呢？本质上，我想做的是动态定义

  3. ruby-on-rails - 使用 Paperclip 进行简单裁剪 - 2

    我想在上传时使用Paperclip裁剪图像，以从原始图片的中心获得方形拇指。我在文档中找到了一种方法，它似乎完全符合我的要求:transformation_to(dst,crop=false)问题是我不知道在哪里使用这个方法。在这里简单地传递一些东西作为参数会很棒:has_attached_file:picture,:styles=>{:medium=>"600x600>",:thumb=>"somethinghere"} 最佳答案 你只需要使用#而不是>作为参数:has_attached_file:picture,:styles=

  4. javascript - 在聚焦和模糊时更改 TinyMCE 的边框颜色 - 2

    我将jQuery与TinyMCE结合使用。我试图让边框颜色在TinyMCE编辑器处于焦点时改变，然后在模糊时改变回来。在ui.css中，我添加/更改了这些:.defaultSkintable.mceLayout{border:0;border-left:1pxsolid#93a6e1;border-right:1pxsolid#93a6e1;}.defaultSkintable.mceLayouttr.mceFirsttd{border-top:1pxsolid#93a6e1;}.defaultSkintable.mceLayouttr.mceLasttd{border-bottom:

  5. javascript - 动画底部边框(从左到右) - 2

    我试图让底部边框从左到右。我似乎也无法将它直接定位在标题下方，并且它从中心向外动画。我不确定要更改什么。https://jsfiddle.net/81uo76hx/2/.slider{position:absolute;display:block;left:50%;top:90%;transform:translate(-50%,0);position:absolute;top:43%;margin:0auto;height:2px;background-color:#000;width:0%;} 最佳答案 希望你能用javascr

  6. javascript - Excel 导出为 html 无法在 Excel 2016 中显示边框 - 2

    我正在使用JavaScript将html导出到Excelxls文件，如下面的演示所示:http://js.do/sun21170/84913.我使用GoogleChrome来运行这个演示，但它也应该在Edge或IE或FireFox中运行。问题是，当我在Excel2016中打开导出的文件时，它显示没有任何边框，即使导出的html中有CSS来显示边框。问题:有没有办法在Excel中打开html文件时显示边框？在Excel中打开的相同html，在浏览器中呈现带有边框，因此边框的CSS是正确的。演示在http://js.do/sun21170/84913还显示了保存在Excel文件中的html

  7. javascript - javascript 裁剪图像质量差 (croppie) - 2

    我正在尝试使用Croppie在将图像上传到服务器之前使用Javascript裁剪图像。它工作得很好，用户界面也很好。但是，在玩演示时，我注意到生成的图像质量比原始图像差得多-我使用的是1920x1080图像。有解决办法吗？我也会接受其他图书馆的推荐:) 最佳答案 如果您正在缩放或旋转图像，一些降级是预料之中的并且是不可避免的。但是，如果您只是从原始图像中裁剪一block......默认CroppieJS将以视口(viewport)大小保存裁剪后的图像。对于1920x1080的大图像，视口(viewport)尺寸(可能)小于原始图像尺

  8. javascript - Highcharts 中选定列的不同边框 - 2

    我在我的应用程序中使用了highchart的柱形图。我有柱形图。当用户选择图表中的一列时，所选列应以不同的边框颜色和不同的宽度显示。这是代码片段$(function(){varchart=newHighcharts.Chart({chart:{renderTo:'container',type:'column'},xAxis:{categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']},plotOptions:{series:{allowPointSelect:true,ma

  9. javascript - 在 VUE 中切换样式时边框样式无法正确呈现 - 2

    检查这个demo下面:newVue({ el:'#app',data:{ flag:true},computed:{ style(){letstyleA={borderBottom:'1pxsolidred',borderRight:'1pxsolidred'};letstyleB={ border:'1pxsolidgreen',borderRight:'1pxsolidred'}returnthis.flag?styleA:styleB}},methods:{ changeStyle(){ this.flag=!this.flag;}}}).box{width:100px;heig

  10. javascript - 如何使用 `Backbone.View.events`定义监听自定义 subview 事件？ - 2

    是否可以使用Backbone.View.events定义来监听自定义subview事件？child定义所有click事件都被缓存并触发我的clicked函数:varChild=Backbone.View.extend({events:{'click':'clicked'},clicked:function(){alert('Viewwasclicked');this.trigger("customEvent");},render:function(){this.$el.html("Clickme");}});父定义为什么customEvent事件不调用我的action函数？varPar

随机推荐