首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

不懂设计产品不是好开发

如果这些类别在语义上独立就会选择方形调和颜色;如果这些类别可以配对,就会选择四方形调和颜色。 一个例子,我们假设需要为6个类别挑选6种颜色。...工具通过一个考虑到色相、色度和数值算法,生成一个可用、美观调色板。它还提供了一个关于从可及点上颜色提示。一旦你点击了一个卡片,考虑到对比度,color P字母可以是黑色或白色。...没有策略情况下,将形状积极地应用到每一个组件上,会分散注意力,减少关注度,并产生歧义。例如,条形图上应用形状可能会导致对所表示数值模糊不清。...一个按钮可以有一个最大20px圆角半径值,和最大6px切角值。 根据以下观察结果,将形状应用于演示应用程序UI组件。ATA标志有清晰圆角。Biohack标志有一个几何形状尖锐切口。...图标字体用字体字形绘制,但不是字母,而是图标和形状Android项目中,我们将SVG文件材质设计图标作为XML文件添加到资源文件夹

2.5K20

Flutter第一次失望

iOS上没有那么低级文字绘制经验(因为认为只会学习Flutter做所有事情),但是Core Text具有丰富工具集。...Flutter 指南中如此说: 以多个平台为目标的SDK很常见……提供可在所有目标平台上运行API。不幸,这通常意味着一个平台或另一个平台独有的功能不可用。...艺术文字 进行文字绘画应用程序也将从对文字绘画工具低级别访问受益。 用文本填充非矩形形状 为了使文本适合非矩形内容,您必须进行大量测量。换行在哪里一个难题。...不过,对此并没有寄予太大希望,因为Flutter主要开发人员之一对此表示: 如果您想要“真实”垂直文本,并带有强调标记,ruby和内联水平bidi文本以及所有内容,那么能提供最好办法,您可以尝试使用我们提供较差原语编写一个程序包来支持此操作...原因自己没有发现任何性能问题。如果您遇到过此类问题,请创建一个详细GitHub问题,并@suragch me。我会在这里链接到它。

2.6K30
您找到你想要的搜索结果了吗?
是的
没有找到

带你快速掌握Flutter视图(Widgets)

React Native,View一个支持Flexbox布局容器,样式,触摸处理和辅助控制。...那么,Flutter我们可以将Widget当做Android、iOS、RNView,但他们并不完全等价,当我们试图去理解 Flutter 如何工作时候,我们可以认为它是“声明和构建 UI...Flutter,因为Widget不可变,所以没有类似的方法。相反,我们可以传入一个函数或表达式,该函数或表达式返回一个Widget给父项,并通过布尔值控制Widget创建。...Android,可以使用Canvas 与 Drawable 屏幕上绘制自定义形状和图片; iOS 上,可以通过 CoreGraphics 来屏幕上绘制线条和形状RN我们通常是由react-native-canvas...因此,对于Android开发人员来说,Flutter绘制到画布一项非常熟悉任务。

10.9K10

Flutter使用Canvas实现小白兔绘制

按照惯例,先看一下最终实现效果: 实现 仔细观察上面的效果图,可以发现简笔小白兔实际上通过多个不同形状、不同位置 ”3“ 图形组成,所以核心就是如何绘制 ”3“ 形状,这里采用两个三次贝塞尔曲线来绘制...整体绘制 CustomPainter paint 方法中进行,所以首先创建一个 RabbitPainter 继承自 CustomPainter ,然后 Widget 通过 CustomPaint...这里使用数值如 110.w 为适配单位,关于 Flutter 屏幕适配请参考 :Flutter屏幕适配 实现效果如下: 这样就绘制出了兔子左边身体轮廓了,使用同样方法是不是就可以绘制出右边轮廓了呢...,萝卜叶上方一定位置,这里用到了 getMinYPosition 计算萝卜叶 Path Y 最小点,方法也是自定义扩展自 Path 方法,实现如下: extension PathExt on...Rect ,然后将画布移动到 Rect 中心点,创建一个 Path 并添加一个椭圆,椭圆 Rect 就是上面创建 Rect ,然后将 Path 以 Z 轴旋转一定角度使其与耳朵形状保持一个方向

