文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

iOS OC swift 自定义 popover 泡泡

棕色区域是可以设置的 红色 底层箭头视图的边框 白色 底层箭头视图的背景颜色 蓝色 自定义内容区域，在此区域（contentView）可以添加希望展示的内容 加号按钮 模拟了 sourceView...可以看到当 sourceView（加号按钮） 在不同地方的时候，popover 自动更改方向、调整箭头方向、位置以适应不同的 sourceView 类说明 open class KKPopover: UIView...内部合适的方向使用 open class KKPopoverArrowView: UIView 箭头视图的配置项 /// 边角弧度 open var borderRadius: CGFloat...arrowTipRadius: CGFloat = 0 /// 箭头底部基座宽度 open var arrowBaseWidth: CGFloat = 17 /// 箭头高度...，从顶部中心点到基座距离 open var arrowHeight: CGFloat = 10 /// 箭头边缘到边框最小的距离 open var minArrowEdg

3.4K70

【Flutter 专题】56 自定义 BubbleWidget 气泡插件

和尚绘制了一个简陋的原型图，整体黑框为 Bubble Widget 整体范围；蓝色圆弧为圆角位置；红色尖角可根据上下左右参数进行配置，且只可展示一个，尖角的高度和角度可自由配置，当确定一个尖角位置时，其余三个方向宽高延伸到黑框部分...绘制圆角 首先在边角处绘制四个圆弧，直接用 arcTo 即可，需要注意的是：和尚整体以 drawPath 方式实现，准备从左上角开始顺时针绘制，所以绘制圆弧时也是顺时针方向； void arcTo...绘制尖角 其次绘制尖角，和尚的尖角是由 lineTo 两段直线拼接起来的，只需要处理起点与终点即可；和尚为了更加灵活，可以设置尖角高度与尖角角度(0 ~ 180)，通过三角函数进行计算； path.lineTo...绘制连线 最后就是将处理好的连接起来，和尚为了适应更多场景，尖角位置也可自由配置，长度为到圆角的距离，默认为边框中间位置； 尖角在顶部时，距离为左上圆角结束点边距； 尖角在右侧时，距离为右上圆角结束点边距...// 圆角弧度大小(半径) this.strokeWidth = 4.0, // 边框宽度 this.style = PaintingStyle.fill, // 样式(填充或边框)

