童话说说技术创业美文职业
投稿投诉
职业母婴
职场个人
历史治疗
笔记技能
美文纠纷
幽默家庭
范文作文
乐趣解密
创业案例
社会工作
新闻家居
心理安全
技术八卦
仲裁思考
生活时事
运势奇闻
说说企业
魅力社交
安好健康
传统笑话
童话初中
男女饮食
周易阅读
爱好两性

PaintCode用户操作指南(变量篇)

5月17日 火云谷投稿
  使用变量(UsingVariables)
  和颜色和渐变一样,变量也是设计师能够在PaintCode文档中使用的一种库项目。
  变量可以使数字、文本、布尔值(逻辑数值)、点、矩形、大小,甚至是颜色、阴影和渐变。设计师能够将变量与画布中的图形属性相连。
  例如,设计师可以创建一个树枝变量为半径,并且它连接到几个圆角矩形的半角半径属性。当设计师改变半径变量,所有被连接图形的角半径都将同步更新。
  通过在画布上生成绘制方法,变量会转化为方法参数。
  创建变量(Creatingvariables)
  在库中变量头部左边的位置,单击按钮,来创建一个新的变量。然后,选择设计师想创建的变量类型。
  编辑变量(Editingvariables)
  当设计师创建一个新的变量的同时,一个编辑区域也会出现。设计师在库中双击变量,能够随时进入编辑区域。
  编辑区域允许设计师调整变量的属性,也许最重要的是它的值和名字。
  不同的变量有不同的编辑区域。以下是矩形变量编辑区域的样子:
  惯用属性影响着生成的代码,一会回来。
  小窍门:设计师在没有打开变量编辑区域的时候,就能够调整大所属变量的值。只要单击并上下拖动变量的值域编辑区域就可以了。
  连接变量和图形(Connectingvariabletoshapes)
  有几种方法能够将变量与一些图形的属性连接。第一种,在画布中选择图形(或者几个图形),然后点击并拖动变量连接点到检查器中图形的属性上。
  或者,设计师能够点击并拖动连接点直接连接到画布中的图形,然后从弹出的上下文菜单中选择想要的属性。这比第一中方法方便。但是,设计师只能用它来操作一次,用来连接一个图形的变量(相比之下,当设计师通过检查器创建连接的时候,这样能够用来连接一个变量到多个图形。)
  也要注意一些属性,像贝塞尔曲线点的位置以及一些能够通过检查器链接的组属性。
  连接指示按钮(Connectionindicatorbutton)
  当设计师连接变量到一些属性后,在检查器中就会出现一个连接指示按钮(这个按钮替代原来属性中的文本字段)。在下面的例子中,已经链接一个变量到一个圆角矩形的角半径属性。
  点击连接指示按钮,就会出现连接指示按钮编辑区域。
  编辑区域允许设计师制定一个偏移值,当通过属性被使用的时候,一个值应该被加到变量的值上面。这些自定义比纳凉的偏移值可以大大减少设计师文档中创建变量的数量。此外,这个连接指示按钮也可以切换属性来使用不同的变量,如果可以的话。
  断开属性的变量链接(Disconnectingavariablefromanattribute)
  点击小紫色圆形中的白色叉,就能够断开属性的变量链接(这个圆形在连接指示按钮中)。
  当断开变量链接,这个连接指示按钮就会消失了,并且返回原有的文字域:
  使用变量控制可见性(Controllingthevisibilityofshapesusingvariables)
  设计师能够使用布尔变量来控制任意图形的可见度。在图形检查器中,在名字文本域下方的一个弹出按钮中。
  默认情况下,全部可见(Visibleonalldisplays)是被勾选的。只在Retina屏幕下可见(VisibleonlyonRetinadisplays)以及在非Retina屏幕下可见(VisibileonlyonnonRetinadisplays)设置也是可见的。
  另外,这个弹出按钮包含了PaintCode所有的布尔变量。
  在上面的例子中,PaintCode文件包含一个叫做isPressed的布尔变量。通过选择按下可见(VisibleifisPressed)选项,当按下变量是真时,PaintCode会确保图形唯一可见。
  在画布上显示变量(Variablesdisplayedincanvas)
  当设计师创建点或者矩形变量,并且在画布中将其与一些图形链接,变量本身也会在画布中显示,显示为紫色。
  在点的情况下,它显示为能被拖动的小目标符号。点变量的值也会发生相应的变化。矩形变量也有类似的设置。
  这个功能非常的有用,例如,当设计师创建一个点变量代表一个鼠标光标的时候。设计师能够基于这个变量(使用表达式),创建许多变量。,并通过移动指针变量,设计师能够轻松的测试产生的行为。
  使用画布显示变量菜单(CanvasShowVariablesmenu),可将这个功能开启或者关闭。
  变量和代码生成(Variablesandcodegeneration)
  通过在画布上绘制方法,变量会转化为参数:
  (void)drawRateButtonWithRadius:(CGFloat)title:(NSString)pressed:(BOOL)
  除非,当然,设计师选择的变量在它的编辑区域中表现为一个局部变量。注意,表达式变量总是局部变量。
  表达式(Expressions)
  PaintCode允许设计师创造另一种特殊变量表达式。这些变量能够使用数学和编程表达式来定义值。它们依赖其他变量,甚至是其他库项目,比如颜色。
  PaintCode中有一些基本的简短的编程语言。这些具有C以及JavaScript的子集,并且方便使用。使用表达式变量,设计师能够创建复杂的、动态的设计,甚至是游戏动画角色。
  当在表达式的部分中显示橙色背景,这意味着这里有一些错误。点击表达式部分的橙色,或者在编辑区域的左下角点击警告三角形来显示错误信息。
  表达式不仅限于数字,还能够运用逻辑运算,比如:?。C语言的三元算子,甚至是创建一个库中的参考颜色。
  重点:对库项目来说这是合法的,就像颜色在其名字中有空白一样。然而,当设计师想再表达式中通过名字指向库项目的时候,设计师必须删除这些空白,大写每个单词首字母,但要小写第一个字母。例如,如果在库中有一个名为MyRedColor的项目,在表达式中,设计师能够这样使用:myRedColor。
  想学习PaintCode的表达式,请阅读下一章节。
  表达式(ExpressionLanguage)
  在PaintCode中,设计师能够通过使用简单语法来定义基于其他变量的变量。这支持很多数学的、逻辑函数和控制符,这是大多数开发人员希望的。语法简单,均为C和JavaScript的子集。
  刚创建了一个语法的新变量,并且在一个语法中使用了文本视图。新变量的值将被计算和自动更新。
  当设计师导出PaintCode文档后,这些变量语法将转化为设计师所选择的编程语言(ObjectiveC,Swift或C)。计算变量、动态关系与定义的变量之间,在导出代码中持续的工作。
  变量类型(Typesofvariables)
  数字(Numbers)
  在PaintCode中所有的数字都是浮点。这种表达式返回数字:
  5:
  5432
  在表达式中,设计师能够方便地参考其他变量。语法中也包含一些设计师能够调用的在建函数:
  (4offset)
  sin(2。7PI180)
  sqrt(height)
  文本(Texts)
  文本变量是没有长度限制的字符串。设计师能够使用双精度或者单精度字符串:
  “Tistext!”
  ‘Tisalsotext,nowusingsinglequotes。’
  可以使用运算符链接文本。使用stringFromNumber(x)方法,能够将数字转换为文本。
  “angle:”stringFromNumber(180)
  设计师可以使用点记法,得到文本的长度(字母的数量)。这会返回数字。
  “Hello”。length
  布尔值(Booleans)
  布尔变量表示逻辑值的真假。也可以用来代表YES,yes,NO,no。
  比较的结果总是返回布尔值。举例:
  true
  32
  “hello”!“world”
  mousePosition。activeRect。
  mousePosition。activeRect。
  mousePosition。activeRect。activeRect。
  mousePosition。activeRect。activeRect。height
  设计师可以使用三元算子:?运算,返回两个值当中的一个,这取决于第一个参数的值。第二个喝第三个参数必须保持享用的类型(在这种情况下,文本):
  isV?“Valid”:“Invalid”
  点(Point)
  使用makePoint(x,y)函数创建新的点:
  makePoint(10,20)
  假设设计师有一个点变量(称为myPosition),想使用表达式中点的x坐标。像这样:
  myPosition。100
  如何计算在A与B两点中间的点:
  makePoint((positionA。positionB。x)2,
  (positionA。positionB。y)2)
  大小(Size)
  与点类似,也包含两个数字,但是代表的是宽和高,主要的目的是表示矩形大小。
  makeSize(10,20)
  假设设计师已经定义了一个变量为defaultSize的大小变量以及数字区域,现在要通过因子区域扩大宽度:
  makeSize(defaultSize。width,defaultSize。height)
  矩形(Rectangle)
  矩形变量包含四个数字:x轴,y轴,宽,高。有一个叫makeRect(x,y,width,height)的函数来创建一个矩形的值。宽度和高度表示矩形的大小,(x,y)表示矩形的起点坐标。
  makeRect(0,0,640,1136)
  假设设计师已经创建了一个叫iPhoneBounds的矩形。设计师不仅可以轻松访问每个单独的值,还能够得到矩形的大小以及起点坐标:
  iphoneBounds。size
  下面两个表达式是等价的:
  iphoneBounds。origin。iphoneBounds。size。width
  iphoneBounds。iphoneBounds。width
  颜色(Color)
  颜色由四位数字表示:红色,绿色,蓝色和alpha通道。每个数字间隔为1。使用makeColor函数创建颜色。下表的表达式将得到一个纯黄色:
  makeColor(1,1,0,1)
  颜色在库中定义,并且能够在表达式中使用(例如,基于是否按下按钮得到两红颜色)。然而,当在表达式中参考颜色(像其他库项目中的渐变和阴影)的时候要注意,它们可以有任意的名称,但是名称的变量是有限制的:
  只允许使用英文字符,数字以及下划线
  只能以消协字母作为变量的开始
  颜色名称可以包含空格,口音以及符号(例如,对话框的背景颜色),但是当在脚本中使用的时候,需要将它们删除(snanitized),例如:
  原有以及删除后的库项目标识符实例:
  渐变(Gradient)
  使用makeGradient(color1,color2)函数创建渐变。由红色到透明的渐变能够这样定义:
  makeGradient(makeColor(1,0,0,1),
  makeColor(1,0,0,0))
  或者,如果设计师已经有了两个颜色,可以这么做:
  makeGradient(solidRedColor,transparentRedColor)
  阴影(Shdow)
  使用makeShadow(color,offsetX,offsetY,blur)函数创建阴影。
  makeShadow(solidRedColor,5,5,3)
  运算符(Operators)
  运算符的优先级:
  常数(Constants)
  布尔常量(Booleanconstants):yes,no,true,false,YES,NO
  数字常量(numericconstant):PI
  颜色常量(colorconstant):MISSINGCOLOR
  渐变常量(gradientconstant):MISSINGGRADIENT
  阴影常量(shadowconstant):MISSINGSHADOW
  图片常量(imageconstant):MISSINGIMAGE
  基本数学函数(BasicMathFunctions)
  floor(x)
  返回x的下方
  ceil(x)
  返回x的上方
  round(x)
  得到x最接近的整数
  frac(x)
  得到x的小数部分
  sqrt(x)
  得到x的平方根
  abs(x)
  得到x的绝对值
  min(x,y)
  得到较小的两个参数
  max(x,y)
  得到较大的两个参数
  侧角函数(GoniometricFunctions)
  sin(a),cos(a),tan(a)
  goniometricfunctions。
  注:参数标有刻度
  atan2(y,x)
  基于这两个值来确定正确的YX象限圆弧切线
  颜色,渐变和阴影(Colors,gradientsandshadows)
  makeColor(r,g,b,a)
  得到颜色坐标以及alpha值。所有参数从0或1开始
  makeGradient(c1,c2)
  得到渐变
  makeShadow(color,xOffset,yOffset,blurRadius)
  得到阴影
  其他函数(OtherFunctions)
  makePoint(x,y)
  得到点
  makeSize(width,height)
  得到大小
  makeRect(x,y,width,height)
  得到举行起点坐标以及大小(宽、高)
  stringFromNumber(x)
  把数字x转化为文本
  PaintCode用户操作指南系列文章
  PaintCode用户操作指南(概述篇)
  PaintCode用户操作指南(库篇)
  PaintCode用户操作指南(绘制篇)
  PaintCode用户操作指南(画布和选项卡)
  PaintCode用户操作指南(样式表和代码生成)
  PaintCode用户操作指南(变量篇)
  PaintCode用户操作指南(动态图形篇)
  PaintCode用户操作指南(符号篇)
  文章已经完结,敬请期待下一部《Sketch3用户操作指南及实战案例全解》
