Paths中的几个重要元素

Paths中的几个重要元素

Points

void
CGContextMoveToPoint (

CGContextRef c,

CGFloat x,

CGFloat y

);

指定一个点成为current point

Quartz会跟踪current point一般执行完一个相关函数后,current
point都会相应的改变.

Lines

相关的几个函数

void
CGContextAddLineToPoint (

CGContextRef c,

CGFloat x,

CGFloat y

);

创建一条直线,从current point到
(x,y)

然后current point会变成(x,y)

void
CGContextAddLines (

CGContextRef c,

const CGPoint points[],

size_t count

);

创建多条直线,比如points有两个点,那么会画两条直线
从current point到
(x1,y1),

然后是(x1,y1)到(x2,y2)

然后current point会变成points中的最后一个点

Arcs

两种方法创建弧度
第一种

void
CGContextAddArc (

CGContextRef c,

CGFloat x,            
//圆心的x坐标

CGFloat y,   
//圆心的x坐标

CGFloat radius,  
//圆的半径

CGFloat startAngle,   
//开始弧度

CGFloat endAngle,  
//结束弧度

int clockwise         
//0表示顺时针,1表示逆时针

);

假如想创建一个完整的圆圈,那么
开始弧度就是0
结束弧度是
2pi,
因为圆周长是
2*pi*r.

最后,函数执行完后,current point就被重置为(x,y).

还有一点要注意的是,假如当前path已经存在一个subpath,那么这个函数执行的另外一个效果是

会有一条直线,从current point到弧的起点

第二种

void
CGContextAddArcToPoint (

CGContextRef c,

CGFloat x1, 
//端点1的x坐标

CGFloat y1, 
//端点1的y坐标

CGFloat x2, 
//端点2的x坐标

CGFloat y2, 
//端点2的y坐标

CGFloat radius
//半径

);

原理:首先画两条线,这两条线分别是
current point to (x1,y1)
和(x1,y1) to (x2,y2).

这样就是出现一个以(x1,y1)为顶点的两条射线,

然后定义半径长度,这个半径是垂直于两条射线的,这样就能决定一个圆了,更好的理解看下图,不过个人认为下图所标的
tangent point
1的位置是错误的。

最后,函数执行完后,current point就被重置为(x2,y2).

还有一点要注意的是,假如当前path已经存在一个subpath,那么这个函数执行的另外一个效果是

会有一条直线,从current point到(x1,y1)

Curves

画曲线,一般是一条直线,然后定义几个控制点,使直线变弯曲。

三次曲线函数

void
CGContextAddCurveToPoint (

CGContextRef c,

CGFloat cp1x,
//控制点1 x坐标

CGFloat cp1y,
//控制点1 y坐标

CGFloat cp2x,
//控制点2 x坐标

CGFloat cp2y,
//控制点2 y坐标

CGFloat x, 
//直线的终点
x坐标

CGFloat y 
//直线的终点
y坐标

);

假如第二个控制点(cp2x,cp2y)比(cp1x,cp1y)
更接近current point,那么会形成一个封闭的曲线

二次曲线函数

void
CGContextAddQuadCurveToPoint (

CGContextRef c,

CGFloat cpx, 
//控制点
x坐标

CGFloat cpy, 
//控制点
y坐标

CGFloat x, 
//直线的终点
x坐标

CGFloat y 
//直线的终点
y坐标

);

执行完函数貌似current point不会变化,没有具体测试过

Ellipses

void
CGContextAddEllipseInRect (

CGContextRef context,

CGRect rect 
//一矩形

);

如果矩形是一个正方形,那么画出来就是一个圆

执行完函数貌似current point不会变化,没有具体测试过

Rectangles

void
CGContextAddRect (

CGContextRef c,

CGRect rect

);

一次性画出多个矩形

void
CGContextAddRects (

CGContextRef c,

const CGRect rects[],

size_t count

);

需要注意的是,画矩形有一些特别,current point没有发生变化

Creating a Path

调用函数
CGContextBeginPath 开始创建路径,线调用函数CGContextMoveToPoint设置起点

然后开始画自己想画的路径,注意一下几点:

1.Lines, arcs, and curves,是从current
point开始的

