首页
学习
活动
专区
圈层
工具
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    基于UE4Unity绘制地图基础元素-线(下篇)

    根据上篇完成一条线的绘制后,为了使线易于观察,通常需要使得线具有描边样式。...实际上,上篇中展示的线已经为了美观都带上了描边,但要让线有描边部分还需要进行额外的绘制。...为了减少顶点数增加并简化三角剖分的计算,通常是在绘制的填充线之下使用描边线宽进行一次同样的扩展绘制,描边线宽构造产生的面更大,使得两个线构成的面叠加展示就可以达到线描边的效果。...,本着能省则省的精神,为了减少顶点数,可以考虑在一组顶点中,根据描边线宽和填充线宽的比例信息,一次性绘制出整个线。...在绘制带描边的线这个场景中,导致闪烁的原因是描边线和填充线的重叠部分世界坐标高度值一致,导致坐标转换后片元深度值一致。

    1.1K42

    Canvas系列(3):路径与状态

    前两章我们学的是基本图形的描边和填充,学完基本图形绘制以后就会绕不过2个概念就是路径和状态,本章我们看看这一块的内容。...对于第一条上一个章节我们已经见识过了,如果不开始一个新的路径那么描边弧线的时候就会有一条上次绘制结束到弧线开始时的连线(当然moveTo可以避免,但需要计算,不方便)。...我们可以看到,当代码执行到红色以后是对的(虽然把坐标系也变成红色了);然后绿色执行后把绿色这条渲染对了,但是又用绿色渲染了一下红色的那条线,使得红色的线变成2者的叠加色了;当绿色的执行完了以后,把最后一条线描边成绿色...现在有需求,需要描边一个45°的扇形,你以你现在的技术完全可以胜任,大笔一挥: context.beginPath(); context.moveTo(150, 75); context.arc(150...如果刚刚在路径所处的直线上,那么需要根据线宽来决定,如果路径内与线中心一侧的时候那么返回false,其他的时候返回true,举个例子比如线宽是1,那么如果在线上,说明是内部;如果线宽是3,那么在内部和前

    70430

    用UE4UE5的ddxddy做描边

    无论是用法线图/深度图或其他的图做后处理描边,本质都是求当前像素和上下左右像素的差值,差值较大的像素就是边缘。...正好虚幻材质里有ddx/ddy这两个节点,可以直接算相邻像素的差值,而且有硬件的Buff加持,所以比自己手动偏移UV再采样贴图要省很多开销,除此外连连看也比传统描边做法简单很多,下面是具体做法。...ddx/ddy 文档上的说明如下: 虚幻引擎工具类材质表达式 | 虚幻引擎5.0文档 (unrealengine.com) ddx是右减左的差值,ddy是下减上的差值。...所以对于上面这张虚幻logo图,左边缘和上边缘是差值为正数的像素,右边缘和下边缘是差值为负数的像素,纯色的区域差值为0,因此分别取绝对值后加一起,不为0的像素就是边缘。 ddx/ddy为什么速度快呢?...内部硬件怎么实现的我也不清楚,查各种资料看到是说因为ps通过SIMD指令一次算完一个quad里的所有像素,其实就是2x2的格子,因为quad内的所有像素都在同一个寄存器内,另外又因为GPU为了计算mips

    1.7K10

    如何用低代码的思路设计文字描边渐变组件

    前言 文字特效设计一直是困扰 Web 前端 Css 世界多年的问题, 比如如何用纯 Css 实现文字描边, 渐变, 阴影等, 由于受限于浏览器兼容性的问题, 我们不得不使用其他替代方案来实现...., 接下来我会从文本特效的 描边 阴影 渐变 这3个纬度来和大家分享一下用前端实现的解决方案, 并提供一种可复用的文本组件设计方案, 让大家更容易的来是使用文字特效....你将收获 文字渐变, 阴影, 描边的3种方案实现 组件设计的一些通用方法和原则 如果在低代码平台中优雅的设计功能强大的文字组件 技术脑洞 正文 先来介绍一下文字描边和阴影的设计方案....文字描边的2种css方案 css3 的 text-stroke 我们可以使用如下样式来实现简单的描边效果: -webkit-text-stroke: 1px #000000; 在w3c上演示的效果如下...这种缩小的接口也被称为角色接口。接口隔离原则(ISP)的目的是系统去耦合,从而容易重构,更改和重新部署。

    25710

    iOS动画系列之八:使用CAShapeLayer绘画动态流量图1. CAShapeLayer2. 实战:绘制一个镂空图层动画3. 使用CAShapeLayer绘画动态流量图

    CAShapeLayer是一个通过矢量图形而不是位图来绘制的图层子类。指定诸如颜色和线宽等属性,用path来定义想要绘制的图形,最后CAShapeLayer就自动渲染出来了。...lineCap 线端点类型 lineDashPattern 线性模版 lineDashPhase 线型模版的起点 lineJoin 线连接类型 lineWidth 线宽 miterLimit 最大斜接长度...strokeColor 描边颜色 strokeStart 描边的起点 strokeEnd 描边的终点 1.3 属性解读 能看到这里,说明您已经不是一个没有任何基础的小白了。...如果斜接长度超过miterLimit的值,边角会以lineJoin的“bevel”即kCALineJoinBevel类型来显示 strokeStart & strokeEnd : 描边的起始点位置。...: 第一段实线长度为5 画完长度为5像素的实线之后,空2像素 空完2像素之后,再画10像素的实线 画完长度为10像素的实线之后,空7像素 然后重复这个数组中的数值,一直不停的绘画。

    1.7K30

    SVG基础知识

    写在前面 之前有提到过SVG描边动画,可以实现很神奇的手写签名动画效果,当然,理论上可以用来实现任意不规则路径填充动画 在支持SVG的场景,可以考虑采用强大的SVG描边动画,能够实现一些incredible...效果,在处理不规则描边、填充动画方面疗效确切 一.兼容性 SVG(Scalable Vector Graphics)是一种基于XML的标记语言,用来描述二维矢量图 基础兼容性(Can I use SVG...,描边颜色等等 实际尺寸精确,占据空间与SVG元素尺寸一致 糟糕情况下,可以用png做平滑fallback 关于SVG icon的更多信息,请查看: Seriously, Don’t Use Icon...Fonts Inline SVG vs Icon Fonts [CAGEMATCH] SVG Fallbacks 2.动画 SVG结合animation能够实现很多神奇的效果: 不规则描边动画(手写签名...,与上例多边形没有任何区别,这里用fill去掉填充色,用stroke添上黑色描边 2.path 通用形状定义,可以用来实现上面提到的所有形状,例如: <path d="M 10 10 L 100 10

    2.1K20

    【Canvas】入门 - 实现图形以及图片绘制

    (200,200) // - 描边绘制 ctx.stroke() Canvas常见api moveTo() :设置绘制起点 ctx.moveTo(x,y); 设置上下文绘制路径的起点...(x,y) 线头点坐标 stroke(): 描边 ctx.stroke(); 根据路径绘制直线(路径只是草稿,真正将直线绘制出来必须执行stroke() ) fill():填充 ctx.fill...(); 填充,是将闭合路径的内容填充成具体的颜色,默认为黑色 如果所有的描点都没有构成封闭结构,也会自动构成一个封闭图形 lineWidth :设置线宽 ctx.lineWidth 设置或返回当前的线条宽度...,沿着起始坐标往上下两边扩展 fillStyle :设置或返回用于填充绘画的颜色 strokeStyle:设置或返回用于描边的颜色 closePath 闭合路径 他会试图从当前的终点连一条路径至起点...快速绘制矩形的方法 rect() 语法 ctx.rect(x,y,width,height) x,y是矩形左上角坐标,width和height都是以像素计 rect方法只是规划了矩形的路径,并没有填充和描边

    1.2K20

    iOS之NSAttributedString-------字符属性

    NSString *const NSStrokeColorAttributeName;(边线颜色) NSString *const NSStrokeWidthAttributeName;(边线宽度...5> NSLigatureAttributeName(连字符) 该属性所对应的值是一个 NSNumber 对象(整数)。连体字符是指某些连在一起的字符,它们采用单个的图元符号。0 表示没有连体字符。...6> NSKernAttributeName(字间距) 该属性所对应的值是一个 NSNumber 对象(整数)。字母紧排指定了用于调整字距的像素点数。字母紧排的效果依赖于字体。...10> NSStrokeWidthAttributeName(边线宽度) 该属性所对应的值是一个 NSNumber 对象(小数)。该值改变描边宽度(相对于字体size 的百分比)。...正数只改变描边宽度。负数同时改变文字的描边和填充宽度。例如,对于常见的空心字,这个值通常为3.0。

    1.2K80

    Bellman-Ford算法--解决负权边的单源最短路径算法

    在http://blog.csdn.net/hacker_zhidian/article/details/54915152这篇博客中,我们用Dijkstra算法单源最短路径,但是Dijkstra...算法对于存在负权边的图就无能为力了,接下来就是Bellman-Ford算法显威的时候了,因为它能解决存在负权边的图中的单源最短路径问题。...Bellman-Ford算法的核心思想是:对图中所有的边进行缩放,每一次缩放更新单源最短路径。 我们依然通过一个例子来看: ? 假设存在这么一个有向图。...既然是对边进行缩放,那么我们就要储存边的信息,这里可以采用一个结构体数组来储存边的信息。...Bellman-Ford算法的时间复杂度为O(M*N),但是我们这里可以对Bellman-Ford算法进行优化:我们每一次缩放的时候如果图中的某条边确实使得源点到其他顶点的最短路径变短,那么下一轮缩放只需要对上一轮缩放的时候使得源点到其他顶点最短路径变短的边的结束点的出边

    1.5K20

    超赞!Figma大波新功能来袭(暗黑模式,字体加粗,新自动布局等功能用起来!)

    单侧描边功能 审阅状态:批准更新,共享上下文设计反馈,并通过分支请求更改(专业版)。...更新的线框图功能:显示画布上的所有内容——从隐藏对象到边界框。...003.重新设计的自动布局功能 重新设计的自动布局让您可以创建具有新布局选项、重新设计的属性面板和画布控件的完全响应式设计。而新的自动布局功能可以让间距为负值,而且现在我们可以使用绝对定位功能了。...004.组件属性 使用组件属性为您的组件添加内置定制并减少变体——创建简化的设计系统和更顺畅的开发人员交接。...007.单侧描边功能 看图,现在描边可以选择上下左右任何一边来进行了。我们也可以自定义每个边的描边数值。这个功能太方便啦。

    3.1K20

    Cadence 16.6 Allegro中如何设置多层板的每一层的单端信号的线宽以保证50Ω阻抗?

    简单地说,先从PCB板厂拿到想要的参数后,输入不同的线宽,试出50Ω阻抗,此时的线宽就是我们需要的。 以下是一个八层板的例子。...当线宽为6mil时,Allegro计算出的单线阻抗为46.245Ω。 下面用Si9000计算相同参数条件下的阻抗值,以对比单线阻抗的差值。...上图中可以看出,当线宽为6mil时,Si9000计算出的单线阻抗为50.28Ω,Allegro和Si9000的计算结果差别不太大。...上图中的几个参数的含义如下: 参数 含义 H1 介质1厚度,上图设置为3.85mil W2 阻抗线的线面宽度,按W2=W1-0.5mil计算,上图设置为5.5mil W1 阻抗线的线底宽度,一般说的线宽就是指...上图中H2的值设定为:ART03层厚度+ART03层上面介质层厚度=1.2mil+4.33mil=5.53mil,可以看出,当线宽W1为5mil时,Si9000计算出的单线阻抗为48.06Ω,Allegro

    1.6K10

    HTML5 Canvas开发详解(基础一)

    3.2 矩形 在Canvas中,矩形分为两种,“描边”矩形和“填充”矩形。...3.2.1 “描边”矩形 cxt.strokeStyle = 属性值;//取值有三种,颜色值、渐变色和图案 cxt.strokeRect(x, y, width, height);//x和y为矩形最左上角的坐标...,即不做任何处理 //Round:圆形线帽,每条线的头和尾都增加一个半圆,半圆的直径为线宽长度 //Square:正方形线帽,每条线的头和尾都增加一个长方形,长方形的长度为线宽的一半,高度保持为线宽高度...,表示允许的最大文本的宽度(单位为px) cxt.fillText(text, x, y, maxWidth); 6.1.2 strokeText()(绘制“描边”文本) //text:一个字符串文本...= '颜色值'; 6.2.5 strokeStyle(定义画笔“描边”路径的颜色) cxt.strokeStyle = '颜色值';

    3.3K20

    ai学习记录

    PS打开PDF的注意事项:打开时选择单页,然后打开页面选项选择剪裁到媒体框。...(小白+Alt键) 路径描边转换为内部填充: 1.选择绘制的路径描边。...2.对象——扩展 路径查找器:Ctrl+shift+F9 1.分割: A.图形与图形:会将相交的区域独立出来;(分割后需解组) B.图形和描边:会沿描边切割图形。...6.减去后方对象: 相减,保留上对象; Ctrl+N 新建 Ctrl+D 重复再制 Ctrl+Z 后退 D 默认描边和填充 Shift+X 调换填充和描边 Ctrl+G 编组 选中要编组的对象...通过画笔库,选择图形后,可直接更改描边。 斑点画笔(shift+B),用于绘制描边颜色 铅笔(N)用于绘制描边 Shaper工具(shift+N):这货是什么原理我也想知道。

    2.7K20
    领券