设计师编程指南之Sketch插件开发 8 之Cocoa基础知识

往期文章索引:

1 / 入门基本概念、page的相关操作

2 / artboard 、NSFileManager 和 NSString 关于文件及文件夹的相关操作

3 / DIY一个Sketch插件,生成猫猫狗狗的全家福

4 / NSPasteboard 、text 的操作

5/ Shape 的一些操作,主要介绍 line 及 rect

6/ Shape的curve操作

7/ GUI

Cocoa 提供了自己的数据结构来操作基本的几何信息,如点和矩形。包括如下:

NSPoint、NSSize、NSRect

01

NSPoint 点数据类型由一个 x y 值组成。例如,用点来定义直线,指定矩形的起点,指定弧的角度等等。

2 种方法可以定义 NSPoint

var p1=NSMakePoint(1,2);
log(p1)
var p2=NSPointFromString('{20,30}');
log(p2)

打印出来看下

CGPoint {
    x = 1,
    y = 2
}
CGPoint {
    x = 20,
    y = 30
}

NSPoint 其实就是 CGPoint

02

NSSize 大小数据类型由 width height 组成。例如,指定矩形或椭圆的宽度和高度。

log(NSMakeSize(200,100))
log(NSSizeFromString('{100,2}'))

打印出来是:

CGSize {
    width = 200,
    height = 100
}
CGSize {
    width = 100,
    height = 2
}

03

NSRect 矩形数据类型是由原点和大小组成的复合结构。该 size 字段指定相对于原点的矩形高度和宽度。

var rect=NSMakeRect(0,0,12,12);
log(rect)

var rect2=NSRectFromString('{20,10,330,90}');
log(rect2)

结果:

CGRect {
    origin = CGPoint {
        x = 0,
        y = 0
    },
    size = CGSize {
        width = 12,
        height = 12
    }
}
CGRect {
    origin = CGPoint {
        x = 20,
        y = 10
    },
    size = CGSize {
        width = 330,
        height = 90
    }
}

NSRect 有几个方法蛮有用的:

NSContainsRect 判断一个 NSRect 是否包含另一个 NSRect

var rect=NSMakeRect(30,30,12,12);

var rect2=NSRectFromString('{20,10,330,90}');

log(NSContainsRect(rect2,rect))

NSIntegralRect 取整 NSRect

var rect=NSMakeRect(30,30.2,12.12,12.89);
log(NSIntegralRect(rect))

NSIntersectionRect2 NSRect 的交集

var rect=NSMakeRect(10,30,103,25);
log(rect)

var rect2=NSRectFromString('{20,10,330,90}');
log(rect2)
log(NSIntersectionRect(rect2,rect))

如下图所示:

NSOffsetRect 偏移 NSRect ,有兴趣自己做下实验。

04

路径

NSBezierPath

创建复杂形状,在 Cocoa 中是唯一可用的方法。这一部分主要有 moveToPoint 、lineToPoint 、curveToPoint controlPoint1 controlPoint2 ( 贝塞尔三次曲线 ) 、 closePath 。详细的使用可以参看往期指南:

Shape 的一些操作,主要介绍 line 及 rect

Shape的curve操作

更多可以查看:

https://developer.apple.com/library/content/documentation/Cocoa/Conceptual/CocoaDrawingGuide/Introduction/Introduction.html

原文发布于微信公众号 - 科技Mix设计Lab(Design-AI-Lab)

原文发表时间:2018-03-02

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏ascii0x03的安全笔记

【C】用C语言提取bmp图片像素,并进行K-means聚类分析——容易遇到的问题

关于bmp图片的格式,网上有很多文章,具体可以参考百度百科,也有例子程序。这里只提要注意的问题。 (1)结构体定义问题:首先按照百度百科介绍的定义了结构体,但是...

6586
来自专栏图形学与OpenGL

机械版CG 实验4 裁剪

了解二维图形裁剪的原理(点的裁剪、直线的裁剪、多边形的裁剪),利用VC+OpenGL实现直线的裁剪算法。

1771
来自专栏Java帮帮-微信公众号-技术文章全总结

【Java案例】余弦函数

案例描述 在屏幕上画出余弦函数cos(x)曲线,如图1.6所示。 ? 图1.6 余弦函数cos(x)曲线 案例分析 连续的曲线是由点组成的,点与点之间距离比较...

4896
来自专栏数据结构与算法

ABC108C - Triangular Relationship(打表)

给出$n, k$,求出满足$a+b, b + c, c + a$都是$k$的倍数的三元组$a, b, c$的个数,$1 \leqslant a, b, c \l...

1141
来自专栏潇涧技术专栏

When Math meets Android Animation (3)

当数学遇上动画:讲述ValueAnimator、TypeEvaluator和TimeInterpolator之间的恩恩怨怨(3)

922
来自专栏落影的专栏

Metal入门教程总结

本文介绍Metal和Metal Shader Language,以及Metal和OpenGL ES的差异性,也是实现入门教程的心得总结。

9836
来自专栏逍遥剑客的游戏开发

Nebula3绘制2D纹理

1606
来自专栏hbbliyong

使用WPF教你一步一步实现连连看(三)

这次首先对以前的结构进行了调整: 第一步:把MyButton按钮的属性独立成一个类,放在一个单独的MyButton.cs中,把图片的初始化也放到里面。 调整代...

3527
来自专栏ml

HDUOJ-------- Fibonacci again and again

   Fibonacci again and again Time Limit : 1000/1000ms (Java/Other)   Memory Limi...

35311
来自专栏从流域到海域

Python 切片(Slice)

在实际开发中,经常遇到下面的需求:在线性表(数组)中提取若干个元素的操作,提取规则有很多,比如说提取前5个、提取后5个、提取奇数/偶数位元素等等。 ...

22710

扫码关注云+社区

领取腾讯云代金券