2.假如想封闭一条路径,那么调用函数
CGContextClosePath
把当前点和起点连接起来

3.当在画
arcs的时候,Quartz会画一条线从current
point 到
starting point

4.画矩形的时候不会有第三条那这样的的一条直线

5.创建完路径后,必须调用
painting
函数  fill or stroke the path,不然不会画上面东东在相应的设备上】

6.开始创建一个新的路径的时候,使用函数
CGContextBeginPath。

重复利用路径的相关函数和数据类型

CGPathCreateMutable 类似于
CGContextBeginPath

CGPathMoveToPoint 类似于
CGContextMoveToPoint

CGPathAddLineToPoint
类似于 CGContextAddLineToPoint

CGPathAddCurveToPoint
类似于 CGContextAddCurveToPoint

CGPathAddEllipseInRect
类似于 CGContextAddEllipseInRect

CGPathAddArc 类似于
CGContextAddArc

CGPathAddRect 类似于
CGContextAddRect

CGPathCloseSubpath 类似于
CGContextClosePath

CGPathRef

CGMutablePathRef

用CGContextAddPath函数把一个路径添加到graphics
context中

void
CGContextAddPath (

CGContextRef context,

CGPathRef path

);

Painting a Path

Stroking :画出路径

Filling :填充路径的封闭区域

影响Stroking的参数

Line width

void
CGContextSetLineWidth (

CGContextRef c,

CGFloat width

);

Line join:线转弯的时候的样式,比如圆滑的方式

void
CGContextSetLineJoin (

CGContextRef c,

CGLineJoin join

);

Line cap:线的两端的样式,比如两端变的圆滑

void
CGContextSetLineCap (

CGContextRef c,

CGLineCap cap

);

Miter limit:当Line join的模式是Miter
join的时候,这个参数会有影响

void
CGContextSetMiterLimit (

CGContextRef c,

CGFloat limit

);

Line dash pattern:虚线相关

void
CGContextSetLineDash (

CGContextRef c,

CGFloat phase,

const CGFloat lengths[],

size_t count

);

Stroke color space

void
CGContextSetStrokeColorSpace (

CGContextRef c,

CGColorSpaceRef colorspace

);

Stroke color

void
CGContextSetStrokeColor (

CGContextRef c,

const
CGFloat components[]

);

void
CGContextSetStrokeColorWithColor (

CGContextRef c,

CGColorRef color

);

Stroke pattern(和透明度相关)

void
CGContextSetStrokePattern (

CGContextRef c,

CGPatternRef pattern,

const CGFloat components[]

);

Stroking的相关函数

Strokes当前path.

void
CGContextStrokePath (

CGContextRef c

);

Strokes 指定的
矩形.

void
CGContextStrokeRect (

CGContextRef c,

CGRect rect

);

Strokes 指定的
矩形,
使用指定的宽度.

void
CGContextStrokeRectWithWidth (

CGContextRef c,

CGRect rect,

CGFloat width

);

Strokes 指定的椭圆.

void
CGContextStrokeEllipseInRect (

CGContextRef context,

CGRect rect

);

Strokes 一些直线.

void
CGContextStrokeLineSegments (

CGContextRef c,

const CGPoint points[],

size_t count

);

决定是Stroking
还是Filling

void
CGContextDrawPath (

CGContextRef c,

CGPathDrawingMode
mode

);

Filling a Path

填充一个路径的时候,路径里面的子路径都是独立填充的。

假如是重叠的路径,决定一个点是否被填充,有两种规则

1,nonzero winding number rule:非零绕数规则,假如一个点被从左到右跨过,计数器+1,从右到左跨过,计数器-1,最后,如果结果是0,那么不填充,如果是非零,那么填充。

2,even-odd rule:
奇偶规则,假如一个点被跨过,那么+1,最后是奇数,那么要被填充,偶数则不填充,和方向没有关系。

时间: 2024-07-30 03:26:44

Paths中的几个重要元素的相关文章

java中TreeSet集合如何实现元素的判重