92440

wordcloud词云图美化

参数详解 要想美化词云图,首先就要明白wordcloud自定义参数各个意思。...如果 mask 非空,设置宽高值将被忽略,遮罩形状被 mask 取代。除全白(#FFFFFF)部分将不会绘制,其余部分会用于绘制词云。...如:bg_pic = imread('读取一张图片.png'),背景图片画布一定要设置为白色(#FFFFFF),然后显示形状为不是白色其他颜色。...可以用ps工具将自己要显示形状复制到一个白色画布上再保存,就ok了。...: int or None #为每个单词返回一个PIL颜色 我们就先简单举个例子,我们做中文词云,必须要设置中文字体,不然就会乱码,所以必须设置font_size;默认背景黑色,我们要设置为其他颜色就需要设置

2K20

Photoshop软件应用项目(一)

界面,新建任意大小纸张,最好横向,给他填充一个背景色,这里就选择了比较浅一点黄色,在窗口才拦下,打开时间轴,如果你十天左右东西,可以右上方三个横杠处,删除时间轴,如下图,新建帧动画,就会出现下面的面板...第一个白色方框永远,代表,从第一张图片开始,一直播放到最后一张,并且立即以上一帧时间,跳转到第一张图片,继续播放,无限循环下去,永远旁边下拉箭头就是播放循环次数,第二个白色方框,正方形中间加号...如果你用,钢笔工具形状绘制的话,可能中间会有白色,这个时候可以用第二种方法 ctrl,左键这个图层,形成这个图层所有元素选区,新建一个图层,用画笔工具,调整硬边缘硬度为 100%,随意用什么颜色...一个杯子打开倒出液体,貌似是倒进了一个字体容器里将字体填充,还可以选择 logo,因为视频可以作为 logo 开场白,最好不要全是英文,英文可以不用太多字体形式一定要粗,如果汉字的话,太细字体也起不到很好效果...,因为容器,肯定要有容量没有容量容器,看起来就没有视觉冲击感,当然,文案搞好之后,最好不要和背景颜色产生冲突协调就行,要是真的用红蓝对比,也不是不行就看协不协调了,文案设定好后,记得转为智能对象。

75140

Flutter 组件集录】 DecoratedBox | 8 月更文挑战

1.认识 DecoratedBox 组件 DecoratedBox 组件可能单独使用频率不是很高,因为它被集成了 Container 组件装饰使用方式共通,源码说 DecoratedBox...decoration 成员类型 Decoration ,表示装饰对象。position 成员类型 DecorationPosition 枚举,表示在前景绘制还是背景绘制。...关于 ShapeBorder ,详见 : 《Path在手,天下有》 如下,通过一个 Flutter 自带 CircleBorder 来测试一下: DecoratedBox( position...本质上就是问如何通过绘制虚线,通过 DecoratedBox 装饰而已。发布 dash_painter 包中有实现虚线装饰,就以此来讲述一下如何自定义装饰。...Flutter 绘制指南 - 妙笔生花》 小册系统地介绍了 Flutter 绘制相关基础知识,感兴趣可以看一看。 4.

49330

Material Components——Shape处理

Material ComponentsGoogle官方对Material Deign最佳实践,这个库试图不同Android版本中统一Material Design UI组件外观和使用代码,当然也不同平台上统一这些组件...ShapePathModel,也有一些预定义现成Edge和Corner处理,它们已经实现了Material Design规范中介绍大部分形状效果。...不过这里要注意View布局边界问题,默认情况下,超出布局边界内容会被裁剪,所以这里使用TriangleEdgeTreatment(8.dp(), true),第二个参数isInside设置...clipChildren = false 这一点很重要,如果封装自定义View,通常可以attachToWindow中进行设置。...https://xuyisheng.top 网站,欢迎大家访问,我会在这里分享Android、Kotlin和Flutter相关开发经验,点击原文链接,一键直达。

1.2K20

python数据可视化——词云

from matplotlib import pyplot as plt 2 小刀试牛 首先需要进行分词,也就是将一个句子分割成一个词语,这里使用jieba分词 import jieba...如果 mask 非空,设置宽高值将被忽略,遮罩形状被 mask 取代。除全白(#FFFFFF)部分将不会绘制,其余部分会用于绘制词云。...如:bg_pic = imread('读取一张图片.png'),背景图片画布一定要设置为白色(#FFFFFF),然后显示形状为不是白色其他颜色。...可以用ps工具将自己要显示形状复制到一个白色画布上再保存,就ok了。...4 自定义背景形状 通过添加 “mask=”这个属性, 来实现改变背景形状,但是 背景图片必须白底,它会在你非白底地方填充上文字, 所以最终代码这样: import jieba from matplotlib

1.4K00

Flutter Slider 挂件:配合案例理解

Flutter ,有不同类型 slider 挂件,Flutter 框架中常用有: Slider - 一个 Material Design 组件,它允许你一个范围值中选中一个值(存在一个滑块...RangeSlider - 指定范围值,用来选择一个范围(使用两个滑块) 本文,我们将会学到: 我们 Flutter App ,如何使用这些基本挂件 通过添加颜色和应用主题,如何自定义它们..._value = 20; 上面设置属性,我们使用 Flutter 构建任何 slider 至少需要用到属性,但是,不同 slider,属性可能有点不同。...在这个挂件没有 value 属性;相反,有 values 属性,类型 RangeValues。...,蒙层透明 overlayShape:指定蒙层形状和其圆角 tickMarkShape:轨道上指示分割点,指定应用在滑块轨道蒙层上形状

21310

SceneKit 场景编辑器-为您AR体验构建3D舞台

要显示它,请单击视口下方左下方小窗口图标,控件旁边。在这里,您可以看到组成场景所有部分。这些对象是几何,灯光,相机等节点。节点与没有大小,没有形状没有颜色空间中位置,直到我们将它们分配给它。...现在,转到对象库并添加全向灯,它将从光源每个方向照亮场景。在场景左上角添加一个右下角添加另一个。您可以通过拖动操纵器或直接在位置框随意移动这些灯光。将“ 镜面反射”设置为白色。...如果你旋转我们到目前为止模型,盒子和飞机之间有一个小空间,那很好。我们不是试图在这里复制完美的手表,而只是学习如何使用基本形状组装物体。 平面颜色 让屏幕变黑,就像手表处于非活动状态一样。...表带 最后并非最不重要,手表缺少表带。猜猜我们将采用什么样形状?暂停阅读并尝试添加它然后自己定位。 如果您猜对了,它就是一个管子,因为管子中间空心。因此,请从对象库添加它。...双击节点图标以调整视图。正如你所看到,一旦调整了盒子大小,它所有孩子都一样。 预览观看场景 我们如何才能真实地看到手表应用外观?运行应用程序,您可以按cmd+ R了。

5.5K20

Flutter Widgets 之 Container

老 孟 一个 有态度 程序员 ? ? Container将会是我们以后最常用控件之一,Container容器类控件,即包含一个子控件。...无任何参数设置 如果只用Container包装子控件而没有任何其他参数设置,代码如下: Container( child: Text('老孟'), ) Container内子控件不会发生任何外观上变化...默认情况下,圆形直径等于Container窄边长度,相当于矩形内绘制内切圆。...上面的情况明显不是我们希望看到了,太丑了,我们希望背景圆角矩形,代码如下: Container( child: Text('老孟,一个有态度程序员'), padding...Alignment 对齐方式 注意:设置对齐方式后,Container将会充满其父控件,相当于Androidmatch_parent,不再根据子控件调整大小。

92530

Flutter - 利用 ClipPath 实现任意形状 Widget

用 path 来剪切 child widget。 每当要绘制小部件时,都会在委托上调用回调。回调函数返回一个路径,并且 widget 可防止 child path 外绘制。...= null), super(key: key, child: child); 首先可以看到需要参数其实就两个,一个 clipper,另一个 child。...所以在这里我们只需要定义好自己 Path 就可以实现任意形状 Widget 了。 开始实现自定义形状 Widget 我们来实现如下形状(上面原图、下面裁剪过): ?...也可以看看 张风捷特烈这篇文章 - 【Flutter高级玩法-shape】Path在手,天下有。[1] 这篇文章详细讲解了 Path 玩法,只有你想不到,没有它做不到!...最后也有讲解静态方法。

1.4K20

如何为移动应用设计出色图标

一个建议,图标中使用您应用配色方案。最好使用一种商标颜色作为主要颜色,例如在背景。尼克·萨波里托(Nick Saporito)为我们提供了在其图标设计中使用品牌颜色一个很好例子。...而另一个研究热门应用图标的颜色色轮分布情况统计。虽然这个研究比较早了,仍具有不少参考意义。 ? 结果与AndroidPlay商店相似。...iOS图标形状形式官方模板 Apple只是为您提供了一个模板来测试图标的不同大小,并为您提供遮罩形状。但是指南中,他们建议您将图标设计为完全正方形,因为系统会自动遮盖圆角。...建议为Apple Store创建正方形图标,因为图标将始终按照蒙版形状显示轮廓。因此,Apple Store,只有少数图标具有圆形或不规则形式。...您可以自由探索自己喜欢任何自定义形状,有时将图标元素直接使用会很好。甚至谷歌也这么做了。 ?

1.4K20

如何用Scratch 3绘制矢量图形 【Gaming】

无论放大或缩小多远,矢量图像看起来都很平滑,没有像素化。矢量可以创建任意大小平滑作品。 Scratch,游戏中可玩角色称为精灵。...将通过解释如何绘制苹果来演示Scratch绘制矢量精灵所有要点,但是您可以将此方法应用于任何要创建对象。...绘图工具 Scratch矢量绘图工具箱您找到绘制对象所需工具地方: 图片7.png 下面一些与绘制矢量图形相关词汇: 画布Canvas:你画地方;白色和灰色透明 节点Node:沿对象路径确定对象形状点...图片8.png 创建自定义精灵有两种方法: 若要创建一个全新精灵,请使用并组合工具箱任何绘图工具。...在你Scratch项目中使用它,Scratch网站上与其他Scratch用户共享它,最重要用vectors绘制出更酷东西。

5.5K00

代码变油画,前端小姐姐只用HTML+CSS就能做到,让美术设计也惊叹丨GitHub热榜

绘制过程 Diana专门讨论CSS网站CSS-Tricks写下了详细教程。 画出这样一个图形分成几步? 如果不用CSS,一般都是直接嵌入这个特殊图形。...如果用CSS,那么就从黑色矩形开始,然后两侧加上上两个与白色背景颜色匹配边框半径元素。 先画出一个黑色矩形,然后两边用圆弧遮挡。有了基础形状后,下一步就是给它添上渐变背景。...好,我们再回到人像画上,Diana绘制人物脖子也是类似的过程。 在上面这张图里,我们看到了Diana如何逐步改形状,最终得到了油画中人物脖子。...适用于Chrome 不过,由于这是一个纯个人艺术创作,Diana小姐姐并不关心浏览器适配性。 因此,这些代码Chrome里可以完美展现,如果用其他浏览器打开,可能就会出现不一样效果。...比如蒙拉丽莎,就可以用一个3万位质数二进制方式绘制出来。

94130

自定义View概述

自定义View ---- 往期文章我们花了很多篇文章来学习Flutter Widget 用法,FlutterWidget有很多,不肯能每个都给大家介绍到,但是基本上把常用都给大家介绍到了...当然,如果你觉得有哪些你特别想要了解而我没有涉及,可以文章下面或者公众号留言,我会抽时间安排。...官方肯定也会想到这一点啊,Flutter也是支持你自定义viewget Flutter绘制相关Painting层次,具体见下图: ?...通过这些属性我们可以很方便来定制自己UI效果,当然我们“作画”过程可以定义多个画笔,这样更方便我们对图形绘制 Offset坐标 这个就比较简单,一般指得坐标系一个点。...Rect 图形绘制,一般都是分区域绘制,这个区域一般都是一个矩形,绘制通常使用Rect来存储绘制位置信息。

74731

Flutter&Flame游戏 - 拾叁】碰撞检测 | CollisionCallbacks

Flame 中提供了 CollisionCallbacks ,对碰撞检测进行了封装,支持两个形状配置检测。本文我们就来认识一下如何使用这个 mixin 。...image.png 如下, Circle 构件,覆写 onCollisionStart 方法,当开始发送碰撞时,将圆颜色置为 blue;碰撞结束时,将圆颜色置为 white 。... Flame collisions/hitboxes 只提供了一些常用形状,比如 圆形 、多边形 、矩形 、屏幕 。感觉还是挺有局限性,如果能加上 Path 自定义形状就好了。...其实本质上就是为构件确定一个碰撞检测区域: image.png ---- 下面我们通过一个案例来测试一下 多边形 和 屏幕边界 碰撞检测:【13/03】 image.png https://p6...相比于之前 矩形域 和 中心点 包含关系,可以说上升了一个维度,支持了 域 和 域 之间碰撞。

89030

photoshop学习笔记

移动选区:绘制选区后,用矩形选框工具指在选区内,会出现白色箭头,可以移动选区。...(属性栏必须选 新选区) 移动内容:绘制选区后,用移动工具指在选区内,会出现黑色箭头,可以移动选区内内容。...形状图层转换为像素图层:栅格化图层(图层右键单击) (四)路径与形状区别 路径一条路径线(辅助功能),需要有后续操作:转选区,填充,描边 形状包含路径,可以通过小黑小白对形状进行调整。...图层蒙版黑白灰意义: 黑色表示透明(遮罩) 白色表示不透明(显示) 灰色表示半透明(过渡状态) 蒙版使用注意事项: 1,当用画笔涂抹后,画面没有透明而是变成了黑白色,检查是否选中了蒙版,很有可能选中图层缩略图...ALPHA通道白色意义: 黑色:表示没有被选中区域, 白色:表示被选中区域, 灰色:表示羽化半透明 新建ALPHA通道方法: 1,通道面板中新建 2,复制红绿蓝单色通道 3,存储选区 通道抠图步骤

3.1K20

iOS ARKit教程:用裸露手指在空中画画

VIO一种技术,通过技术,相机框架与运动传感器融合,以跟踪设备3D空间中位置。通过检测特征,或者换句话说,图像具有高对比度边缘点(例如蓝色花瓶和白色桌子之间边缘)来跟踪来自相机帧运动。...node一个正常SceneKit节点,放置平面的确切位置和方向。它没有几何形状,因此它是不可见。...现在,我们获得了屏幕上给出2D点情况下在检测到曲面上放置3D对象所需所有信息。那么,让我们开始画画。 画画 让我们首先解释计算机视觉绘制跟随人类手指形状方法。...绘制形状通过检测移动手指每个新位置,该位置放下顶点,以及将每个顶点与前一个顶点连接来完成。如果我们需要平滑输出,顶点可以通过简单线连接,或通过贝塞尔曲线连接。...真的试图在这篇文章尽量减少对数学使用,但在3D世界它有时不可避免

2.2K30
领券