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

设计师的好帮手,Sketch 设计工具箱

所以,我决定在 Sketch 中制作一系列组件,满足我日常进行记录、标注的需求,并提供一些无需设计师绘制的常用组件,方便随时取用,提高工作效率。...制作过程中,我践行宁缺毋滥的原则,尽可能简化组件结构和使用方式。为了做到这一点,我也利用了新版本 Sketch 中的某些特性,如颜色选集。...在使用组件时,可使用较新的 Sketch 中的颜色选集功能一键更换。其中,orange 是 Sketch 主题色,颜色鲜亮、且在界面设计中出现较少,故而大部分组件默认颜色为 orange。...一般标题采用16号字,medium 字重,black 颜色。由于 Sketch 字体样式功能逻辑奇特,故而组件库未设置字体样式。 布局功能 本组件库大量使用了布局功能。...主要包括组件内的字号、字重等。此功能适用于较新版本的 Sketch,如果需要更高的灵活性,可以将组件解绑使用,或者修改母组件中的覆盖层选项。

78130

【Android 音视频开发打怪升级:OpenGL渲染视频画面篇】五、OpenGL FBO数据缓冲区

之所以说是缓冲索引,是因为FBO并不包含这些缓冲数据,仅仅保存了缓冲数据的索引地址。 FBO和这些缓冲区则通过附着点进行连接。 ? 可以看到FBO中包含了: 1....在2D中,通常只用到了颜色附着,另外两种附着通常在3D渲染中使用。 上面说了,FBO可用于离屏渲染,下面就来看看如何通过FBO将画面渲染到一个“后台”的纹理中。...FBO的流程了: 新建纹理 新建FBO 绑定将纹理附着到FBO的颜色附着点上 【渲染】 解绑FBO 删除FBO 除了第4步以外,其他都是上面的封装好的方法。...“灵魂出窍”着色器 前面做了这么多的铺垫,其实都是为了将一帧固定的视频画面传递到着色器中。真正实现“灵魂出窍”的效果,也是在片元着色器中。...最终得到了文章开头的效果: ? 四、总结 以上就是整个使用FBO的过程,使用也非常的简单。当然了,只关注了颜色附着的部分,另外的深度附着和模板附着有兴趣的可以自行探索学习。

