我试着画圆形虚线，但我在css中变成了正方形 - 腾讯云开发者社区

再将 400px 的正方形与 450px 的圆形叠在一起，正方形无法将整个圆形包裹在内了，圆形超出的四个 b 区域又与 正方形多出来的 a 区域在视觉上互相抵消，所以 450px 的圆形与 400px...在画 icon 的时候，一定要把视觉尺寸这个无法用数字进行衡量的维度考虑进去。视觉重量小的元素要放大，视觉重量大的元素要缩小。...试着增加下面那条长条的长度。让下面那条长条多出 20px，这时候它们看起来才是对齐的，达成了视觉对齐。 ? 再来看看几种常见的样式。 ?...它们看起来是居中对齐的，但实际上并不是，右边箭头形状的按钮中的文字在物理上并未居中对齐，它距离左右两边的边距是不一样的，这种形状的按钮文字必须靠左一些才能看起来对齐。 ?...好吧，希望你能够看出来左边那颗按钮是有问题的，实际上我在画这枚按钮的时候确实点了对齐，但是为什么还会出问题呢?跟文字按钮对齐一样，对齐的方式选错了。

1.3K1 0

三种 Loading 制作方案

二、通过border-radius绘制圆环我们通常让一个元素变成圆形是先将一个元素设置为长和宽相等的正方形，然后给这个元素设置一个border-radius值为50%。...需要注意的是，border-radius: 50%是让整个正方形元素都变成圆形，即包括边框和内容区。... .loading-css { width: 50px; /*先将loading区域变成正方形*/ height: 50px...而viewBox表示的是截取图形的区域，因为矢量图的绘制区域可以是无限大的，具体绘制在哪里根据具体的设置而定，比如上面的circle就绘制在圆心坐标为(25,25)，半径为20的圆形区域中，而viewBox...字体图标下载后，将解压后的内容拷贝到项目中，并引入其中的iconfont.css到页面中，给要显示字体图标的元素加上iconfont类样式，字体图标会有一个对应的unicode编码，通过::before

3.2K1 0

您找到你想要的搜索结果了吗？

是的

没有找到

canvas 快速入门

如果将使用fillRect的例子修改为使用strokeRect，那么你就会明白我所说的意思了。 image-20220608122748832 矩形现在加上了轮廓线，它实际上变成了中空的。...接下来我们来看看如何画一个圆形？ 3.2 圆形要理解圆形与矩形之间存在很大区别并不难。然而，认识这一点能够说明为什么在Canvas中绘制圆形与矩形也有很大区别。...我绝对没有说谎。让我们马上修改本文开头所创建的正方形的颜色。...在 Canvas中绘制文本的好处是你可以利用 Canvas 支持的强大转换和其他绘图功能。然而，我必须提醒你，除非你有充分理由不使用普通的HTML元素，否则一定不要在 Canvas 中创建文本。...在我们的例子中，我们将准备擦除的区域的原点（左上角）移动到正方形的左上角(40, 40)，并将准备擦除的区域的宽度和高度设置为正方形的宽度和高度（100）。其结果是只将正方形所在的特定区域清除。

1.7K2 0

PS基础操作及常用快捷键

图层内容不需要再调整时，再合并如：下面的一幅画，上面的图层会把下面的图层覆盖住 ? 图层的顺序 ?...，属性栏中新选区被选中时，鼠标移动到选框范围内，按住左键拖动精确选框绘制：在属性栏中——样式“固定大小”，输入具体尺寸，在画布中单击鼠标固定比例：可以让选框始终按照一个比例进行绘制案例1：把下图设置成望远镜的视角...首先新建图层，在填充前景色为黑色，再用选图工具注意：画好一个圆形图形时，del掉，再鼠标直接拖动蚂蚁线的同时按住shift键移动，这样两个圆形就会处在同一水平线上。 ?...案例2：画一个“爱心”，由两个圆形和一个正方形构成前景色红色 ? ?...使用选图工具的固定大小，圆形和正方形都设置为宽高为200px的大小，每个图像占一个图层，分别把两个圆形的图层拖到正方形的两边即可画出“爱心”。

1.8K1 0

如何点击穿透Electron不规则窗体的透明区域

border-radius样式把#app元素设置成了圆形。...最终实现的窗口界面如图5-7：如果你略微了解CSS，你会知道除了圆形，你还可以通过CSS样式控制这个窗口成为任意其他形状。...点击穿透透明区域上面这个应用会有一点小问题，虽然窗口看起来是圆形的，但它其实还是一个正方形窗口，只不过正方形四个角是透明的，所以看起来像一个圆形的窗口。...至此，上文代码中的判断成立，当鼠标在前文所述四个区域移动时，鼠标事件允许穿透。鼠标在圆形区域移动时，鼠标事件不允许穿透。...至此，上文所述判断成立，运行程序，鼠标在正方形四角区域内点击，鼠标事件具备了穿透效果。

2.8K1 0

自定义圆形控件RoundImageView并认识一下attr.xml

自定义圆形控件 RoundImageView ，我相信大家在开发中会经常遇到设置圆形头像的情况，因为这样的头像显得漂亮。怎么做呢？先看效果图： ?...讲之前解释一下attr.xml的作用，我用土话废话说，这样容易理解：比如我自定义一个控件，怎么实现呢，以RoundImageView为例，首先是继承ImageView,然后实现其构造函数，在构造函数中，...比如颜色和宽度，这个在attr.xml中定义了相关的名字，而在使用RoundImageView的xml布局文件中，我们会为其设置值，这里需要用的值，就是从那里设置的），并设置在本控件中，然后继承onDraw.../** * 这个是继承的父类的onDraw方法 * * onDraw和下面的方法不用管，基本和学习自定义没关系，就是实现怎么画圆的，你可以改变下面代码试着画三角形头像，哈哈 */ @...-- 再解释一遍，我们在布局中使用了我们在sttr中定义的属性，并在这里的布局文件中赋了值，所以在RoundImageView类中的结构体设置属性使用的值，就是我们在这里赋的，如果不使用attr.xml

1.1K8 0

纯 CSS 实现波浪效果

原理原理十分简单，我们都知道，一个正方形，给它添加 border-radius: 50%，将会得到一个圆形。 border-radius：用来设置边框圆角，当使用一个半径时确定一个圆形。...github.com/chokcoco/iCSS/issues/15）可能有部分同学，还存在疑问，OK，那我们把上面的效果缩小 10 倍，将视野之外的动画也补齐，那么其实生成波浪的原理是这样的：图中的虚线框就是我们实际的视野范围...5一些小技巧单纯的让一个 border-radius 接近 50 的椭圆形旋转，动画效果可能不是那么逼真，我们可以适当的添加一些其他变换因素，让动画效果看上去更真实：在动画过程中，动态的改变 border-radius...的值；在动画过程中，利用 transform 对旋转椭圆进行轻微的位移、变形；上面也演示到了，多个椭圆同时转动，赋予不同时长的动画，并且添加轻微的透明度，让整个效果更佳逼真。...6总结系列 CSS 文章汇总在我的 Github（https://github.com/chokcoco/iCSS）。

1.2K2 0

Fabric.js 元素选中状态的事件与样式

我将对象元素选中后的设置分成3类进行讲解：控制角辅助边其他样式状态准备工作创建一个画布和一个圆形。为什么是圆形而不是矩形？等下你就知道了。...我最近也在整理 Fabric.js 的常用方法，有兴趣的可以看看《Fabric.js中文教程》约定本文所说的控制角和辅助边请看下图。...数组有3个或3个以上的元素：实线、虚线、实线、虚线…… 一直轮回下去。为了方便演示，我先将控制角的尺寸设置得大一点。...，还可以将它设置成圆形。...在 Fabric.js 中，给元素设置了内边距，会影响控制角和辅助边到元素边缘的距离。 padding 接受一个数值，不需要传入单位。

7.1K2 0

photoshop 选框和套索工具

选框和套索工具介绍上一篇文章photoshop常用图片处理技巧中，我大概介绍了一些基本概念。本篇章就是再细化讲解一下。...简单来说套索工具就是多种用来画蚂蚁线的工具，结合起来就是有分选框工具和套索工具。我用photoshop CC 2019截图示例如下：选框工具： ? 套索工具： ?...其实就是在原来的蚂蚁线上继续增加选区而已。可以看到上图我已经画出了两条蚂蚁线了。那么画了这两条线有什么用呢？可以新建一个画图文件看看，然后Ctrl+C复制，黏贴到新的画图文件看看，如下： ?...上图看出可以画出比较好的正方形了，但是有些时候需要画很精确的大小，靠一点点移动很好确定，能否输入宽高来绘画具体矩形呢？...按住shift键，绘画圆形跟上面的矩形一样，按住shfit绘画圆形，如下： ? 在操作的过程，可以发现这个正圆是以点击的位置慢慢左上角拖动出来的。

9292 0

nicegui布局细节补充——绝对定位，固定定位

只在滚动到指定位置才出现点击按钮，即可立刻回到页面顶部，并且按钮消失本节使用的 nicegui 版本为 1.4.21 绝对定位专栏惯例：先说原理细节，再给出一个封装好的便捷方法。...首先快速做一个卡片界面：行9：这里我全用 tailwind css 类名，设置一样的宽高( w-[4rem] h-[4rem] )，加上让正方形的4个角圆弧填满( rounded-full ) ，就成了一个圆形...但我们希望数字图案可以脱离这种规则，它可以很容易放置在容器(卡片)任意角落。...然后就可以通过各种位置属性指定在容器中的边缘位置。...但是现在需求还没有完成，圆形图标怎么可以往上移动，而又刚好放到卡片上边缘一半的地方？从卡片里面往上移动，确实不好做。因为卡片有内边距。其实有许多实现方式，这里只说一种，另一种我放到源码里面。

5251 0

用纯CSS实现优惠券剪卡风格

在做商城类项目的时候，我们可能都会经历过“优惠券”这类需求，笔者在过往工作中，都是直接要求UI切图来实现，直到有一天产品告诉我一个奇思妙想：这个优惠券的宽度会随内容变化的！...一下子让我陷入了人生的大思考，这样图片方式可不好整呐，因此萌生一个想法：能不能用纯css实现这些效果呢？0....实现虚线上面实现了内倒角，接下来就要考虑虚线了，既然要纯css，能不能把虚线也给优雅地实现了呢，其实线性渐变就可以做到，一起来看看：.line { width: 100%; height:...图片但是我们要冷静，之前的思路是先画一个方形，然后放置圆形或半圆叠盖，所以最终还是会原形毕露，结果还是必须掏空那段半圆缺口啊，可css明显是做不到的图片等等，这时候就需要逆转想法，不是先画一个方形再剔除半圆...，而是一开始就不画半圆这个缺口，将整个不规则形状填充出来，也就不需要剔除半圆了，先来看看下面这段css以及它的效果：width: 300px; height: 100px; background:

6303 0

Android样式的开发:shape篇

web的样式用css来定义，而android的样式主要则是通过shape、selector、layer-list、level-list、style、theme等组合实现。...我将用一系列文章，循序渐进地讲解样式的每个方面该如何实现。第一个要讲的就是shape，最基础的形状定义工具。...使用shape可以自定义形状，可以定义下面四种类型的形状，通过android:shape属性指定： rectangle: 矩形，默认的形状，可以画出直角矩形、圆角矩形、弧形等 oval: 椭圆形，用得比较多的是画正圆...line: 线形，可以画实线和虚线 ring: 环形，可以画环形进度条 rectangle rectangle是默认的形状，也是用得最多的形状，一些文字背景、按钮背景、控件或布局背景等，以下是一些简单的例子...，而在实际应用中，更多是画正圆，比如消息提示，圆形按钮等，下图是一些例子： ?

1.9K3 0

小白都能学会的css

在学习之前，我们先来认识一下css这位人物的作用 css 相当于美化工具，就是在事物原有的基础上对外表进行修饰和包装，跟ps、美图秀秀等类似，只不过，css 是美化的对象是html 文本，是一个超文本标记语言...中，我创建了一个空的div 标签，但是没有内容，所以你是看不到的，现在我给它一个css 中的border 属性，给它设置宽 width:100px 、高 height:100px 和边框宽度 border-width...我们先看下代码，添加样式的其中一种方法就是在head 的标签中添加style 标签，并在该标签下为body 下的div 标签添加css样式，这种方法我们称它为内联样式。...图中用矩形标注的内容对应的就是title 标签中的内容，箭头指的正方形，就是我们刚才添加css 后的效果。...我们只是设置了边框的宽度，用的是 border-width:1px;,但我们并没有是设置颜色，所以我们可以得知，边框的颜色默认是黑色的~ 现在我想要把边框颜色变成红色，那么我会这么做

5983 0

海龟图c语言编程,【编程课堂】海龟作图

大家好，又见面了，我是你们的朋友全栈君。...1、基本功能介绍在海龟作图中，我们可以编写指令让一个虚拟的(想象中的)海龟在屏幕上来回移动。这个海龟带着一只钢笔，我们可以让海龟无论移动到哪都使用这只钢笔来绘制线条。...度 turtle.left(angle) 向左偏 angle 度 turtle.home() 回到原点 turtle.circle(radius, extent=None, steps=None) 画圆形...首先画一个边长为100的正方形，然后再以半径为50画出其3/4圆。...turtle.right( 144)turtle.end_fill() 结果如图： 2.3 更多案例讲的再多也不如自己动手做一做，我们在网上挑选了几张使用 turtle 做的有意思的图片，大家可以欣赏并试着做一下

1.6K1 0

这是一篇很好的互动式文章，Framer Motion 布局动画

所以我们先从useEffect钩子中删除依赖数组，使钩子每次渲染都能运行。试着触发几次布局变化，检查控制台，看看显示的x和y值是什么。...在FLIP的最后一步，即 Play 步骤中，我们将这个 transform 动画化为零，让正方形动画化到它的最终位置。...如果我们在 play 步骤之前暂停动画，我们可以看到在 inverse 转步骤中出了问题--正方形没有完全与它的原始位置对齐：修复转换的起点我们试着搞清楚这个问题。...尝试我尝试的第一件事是，在父元素要做动画之前，先计算一次反比例，然后在子元素上单独运行一个动画。...，不可能一个子组件被校正而另一个子组件不被校正如果子组件也在做动画，可能会有问题--我没有测试过，但我认为比例校正会导致问题，因为我们扭曲了子组件的坐标空间 Framer Motion 的做法有点不同

2.5K2 0

Android 自定义标签 ViewLayout

我们可以用不同的颜色来绘制三角形当做标签的分类, 我们也可以提供隐藏三角形的方法, 你可能觉得这和一张.9图有什么区别呢, 那么我们来改变下view的大小看看效果当我们的viewlayout变成正方形或者...style用到view中,如果我们声明的自定义属性过多,但是我们并不是全部需要特殊的设置,我们提供一个默认的style,那么我们在xml里面只需要写宽高属性就行了,如果有默认的style满足不了你的需求...,比如三角你要换成紫色,那么你就另外加一个app:triangleColor="紫色"就行了新建自定义view的类,继承layout 在构造函数中获取自定义属性的值上面基本都是模板代码了,没上面可以说的...中绘制了接下来我们来绘制中间的虚线,大家都知道 paint画笔有一种虚线的模式我们给画笔设置了Effecte 然后drawLine的时候在XML布局预览中发现虚线生效了,但是…但是当你run到手机上发现...虚线和预览的不一样,还是直线, 注意画虚线不要用drawLine方法,当你设置了画笔的effecte后,绘制直线请用drawPath才会生效,才能和预览的XML中显示一致,这里一定要注意 ** 绘制虚线用

1.3K10 0

一个比想象中更骚气的圆-svg实现

="308 1000"中，308表示虚线中的线段的长度，而1000表示两个线段间的长度是1000px。...这个dashoffset和上面那个结合起来用，一般来说虚线的第一段是实线线段，如果我想要第一段是空白怎么办，设置这个dashoffset就可以了。...，这里r设置49和Canvas的原理一样，想画看起来半径54的圆，需要用54减去描边宽度的一半，54-10/2，而这里stroke-dasharray的第一个数，我这里设置的是圆的周长，2Math.PI49...整体和CSS3动画还是很像的。这里还有一个stroke-linecap="round"和Canvas的ctx2.lineCap="round";作用一样，是设置描边的两头是圆形。...不过svg在android4.3以上才有比较好的支持，相对来说canvas的支持就比较好了。

3.1K7 0

动态｜谷歌大脑教机器画简笔画，神经网络的大作都长啥样？

一些 sketch-rnn 创作的画在 David Ha 与 Douglas Eck 合作的论文《A Neural Representation of Sketch Drawings》中，研究者设计了一个名为...从图中可以发现，系统依然将牙刷抽象成了一只猫的样子（比如尖耳朵和触须）。这一结果表明，神经网络已经学会了从输入中抽象出猫的概念，也能根据隐向量重构新的简笔画。 ?...可以看到，隐向量掌握了鼻子与头的相对位置，并且在逐步的尝试后形成了身体和腿的概念。 ? 那么，如果是不同的动物进行融合，如何整合它们的特征？...在向小猫模型中输入了四把姿态各异的椅子图案之后，模型学习了椅子的特征，进而生成了各种具有椅子特征的小猫，并产生了多种设计方案。研究者相信，将不同种类的事物交给神经网络，可能产生意想不到的交互和想象。...研究者用圆形和正方形的图案让系统自由作画，进而有了火烈鸟、蚂蚁、猫头鹰、直升机等等结果。设计者在研究这些机器产生的图案时在，也能够设计出富有创造力的作品。 ?

1.3K7 0

谷歌大脑让机器尝试画画，虽然结果很勉强但过程你却不能不知道

6918 0

绘图-Core Graphics

简述绘图的步骤：（在drawRect函数中） 1.获取绘图上下文 2.创建并设置路径 3.将路径添加到上下文 4.设置上下文状态 5.绘制路径 6.释放路径在使用Core Graphics...时有许多方式获得一个图形上下文，这里我介绍两种最为常用的获取方法第一种方法就是创建一个图片类型的上下文。...线条结尾处绘制半个边长为线条宽度的正方形。...需要说明的是， #这种形状的端点与“butt”形状的端点十分相似，只是采用这种形式的端点的线条略长一点而已 CGContextSetLineDash 画虚线 CGContextAddRect 画一方框...CGPathApply 每个元素的图形路径中，调用一个自定义应用功能。 CGPathMoveToPoint 开始在一个可变的图形路径指定一个位置，一个新的子路径。

1.5K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

详解视觉误差对UI设计的影响和解决方案

三种 Loading 制作方案

canvas 快速入门

PS基础操作及常用快捷键

如何点击穿透Electron不规则窗体的透明区域

自定义圆形控件RoundImageView并认识一下attr.xml

纯 CSS 实现波浪效果

Fabric.js 元素选中状态的事件与样式

photoshop 选框和套索工具

nicegui布局细节补充——绝对定位，固定定位

用纯CSS实现优惠券剪卡风格

Android样式的开发:shape篇

小白都能学会的css

海龟图c语言编程,【编程课堂】海龟作图

这是一篇很好的互动式文章，Framer Motion 布局动画

Android 自定义标签 ViewLayout

一个比想象中更骚气的圆-svg实现

动态｜谷歌大脑教机器画简笔画，神经网络的大作都长啥样？

谷歌大脑让机器尝试画画，虽然结果很勉强但过程你却不能不知道

绘图-Core Graphics

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