1 /* 2 看一下部分的TreeSet源码.... 3 public class TreeSet<E> extends AbstractSet<E> 4 implements NavigableSet<E>, Cloneable, java.io.Serializable 5 { 6 private transient NavigableMap<E,Object> m; 7 //NavigableMap继承SortedMap, 二者都是接口,在TreeMa

【前端小小白的学习之路】----&gt;用JS编写一个函数,返回数组中重复出现过的元素

用JS编写一个函数,返回数组中重复出现过的元素,见下面的代码: var arr = [1, 2, 3, 1, 2, 3, 4, 5]; var getRepeat = function (arr) { var obj = {}; for (var i = 0, len = arr.length; i < len; i++) { if (obj[arr[i]] == undefined) { obj[arr[i]] = 1; } else { obj[arr[i]]++; } } for (var

AngularJs中,如何在父元素中调用子元素为自定义Directive中定义的函数?

最近一段时间准备使用AngularJs中的自定义Directive重构一下代码. 在这里说明一下,把自定义控件封装成Directive并不一定是要复用,而是要让代码结构更加清晰.就好像你将一个长方法拆分成多个独立的小方法,也未必要复用它们一样.职责独立等一票好处,会让后期维护更加轻松. 在重构的过程中,我遇到了这样一个问题,先上图: 图一: 这就是我要重构的界面,由于之前时间紧,将这三个Filter和两个button都写在了一个页面中.当时我已经预感到,如果将这里面的状态都写到一个scope上,

CSS中伪类及伪元素用法详解

原文:CSS中伪类及伪元素用法详解 伪类的分类及作用: 注:该表引自W3School教程 伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的读者可以自己尝试: :active  大致效果为用鼠标点击时,元素增加特效,鼠标松开时,特效消失.多用在按钮的点击上. 写法: 这里id为box的是一div块,在css中首先设置了他的基本样式,下面为加入:active伪类后需要修改的样式. 未点击时: 点击之后: :active.:hover.:

《数据结构、算法与应用》8.(顺序查找数组中第一个出现指定元素的位置)

最近在读<数据结构.算法与应用>这本书,把书上的习题总结一下,用自己的方法来实现了这些题,可能在效率,编码等方面存在着很多的问题,也可能是错误的实现,如果大家在看这本书的时候有更优更好的方法来实现,还请大家多多留言交流多多指正,谢谢 8. 从左至右检查数组a[0:n-1]中的元素,以查找雨x相等的那些元素.如果找到一个元素与x相等,则函数返回x第一次出现所在的位置.如果在数组中没有找到这样的元素,函数则返回-1. // // main.cpp // Test_08 // // Created

javascript中通过className灵活查找元素 例如我们要把根据class来进行修改样式

原文:javascript中通过className灵活查找元素 例如我们要把根据class来进行修改样式 一.背景:一个表单中,要修改一些li中有class=box的样式,将它的background设置为red红色.一般的做法是我们可以先找到父级元素 ,然后由父级元素找到所有相关tagName,最后,来一个if判断,如果class属性为box,则修改之 var oUl = document.getElementById("ul1");                          

python之Counter类:计算序列中出现次数最多的元素

Counter类:计算序列中出现次数最多的元素 1 from collections import Counter 2 3 c = Counter('abcdefaddffccef') 4 print('完整的Counter对象:', c) 5 6 a_times = c['a'] 7 print('元素a出现的次数:', a_times) 8 9 c_most = c.most_common(3) 10 print('出现次数最多的三个元素:', c_most) 11 12 times_dic

本程序找出字符串数组 String[] arr = {“welcome”, “china”, “hi”, “congratulation”, “great”} 中的长度最大的元素,并打印输出。

/** * Homework14 * * @Description:本程序找出字符串数组 String[] arr = {"welcome", "china", "hi", * "congratulation", "great"} 中的长度最大的元素,并打印输出. * StringDemo01 * * @author  * * email: [email protected] 2017年4月18日下午6:3

[ jquery 过滤器 parent(expr) ] 此方法用于在选择器的基础之上搜索被选元素中符合表达式的父元素

此方法用于在选择器的基础之上搜索被选元素中符合表达式的父元素 取得一个包含着所有匹配元素的唯一父元素的元素集合,你可以使用可选的表达式来筛选: 实例: <html lang='zh-cn'> <head> <title>Insert you title</title> <meta http-equiv='description' content='this is my page'> <meta http-equiv='keywords' c