2.8K42
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    iOS 链式语法数据绑定轻量级框架实践

    2)、如何通过响应式编程实现数据绑定? 3)、如何实现自动解绑? 3、分析过程 1)、链式语法 在Objective-C中,我们调用方法一般使用“[]”,简单的调用看起来过得去。...它的特殊在于其本身可以帮助方法进行参数传递,并返回数据,这样我们便可以让方法不断返回实例本身,继续调用实例方法。...3)、实现自动解绑 经过上面的分析,我们基本能实现接口的调用和实际数据绑定。接下来思考下:既然有绑定过程,那么对应的解绑也应该提供,而且最好是自动解绑,不需要外部手动去调用解绑和释放缓存。...我们需要捕获对象释放,现成的方式是利用dealloc方法,但我们的目的是自动解绑,所以不应在绑定的所有外部对象dealloc中调用解绑。...中调用unbindWithTarget:进行解绑和释放缓存的操作。

    1.3K30

    组件库源码中这些写法你掌握了吗?

    通过自增的临时变量 id来标识该 clickoutside 指令 update: 其实本质上就是用来更新初始化我们定义绑定在el的ctx中的值,方便组件更新时做变更 unbind:当需要将指令和元素el...解绑时,通过遍历原先的“元素管理器“ - nodeList 的长度和结合上文提到的id找到 nodeList 中存储的当前解绑元素 el,将它从nodeList中删除 下图是一个bind的结果 ?...同时引入mixin的组件,mixin中的方法和属性也就并入到该组件中,可以直接使用。钩子函数也将会在两个都被调用(Mixin中的钩子会先执行) ❞ ? ?...broadcast ❝ broadcast 方法的作用是向后代子孙组件传值,它会遍历所有的后代组件,当遍历到后代组件中 componentName 与当前的组件名一样,则触发 $emit 事件,以此来传递数据...❞ dispath ❝ dispatch 的作用是向祖先组件传值,它会一直寻找父组件,直到找到组件名和当前传入的组件名一致的祖先组件,就会触发其身上的 $emit 事件,并传递数据 ❞ 下面我们看一个例子

    1.6K40

    组件库源码中这些写法你掌握了吗?

    通过自增的临时变量 id来标识该 clickoutside 指令 update: 其实本质上就是用来更新初始化我们定义绑定在el的ctx中的值,方便组件更新时做变更 unbind:当需要将指令和元素el...解绑时,通过遍历原先的“元素管理器“ - nodeList 的长度和结合上文提到的id找到 nodeList 中存储的当前解绑元素 el,将它从nodeList中删除 下图是一个bind的结果 ❝ ?...同时引入mixin的组件,mixin中的方法和属性也就并入到该组件中,可以直接使用。...❞ broadcast ❝ broadcast 方法的作用是向后代子孙组件传值,它会遍历所有的后代组件,当遍历到后代组件中 componentName 与当前的组件名一样,则触发 $emit 事件,以此来传递数据...❞ dispath ❝ dispatch 的作用是向祖先组件传值,它会一直寻找父组件,直到找到组件名和当前传入的组件名一致的祖先组件,就会触发其身上的 $emit 事件,并传递数据 ❞ 下面我们看一个例子

    1.1K21

    flutter 起步

    中的继承也有和Java不一样的地方:Flutter中的子类可以访问父类中的所有变量和方法,因为Flutter中没有公有、私有的区别上下文对象是整个APP Widget树结构中的Widget话柄,每个Wideget...backgroundColor - 内容的背景颜色,默认使用的是 ThemeData.scaffoldBackgroundColor 的值。...全局变量和静态成员变量,这些变量不会在热刷新时更新。修改了main函数中创建的根控件节点,Flutter在热刷新后只会根据原来的根节点重新创建控件树,不会修改根节点。...Scaffold :Scaffold 实现了基本的 Material Design 布局结构。在 Material 设计中定义的单个界面上的各种布局元素,在 Scaffold 中都支持。...backgroundColor - 内容的背景颜色,默认使用的是 ThemeData.scaffoldBackgroundColor 的值。

    4.5K20

    4.QOpenGLWidget-对三角形进行纹理贴图、纹理叠加

    但是,如果想让图形看起来更真实,我们就必须有足够多的顶点,从而指定足够多的颜色。这将会产生很多额外开销。 所以使用纹理(Texture)。...,等同于opengl中的GL_NEAREST Linear : 线性过滤,将最接近的2*2个颜色,计算出一个插值,速度慢,画面好,等同于opengl中的GL_LINEAR //下面4个多级渐远纹理参数只能用在缩小方式参数...在代码中,我们还保存了上章着色器颜色渲染相关代码,所以我们可以把得到的纹理颜色与顶点颜色混合,来获得更有趣的混合效果,修改fragment源码: FragColor = texture(ourTexture...3.纹理叠加 在上个源码实现中,我们在fragment源码中定义了一个uniform类型的ourTexture变量,但是我们却没有给它赋值就已经实现了纹理,这是因为如果有一个纹理的话,默认是激活的....//offset:第一个数据的偏移量 //tupleSize:一个数据有多少个元素,比如位置为xyz,颜色为rgb,所以是3 //stride:步长,下个数据距离当前数据的之间距离

    1.5K20

    C++之引用

    引用是C++引进的新的特性。在这里总结一下引用的使用问题。在这里所谓的引用是指左值引用(C++11引进了一个右值引用)。 引用是为对象起别名。...引用在定义的时候一般必须初始化(作为形式参数可以不用初始化)。一旦引用初始化就只能和它的初始值绑定在一起,无法解绑。因此不能给引用重新绑定一个对象。...c是无法绑定变量b的,但是n是可以绑定num变量的。...因为引用数组本身是个数组,无法一下子初始化。而引用要求必须初始化。C++想让使用者知道引用是不占据内存的(引用的本质是指针常量,其实占据内存)。而数组引用的本质是一个引用,只不过引用的数组而已。 ?...引用常用来做函数的形参:因为这样不是值传递,从而使的对象作为参数时,不需要调用拷贝构造函数。

    47420

    一看就懂的 OpenGL 基础概念(3):各种 O 之 VBO、EBO、VAO丨音视频基础

    7.1、VBO 和 EBO 在 OpenGL 开发中,用于绘制的顶点数据首先是存储在 CPU 内存中的,比如我们在《RenderDemo(1):用 OpenGL 画一个三角形》中的三角形的 3 个顶点数据...如果我们可以在 GPU 显存中缓存这些顶点数据,就可以大幅减少 CPU 内存到 GPU 显存的数据拷贝的开销,这就是 VBO 和 EBO 出现的原因。...(GL_TRIANGLES, 0, 3); // 使用 glDrawArrays 来绘制 glBindVertexArray(0); // 解绑 VAO 上面的代码相比我们用 VBO 绘制三角形的代码还是复杂一些的...7.3、VBO、EBO 和 VAO 内存布局 上面我们介绍了 VBO、EBO 和 VAO 的使用,大致知道了它们的作用,我们继续来看看使用它们时的内存布局来加深一下印象: 当我们的 Vertex Shader...) in vec3 color; // 颜色变量的属性位置值为 1 out vec3 ourColor; // 向片段着色器输出一个颜色 void main() { gl_Position

    1.2K10

    基于小程序技术栈的微信客户端跨平台实践

    之所以在 LV-CPP 中进行 CSS 属性的转换以及布局计算,目的是为了尽量抹平以后即使使用不同的渲染模块所带来的属性和布局上的差异。最典型的是颜色的转换。...LV-CPP 在 C++ 层计算好布局之后,又如何将这些信息传递给渲染后端 Flutter 的 Dart 环境中呢?要想保障框架的性能,那么我们就必须要去解决两个问题。 a....Q3. js2dart 模块是否支持传递对象和自定义数据,是否考虑开源或者开放出来供大家使用? A3....JS 和 Dart 都有各自的执行机制和对象模型,所以是无法直接的传递对象的,事实上也不需要,但是可以借助于引用或者其他的数据结构来解决对象映射的问题,以及自定义的数据结构也可以在一定的协议之上来完成,...甚至可以基于共享内存的方案来传递大块的数据都没有问题。

    6K102

    【愚公系列】《AIGC辅助软件开发》013-AI辅助客户端编程:AI辅助 iOS 应用开发

    如果你是编程初学者,可以先学习 Swift 的基础语法,如变量、数据类型、控制流、函数等。...#### 4.3 自定义组件与视图- **自定义 View**:学习如何创建可复用的自定义视图组件。- **PreferenceKey**:用于在视图层次结构中传递数据。...列表(List)`List` 是 SwiftUI 中显示一组数据的列表视图,通常与 `ForEach` 一起使用。...在 Swift 中,结构体是一种数据类型,可以包含属性和方法。...`@State`- **功能**:`@State` 是 SwiftUI 中的属性包装器,用于声明可以改变的状态变量。这些变量在视图中使用时,当它们的值发生变化时,视图会自动更新。

    9010

    从零开始学 Web 系列教程

    变量的声明和初始化 命名规则 数据类型 Number String Boolean undefined 和 null 数据类型转换 从零开始学 Web 之 JavaScript(三)函数 函数的定义...封装节点兼容代码 从零开始学 Web 之 DOM(五)元素的创建 元素创建的三种方式 其他操作元素的方法 从零开始学 Web 之 DOM(六)为元素绑定与解绑事件 为元素绑定多个事件 为元素解绑事件...之 jQuery(三)元素操作,链式编程,动画方法 使用 css 操作元素样式 链式编程 使用类样式操作元素样式 动画相关方法 从零开始学 Web 之 jQuery(四)元素的创建添加与删除,自定义属性...基本结构 打印语句 变量的声明和使用 字符串的拼接 PHP 执行原理 数组 函数 预定义变量 从零开始学 Web 之 Ajax(三)Ajax 概述,快速上手 Ajax 概述 Ajax 快速上手 案例:...) 从零开始学 Web 之 Ajax(六)jQuery中的Ajax 从零开始学 Web 之 Ajax(七)跨域 从零开始学 Web 之 HTML5 从零开始学 Web 之 HTML5(一)HTML5概述

    4.8K50

    vue2知识点:组件自定义事件

    update-count就是自定义事件的名字,不要使用驼峰标示,html不区分大小写,会导致子元素无法主动触发父组件的自定义事件。...$off() //解绑所有的自定义事件3.13.4使用自定义事件的容易出错的点案例1:有3个组件,父组件App.vue,2个子组件Student.vue和School.vue,想实现点击子组件按钮把学生名传递给...,父组件App中定义自定义函数传递给子组件,子组件通过&emit触发自定义事件调用,父组件中定义函数接收传递过来的值App.vue包含Vue2知识点、个人总结的使用注意点及碰到的问题总结2.《基础篇第2章:vue2基础》包含Vue2知识点、个人总结的使用注意点及碰到的问题总结3....《基础篇第4章》:使用vue脚手架创建项目5.vue2知识点:数据代理6.vue2知识点:事件处理7.vue2知识点:列表渲染(包含:v-for、key、取值范围、列表过滤、列表排序、vue监视对象或数组的数据改变原理

    11210

    02 HarmonyOS Next仪表盘案例详解(一):基础篇

    项目概述本文将详细分析 HarmonyOS 应用中的仪表盘(Dashboard)示例,该示例展示了一个业务数据概览页面,包含数据卡片和趋势图表区域。...数据结构设计3.1 接口定义案例中定义了DashboardCardItem接口,用于描述仪表盘数据卡片的数据结构:export interface DashboardCardItem { /**...5.2 基础组件使用案例中使用了多种基础 UI 组件:Text:文本显示组件,用于显示标题、数值等Image:图片显示组件,用于显示图标Column:垂直布局容器Flex:弹性布局容器,支持更灵活的布局方式...总结本文介绍了 HarmonyOS 仪表盘示例的基础部分,包括项目概述、技术架构、数据结构设计、生命周期与页面路由以及 UI 布局与组件等内容。...在下一篇文章中,我们将继续探讨响应式设计、数据展示与交互、事件处理机制、性能优化技巧、数据流管理和最佳实践等高级内容。

    4100

    我们为什么不使用CSS框架

    CSS 变量的作用域限定在声明它们的元素上并参与级联。...虽然 CSS 最初被设计用来描述静态数据(标记语言)而不是计算(编程语言),但是,由于需要采用一种经济的方式描述布局的动态变化,使得 CSS 越来越接近于一种常规编程语言,同时保持了其声明性本质。...实现该功能所需的 JavaScript 只包含对一个类的更改。...(--black-20) --sheetTextColor: var (--white) ... } 注意一下,在上述代码中,变量(例如bg-color)如何从其他变量(例如darkPurp)...[……] 以变量为基础,只写你需要的。 对于任何颜色、字体、间距都要使用变量,这样你的整个网站就可以一下子更新或配置。如果所有组件都使用自定义属性,则不必为创建独特的组件而担心。

    44910

    【笔记】《计算机图形学》(17)——使用图形硬件

    在着色器代码中, 我们都可以将这些数据当作一个独立元素来进行操作, 着色器会自动使用SIMD并行交给GPU处理. // 指明此着色器使用的GLSL版本 #version 330 core // layout...// gl_Position是内置的变量 // 一旦我们将数据赋值给gl_Position, 数据就会传递到后面的片元着色器中 // 着色器中也使用xyzw表示法对顶点和向量进行区分 /...将连接在程序对象上的着色器链接起来 glUseProgram 绑定当前GPU需要使用的着色器程序对象 17.9 Vertex Buffer Objects 顶点缓冲对象 为了一次性将大量的顶点数据传递到...; // 这里设置了一个属于顶点着色器的out变量, 用来返回顶点的颜色 // 当名称匹配时, 顶点着色器的out变量会传递到后面片元着色器对应的in变量中 out vec3 vColor; uniform...顶点着色器 首先是对应Blinn-Phong的顶点着色器, 需要好好利用的就是顶点着色器中每个out变量都可以变为后面片元着色器器中对应的in变量.

    1.6K30

    一个 Vue 页面的内存泄露分析

    内存泄露是指new了一块内存,但无法被释放或者被垃圾回收。...); }); 因为这里的事件绑定形成了一个闭包,this/$photoList这两个变量一直没有被释放,this是指向ImageLazyLoader的实例,而$photoList是指向DOM结点,当清除掉上一页的数据的时候...为什么把事件解绑了,就不会有闭包引用了呢?因为JS引擎检测到那个闭包没用了,就把那个闭包销毁了,那么闭包引用的外部变量也自然会被置空。...(4)模块形成的闭包内部变量使用完后没有置成null (5)使用第三方库创建,没有调用正确的销毁函数 并且可以借助Chrome的内存分析工具进行快速排查,本文主要是用到了内存堆快照的基本功能,读者可以尝试分析自己的页面是否存在内存泄漏...也就是说这个方法主要是分析仍然存在引用的游离DOM节点。因为页面的内存泄露通常是和DOM相关的,普通的JS变量由于有垃圾回收所以一般不会有问题,除非使用闭包把变量困住了用完了又没有置空。

    4K30

    Bootstrap实用手册

    容器元素使用相对尺寸(%,auto),尽量不用绝对尺寸(px) (4). 图片使用相对尺寸(%,auto),尽量不用绝对尺寸(px) (5). 页面元素使用流式布局,流式布局特点: ①....栅格布局 好处:效率高,容易控制,实现响应式 不足:没有 栅格布局实际上就是由 div 组成的 table 样式的响应式结构 使用方法: ①....Less 支持变量(Variable),变量就是在 less 中可以变化的数据 ①. 声明变量(变量可以是任意合法的值) 语法: @变量名:值; A....带参数的混合 声明选择器的时候,允许使用参数来表示暂时不确定的数据,最终在调用时,要将具体的数值传递进来 选择器 1(@参数名 1,@参数名 2){ width:@参数名 1;...Less 中提供的功能函数 (1). lighten(@color,20%) 返回一个变亮的颜色值(颜色减淡) (2). darken(@color,30%) 返回一个变暗的颜色(颜色加深) (3)

    6K20

    3.QOpenGLWidget-通过着色器来渲染渐变三角形

    GLSL中包含C等其它语言大部分的默认基础数据类型:int、float、double、uint和bool。...int分量的向量 dvecn 包含n个double分量的向量 大多数时候我们使用vecn,因为float足够满足大多数要求了。...GLSL也允许你对颜色使用rgba,或是对纹理坐标使用stpq访问相同的分量。 向量这一数据类型也允许一些有趣而灵活的分量选择方式,叫做重组(Swizzling)。...使用uniform变量 3.1 Uniform Uniform是一种从CPU中的应用向GPU中的(vertex和fragment)着色器发送数据的方式,但uniform和顶点属性有些不同。...变量值的xyzw分量 3.2 通过uniform设置三角形颜色 接下来,我们在上章的三角形程序片元着色器中添加uniform变量,然后通过外部app来随着时间动态设置三角形颜色.

    1K64

    【Html.js——页面布局】水果摆盘(蓝桥杯真题-1767)【合集】

    在需要修改部分的代码有相关提示,请仔细阅读之后,使用 flex 布局中的 align-self 和 order 完善 index.css 中的代码, 把对应的水果放在对应的盘子里面,最终效果如下...:定义 HTML 文档的根元素,并指定语言为英语。 :包含文档的元数据,如字符集、兼容性设置、视口设置和样式表链接。...在#pond中创建多个青蛙元素,在#background中创建多个荷叶元素,并通过类名区分颜色。...CSS 样式设置: 使用 Flex 布局来排列#pond和#background中的元素,使其均匀分布。 为青蛙和荷叶元素设置相对定位和固定大小,确保它们在容器内有合适的尺寸。...最终效果呈现: 页面加载时,#board容器固定在顶部,#pond和#background中的青蛙和荷叶元素按照设定的布局和样式显示,形成类似水果摆盘的效果。

    5400
    领券