1.9K41
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    掌握这些CSS知识点，Coding如飞！

    /DYBOY/pen/JjbZgeE 2.2 border-radius百分比和像素 border-radius属性用于描述边框圆角半径，根据资料如果是百分比单位，则根据所在**盒子模型的矩形宽和高（包含...border和padding）**作为计算基数，border-radius的值描述的是边框角度所在椭圆的半长轴和半短长轴长度。...border-*-radius属性的两个长度或百分比值定义了四分之一椭圆的半径，该半径定义了外边界边角的形状（参见下图）。第一个值为水平半径，第二个为垂直半径。如果省略第二个值，则从第一个复制。...水平半径的百分比是指边框的宽度，而垂直半径的百分比是指边框的高度。...，更好的方法就是利用塌陷规则，增加margin-bottom/margin-top的值，直接计算得到两块元素之间的margin，并设置对应值。

    1.4K20

    CSS三大特性

    注意：不可进位 盒子模型 盒子模型是我们网络布局的最基础元素 网络布局过程： 先准备相关网页元素，网页元素基本都是盒子Box 利用css设计好盒子样式，并摆放到相应位置 往盒子里装内容 盒子模型组成部分...所以我们在设计盒子时需要保留边框粗细大小 例如： 当我们需要一个总体积为20*20的盒子，且需要边框2px 那么我们div的height和width只需设计到18px，然后我们再加上border-width...initial-scale=1.0"> padding应用于导航栏 .nav { /* 首先给大导航栏设计好高度和边框和底板颜色...例如圆角边框和阴影，就会为我们的Web页面起到美化的作用 圆角边框 border-radius就是用来控制图形四角的曲度 div { /* border-radius：length;里面设置的边角圆的半径...，也可也设置百分比 如果你想获得一个圆形，需要把高度宽度设置一致且length设置成图形直径的一半即可（）； 如果你想获得一个圆角矩形，只需把length设置为高度的一半即可 注意

    1.6K10

    盒子模型（CSS重点）

    所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。...: 100px; */             /* 半径为高度和宽度的一半 */             border-radius: 50%;         }         .juxing {...            width: 300px;             height: 100px;             background-color: pink;             /* 半径为高度的一半...我们尽量不要给行内元素指定上下的内外边距就好了。 content宽度和高度 使用宽度属性width和高度属性height可以对盒子的大小进行控制。...大多数浏览器，如Firefox、IE6及以上版本都采用了W3C规范，符合CSS规范的盒子模型的总宽度和总高度的计算原则是： /*外盒尺寸计算（元素空间尺寸）*/ Element空间高度 = content

    2.1K10

    HarmonyOS：ArkTS 多态样式自学指南

    (Color.Orange) // 修改边框颜色为橙色 .width(110) // 宽度 .height(30) // 高度 .opacity(0.9) //...在每个样式函数中，设置了组件在不同状态下的背景颜色、边框样式、宽度、高度等属性。....width(55) // 增加宽度 .borderWidth(1) // 调整边框宽度 .borderRadius(35) // 增大圆角半径...normalStyles​​​ 定义了 ​​Radio​​​ 组件在正常状态下的背景颜色，​​selectStyles​​​ 定义了 ​​Radio​​ 组件在选中状态下的背景颜色和边框样式。...在实际开发中，建议根据具体需求为不同的组件设置合适的状态样式，并注意处理好状态之间的切换逻辑。最后如果这篇文章对你有帮助，希望您能关注，点赞，加收藏哦～～～～

    44110

    关于Adobe Photoshop调整选区介绍

    边缘检测设置 半径：确定发生边缘调整的选区边框的大小。对锐边使用较小的半径，对较柔和的边缘使用较大的半径。 智能半径：允许选区边缘出现宽度可变的调整区域。...全局调整设置 平滑：减少选区边界中的不规则区域（“山峰和低谷”）以创建较平滑的轮廓。 羽化：模糊选区与周围的像素之间的过渡效果 对比度：增大时，沿选区边框的柔和边缘的过渡会变得不连贯。...通常情况下，使用“智能半径”选项和调整工具效果会更好。 移动边缘：使用负值向内移动柔化边缘的边框，或使用正值向外移动这些边框。向内移动这些边框有助于从选区边缘移去不想要的背景颜色。...输出设置 净化颜色：将彩色边替换为附近完全选中的像素的颜色。颜色替换的强度与选区边缘的软化度是成比例的。调整滑块以更改净化量。默认值为 100%（最大强度）。...注意: 单击 （复位工作区），可将设置恢复为您进入“选择并遮住”工作区时的原始状态。另外，此选项还可以将图像恢复为您在进入“选择并遮住”工作区时，它所应用的原始选区或蒙版。

    3.4K60

    优化产品外观降低铣削加工成本

    平铣刀（Flat End Mill）：或称平底刀，是最常见的铣刀，可用于材料挖空和垂直壁的加工。...保持圆角切割的直径尽可能大。 特征高度（Feature Height） 加工特征的高度应小于宽度的4 倍。高瘦的外观将在加工过程中剧烈振动，导致较差的公差和表面光滑度。...外圆角（Fillet External Corners） 你可以在零件的所有外边角都导小圆角，不会增加任何成本。这样可以减少锋利的边缘，并消除容易损坏或刮擦其他零件的弱角。...而所有边角都导圆角，将需要3D 曲面处理或专用工具来实现。...以上大致简单介绍了CNC 加工流程以及需要注意的地方，让设计师了解适合的加工方式，并顺利运用在自己所设计的产品上，更容易制造。

    78610

    【愚公系列】2023年11月 WPF控件专题 Ellipse控件详解

    ，设置了控件的宽度和高度为50，并设置了填充颜色和边框颜色以及边框宽度。...Ellipse控件也可以设置其他属性，例如：Center：控件中心点的位置RadiusX：椭圆水平半径的长度RadiusY：椭圆垂直半径的长度Stretch：控件如何拉伸以适应其容器Transform：...Stroke属性：用于设置Ellipse的边框颜色。StrokeThickness属性：用于设置Ellipse的边框宽度。Opacity属性：用于设置Ellipse的不透明度。...绘制视觉效果，例如在创建鼠标悬停或按下效果时，可以在控件周围绘制一个圆形或椭圆形的边框，并在其中添加阴影或颜色变化等效果。...该控件具有100像素的宽度和高度，填充颜色为蓝色，描边为红色，并有一个2像素的描边线条厚度。您可以根据需要更改这些属性。我正在参与2023腾讯技术创作特训营第三期有奖征文，组队打卡瓜分大奖！

    2.5K11

    大屏可视化之番外篇图标图表制作 图标1图标2图标3图标4，5图表总结

    首先在页面上面拖出一个梯形，然后调整期属性为填充，边框大小为1，边角样式为 “圆角”，梯形形状为“等腰梯形”： ? 调整梯形的上下边的长度，得到如下的图形： ?...然后在其下面放置一个圆形，便有了温度计的效果： ? 加上各种圆形的和圆环的效果便得到如下的效果： ? 图标2 ?...然后指定合适的圆角半径，即可得到需要的图形： ? 加上圆形 圆环等，即可得到下面的图标： ? 图标3 如下的图标： ? 和前面的图标一样，只需要看看中间的线段部分如何绘制即可。...首先在页面上面拖出来四个圆形，然后分别调整他们的填充颜色，大小，边框颜色，起始结束角度等，可以得到如下图形： ? 对于第一个圆形，只需要设置图形的尺寸，然后分别设置填充色和边框颜色即可： ?...对于第二个圆形，设置尺寸，设置不显示边框但现实填充，但是把填充的颜色设置为渐变的效果： ? 对于第一个圆形，只需要设置图形的尺寸，然后分别设置填充色和边框颜色，并设置其起始角度和结束角度： ?

    3.7K30

    简单实用的数控铣编程步骤

    一、编程格式 对大部分初学者来说，数控手工编程的学习还是非常困难的。针对这种情况，下面是一套简单的手工编程思考模式并给出简单的编程格式。...1.第一步：设定编程坐标系并标注 程序指令控制机床，要求机床按照预订的路线移动来达到加工的目的。所以，在见到零件图形的第一步，就是要将图形具体成各个点，刀具到达这些点便能加工出零件。...（2）XY轴零件，若工件或毛坯为为对称件，可选择在对称中心（如图1所示）；若为非对称工件，则选择在任意边角皆可，当然为了进刀方便，直角边最好。...对于简单图形图1来说，要铣削出图1的外形轮廓，刀具只需要在指令的控制下走出直线AB、BC、CD、EF、FA和圆弧DE即可，关键6个点就如图1所示的A、B、C、D、E、F。...这三个点反映了编程所设定的切入和切出方式。

    2.5K30

    25. 精细化列表项设计：多层嵌套布局与视觉层次构建

    16vp width '100%' 设置Row宽度占父容器的100% height 120 设置Row高度为固定的...参数 值 作用 radius2 设置阴影的模糊半径为2vp，值越大阴影越模糊 color...0x05000000设置阴影颜色为黑色（000000）且透明度为5%（05）在设计阴影时，应遵循以下原则：保持适度的模糊半径，避免过于锐利或过于模糊使用低透明度的颜色，避免阴影过于明显与卡片的圆角配合...4vp，使图片边角更圆润 3.3 objectFit属性的重要性objectFit属性控制图片如何适应其容器的尺寸，在列表项中尤为重要：ImageFit值效果描述...ScaleDown 保持宽高比，在None和Contain之间选择较小的一个 需要在保持原始大小和完全显示之间平衡的场景在产品列表中，通常使用ImageFit.Cover可以确保所有产品图片具有统一的视觉效果

    26300

    【详细教程】HTML、CSS 和 JS 实现一个任务管理工具-ToDoList

    ，它被定位在屏幕的中心，并且具有一个白色的背景和10像素的圆角边框。...输入框的样式包括宽度、高度、字体、边框、内边距、字体颜色和字体粗细。当输入框被聚焦时，边框颜色会改变。提交按钮的样式包括宽度、高度、字体、字体颜色、背景颜色、边框、圆角和光标样式。...，用于设置其背景颜色、内边距、顶部外边距、边框半径、宽度和相对定位。...，用于设置其背景颜色、高度、下外边距、内边距、显示属性、对齐方式、边框半径、边框样式和光标类型。...，用于设置其背景颜色、文本颜色、高度、宽度、边框半径、边框样式、光标类型和轮廓样式。

    2.1K50

    第七章第一节 99乘法表梯形

    将title标签内的文字更改为“99乘法表”。...）*/.info{padding:10px;/*为元素设置10像素的内边距（上、下、左、右四边均为10像素）*/border-radius:5px;/*设置元素的边框圆角为5像素，使边角呈现圆形效果*/...border:1pxsolid#ddd;/*为元素添加1像素宽度的实线边框，颜色为#ddd（浅灰色）*/cursor:pointer;/*将鼠标悬停在元素上时，光标形状更改为“指针”样式，暗示用户可以点击...){.item{width:calc(100%/3);}}/*定义信息展示样式（包括内边距、圆角、边框和鼠标悬停效果）*/.info{padding:10px;/*为元素设置10像素的内边距（上、下、左...、右四边均为10像素）*/border-radius:5px;/*设置元素的边框圆角为5像素，使边角呈现圆形效果*/border:1pxsolid#ddd;/*为元素添加1像素宽度的实线边框，颜色为#ddd

    7710

    CSS魔法堂：重拾Border之——不仅仅是圆角

    我们明明设置半径为100px，而且border box的高度恰好也是100px，按理应该是足够的，为何垂直半径的结果值不是100px呢？  其实W3C Spec中已经说得很清楚了！...，而border box宽度为200px，那么f1=200/1200=1/6; top-left和bottom-left的垂直半径之和为400px，而border box高度为400px，那么f2=400.../400=1; bottom-left和bottom-right的水平半径为0，忽略; top-right和bottom-right的垂直半径之和为400px，而border box高度为400px，那么...和top-right的垂直半径分别乘以f，得到结果值400/6=66.66。...被忽视的猪脚——相交线  当设置border-left和border-top后，我们很容易预测到左边框和上边框的样式，但它俩相交部分的样式呢？这里就涉及到相交线的问题了！

    1.7K50

    分享 10 个 常用且必须要掌握的 CSS 知识点

    元素的总高度和元素的宽度计算如下： 总高度：高度 + 上下内边距 + 上下边框 + 上下边距。 总宽度：宽度+左右内边距+左右边框+左右外边距。...box-sizing 的默认值为 content-box。 简单来说，这意味着边距、边框和填充将添加到使用 width 和 height 属性指定的总高度和宽度中。...或者换句话说，当向元素添加边距、内边距和边框时，元素的总高度和总宽度不会增加。 CSS盒子模型的组成部分： 1、内容： 这是 CSS 盒子模型的主要元素。...您可以使用 CSS 属性边框为例，通过“border: 1px solid green”来更改边框的大小、样式、颜色和宽度。 而 1px 是大小，solid 是样式，green 是边框的颜色。...其他各种 CSS 属性可以应用于边框。这些属性包括但不限于边界半径等。 4、边距： 边距是元素边界之外的空间。它在相邻元素之间创建了一个空间。

    9.2K10
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券