投诉 评论 转载

PaintCode用户操作指南(变量篇)使用变量(UsingVariables)和颜色和渐变一样,变量也是设计师能够在PaintCode文档中使用的一种库项目。变量可以使数字、文本、布尔值(逻辑数值)、点……PaintCode用户操作指南(样式表和代码生成)代码生成(CodeGeneration)当设计师设计的时候,PaintCode会即时生成图像代码。有几个设置影响着代码生成。设计师可以使用中间工具栏中的这些功能,直接生成……PaintCode用户操作指南(画布和选项卡)使用选项卡(WorkingwithTabs)设计师能够使用选项卡管理正在设计的PaintCode文档。每个选项卡包含多个正在设计的画布。第一个选项卡称为样式表,它非……如何做一份让工程师泪流满面的标注?在搬着小板凳坐工程师Buddy旁边送果汁送零食的日子里,我受GoogleMaterialD的启发,折腾出一套自认提高双方沟通效率的标注规则,心情挺……设计之前,花上时间去定义你的设计原则本文出自Facebook的产品设计总监JulieZhou。文中提到设计原则在做设计时有着至关重要的作用,在译者了解到,国内设计师较少提及设计原则,可能跟设计环境和整体设计水平有……数据驱动的界面设计“仪表板”、“大数据”、“数据可视化”、“数据分析”越来越多人和企业,开始运用他们的数据来做一些有趣的事情。在我的职业生涯中,有幸参与一大批数据为重的界面设计,我要在此分享一些……超级“简约”风格的APP登录注册界面今天,给大家分享一些我认为风格比较简约至美的APP登录注册界面,希望可以给设计师们一些创作灵感,其实这样的界面我们可以在网络上搜索的到,但是很少有人专门去做,那我就顺水送人情,……聊聊极简风格的过去与现在(一)扁平化、巨幅背景图片、默认隐藏的全局导航当前盛行的很多设计风格都直接或间接的受到2000年左右开始的极简网页设计运动的影响。向前追溯,这些风格背后的简约哲学则来源于美术及人机交……如何进行有效的交互设计我始终认为交互是产品人必须具备的专业技能,最佳转行做产品经理的职位也是交互设计师。我个人并没有太多的交互经验,但因为最近项目的需要和个人兴趣,对于如何进行有效的交互设计,我在结……全新的导航形式:全屏菜单与其他用户界面细节一样,菜单的设计也在随着当今的潮流改变。一些变化能带来积极的效果,改善用户体验,还有一些却会破坏有利的形象。追随潮流是件棘手的事,尤其是在菜单上。比如,……先从视觉聊产品设计(上)发现身边某些产品小伙伴是不怎么重视视觉设计,今儿又是一个酷酷的周末,敲敲键盘。我们所接受的外界信息有差不多80都来自视觉,而视觉传达对互联网产品的重要性更明显,我们所用到……高品质可穿戴设备的设计原则盖伊比伯(GuyBieber)是思杰公司(Citrix)战略与创新主管。他此前曾担任GeneralDynamics公司WarriorSystems开发项目首席架构师,参与设计了……
互联网医疗产品经理必懂:多维身份验证与角色划分设计沉思录租房业务全流程体验设计外国游客怎么使用支付宝和微信支付?互联网医疗产品经理必懂:住院业务流程如何在作品集中体现交互思维?产品设计方法论:用网络学理解知乎以途牛商旅为例:看B端产品设计实录产品功能折扣码设计,要注意这些问题给用户体验设计师的10条UX建议打造一个不被吐槽的退款系统,看这篇就够了一文了解B端系统筛选控件功能三种简化产品优先级排序的简单方法
读怀念母亲有感五年级作文祖国在我心中作文600字限时上网第二天小红书开放笔记带货,电商业务全面升级孩子英语学习基础差怎么办华为突破重围孟晚舟成为华为轮值董事长,任正非摊牌了污染环境罪是什么时候修改的?致伴我十四载春秋的你们发票多打一个勾,老板多交6万税!查税宝周三见充满活力的校园生活王梦洁全明星赛表现堪忧!倪非凡孟子璇或成新一届中国女排自由人淡淡的记忆

友情链接:中准网聚热点快百科快传网快生活快软网快好知文好找作文动态热点娱乐育儿情感教程科技体育养生教案探索美文旅游财经日志励志范文论文时尚保健游戏护肤业界