Sketch 54 新增功能

发布日期：2019 年 4 月 9 日 - 阅读发布说明

更改

colors 和 gradients 属性已添加到 Document 和 globalAssets

GitHub 拉取请求 #345 和 #398

  • sketch.globalAssets 属性已添加
  • 添加了两种新的资产类型
    • ColorAsset
      • name，类型：String（可以为 null）
      • color，类型：String
    • GradientAsset
      • name，类型：String（可以为 null）
      • gradient，类型：Gradient

用法

var sketch = require('sketch')
var colors = sketch.globalAssets.colors
// [ { type: 'ColorAsset', name: null, color: "#febe10ff", ... }]

设置全局颜色（在使用此功能之前，请确保保存全局资产的副本！）

var globalAssets = sketch.globalAssets
globalAssets.colors = ['#FFFFFF']

// You can set a global color with a variety of objects
// - A native MSColorAsset
// - An MSColor
// - An MSImmutableColor
// - An NSColor
// - A hex color string

// To include a name with one of the color objects use a dictionary with `color` and `name`.
globalAssets.colors = [{ name: 'white', color: '#FFFFFF' }]

请注意，这不起作用

var globalColors = sketch.globalAssets.colors
globalColors = ['#FFFFFF']

// when you reassign globalColors, it doesn't reference the global colors anymore
// But you can do globalColors.push(...) which mutates the array.
其他有用的操作
// Appending/Pushing a Global Color
gloablAssets.colors = []
globalAssets.colors.push('#000000')

// globalAssets.colors returns
// [ { type: 'ColorAsset', name: null, color: '#000000ff' } ]

// Removing a Color
globalAssets.colors = [{ name: 'white', color: '#FFFFFF' }, '#000000']
globalAssets.colors.splice(1, 1)

// globalAssets.colors returns
// [ { type: 'ColorAsset', name: 'white', color: '#ffffffff' } ]
渐变类似
var sketch = require('sketch')
var globalGradients = sketch.globalAssets.gradients

// [ { type: 'GradientAsset',
//  name: null,
//  gradient:
//   { gradientType: 'Linear',
//     from: [Object],
//     to: [Object],
//     aspectRatio: 1,
//     stops: [Array] } },
// ...
// ]
设置全局渐变
var sketch = require('sketch')
var Style = require('sketch/dom').Style
var globalAssets = sketch.globalAssets

const myGradient = {
  gradientType: Style.GradientType.Linear,
  from: { x: 0.5, y: 0 },
  to: { x: 0.5, y: 1 },
  stops: [
    { position: 0, color: '#c0ffee' },
    { position: 0.5, color: '#0ff1ce' },
    { position: 1, color: '#bada55' },
  ],
}

globalAssets.gradients = [
  {
    name: 'My Gradient',
    gradient: myGradient,
  },
]

// You can set a global gradient with a variety of objects
// - A native MSGradientAsset
// - An MSGradient
// - An dictionary of Gradient properties.

类似地，可以在 Document 上找到所有文档颜色和文档渐变

var sketch = require('sketch')
var selectedDocument = sketch.getSelectedDocument()

let documentColors = selectedDocument.colors
let documentGradients = selectedDocument.gradients

共享样式现在是 document 属性，可以进行修改

GitHub 拉取请求

在 document 上添加了两个新属性（尽量不要混淆它们，因为样式略有不同！）

  • sharedLayerStyles
  • sharedTextStyles

用法

var sketch = require('sketch')
var selectedDocument = sketch.getSelectedDocument()

selectedDocument.sharedLayerStyles
// [ { type: 'SharedStyle',
//  id: '9CA2825D-DFE9-4A49-A3AB-1EBCA431DED9',
//  styleType: 'Style',
//  name: 'layer style example',
//  style:
//   { type: 'Style',
//     id: 'EE3D0AA4-83C4-4049-BF91-43392DD4D4C9',
//     opacity: 1,
//  ...

selectedDocument.sharedTextStyles
// [ { type: 'SharedStyle',
//  id: 'C6F284FF-8D18-4B4B-AF08-1A9055C03B1E',
//  styleType: 'Style',
//  name: 'text style example',
//  style:
//   { type: 'Style',
//     id: '25A3B94C-9872-4057-8F2B-97BAE4AA0E63',
//     opacity: 1,
//  ...
设置共享样式
var sketch = require('sketch')
var selectedDocument = sketch.getSelectedDocument()

// Setting a shared layer style
selectedDocument.sharedLayerStyles = [] // remove all layer styles

selectedDocument.sharedLayerStyles.push({
  name: 'Layer Style 1',
  style: { fills: ['#000'] },
})

// Setting a shared text style
var Text = require('sketch/dom').Text

var text = new Text({
  text: 'my text',
  style: { alignment: Text.Alignment.center },
})

selectedDocument.sharedTextStyles = [] // remove all text styles

selectedDocument.sharedTextStyles.push({
  name: 'Style 1',
  style: text.style,
})

layer.index 现在可以设置

GitHub 拉取请求

您可以设置图层的索引以在层级结构中移动它。请注意，您还有 layer.moveToFront()、layer.moveForward()、layer.moveToBack() 和 layer.moveBackward()

用法

var sketch = require('sketch')
var Group = sketch.Group
var page = sketch.getSelectedDocument().selectedPage

const group1 = new Group({
  parent: page,
})
const group2 = new Group({
  parent: page,
})
const group3 = new Group({
  parent: page,
})

console.log(group1.index, group2.index, group3.index)
// 0 1 2

group1.index = 2
console.log(group1.index, group2.index, group3.index)
// 2 0 1

aspectRatio 属性已添加到 Gradient

GitHub 拉取请求

当渐变为 Radial 时，from 和 to 点构成渐变椭圆的一个轴，而纵横比决定正交轴的长度（aspectRatio === 1 表示它是圆形）。

用法

var sketch = require('sketch')
var ShapePath = sketch.ShapePath
var Rectangle = sketch.Rectangle
var Style = sketch.Style
var document = sketch.getSelectedDocument()
var page = document.selectedPage

page.layers = []

const myGradient = {
  gradientType: Style.GradientType.Radial,
  from: { x: 0.5, y: 0 },
  to: { x: 0.5, y: 1 },
  aspectRatio: 0.2,
  stops: [
    { position: 0, color: '#c0ffee' },
    { position: 0.5, color: '#0ff1ce' },
    { position: 1, color: '#bada55' },
  ],
}

let myShape = new ShapePath({
  name: 'my shape',
  frame: new Rectangle(0, 0, 100, 100),
  parent: page,
  style: {
    fills: [
      {
        fill: Style.FillType.Gradient,
        gradient: myGradient,
      },
    ],
  },
})

selected 属性和 getFrame 方法已添加到 Symbol 覆盖中

GitHub 拉取请求

覆盖的框架可能与受影响图层的框架不同，因为 Symbol 实例可能已被缩放，或者，在以下示例中，Symbol 实例的文本值发生更改，导致框架变短。

用法

var sketch = require('sketch')
var ShapePath = sketch.ShapePath
var Rectangle = sketch.Rectangle
var Style = sketch.Style
var Text = sketch.Text
var SymbolMaster = sketch.SymbolMaster
var document = sketch.getSelectedDocument()
var page = document.selectedPage

page.layers = []

let rectangle = new ShapePath({
  name: 'my shape',
  frame: new Rectangle(0, 0, 100, 100),
  style: {
    fills: [
      {
        fill: Style.FillType.Color,
        color: '#000',
      },
    ],
  },
})

let text = new Text({
  text: 'my text',
  style: {
    textColor: '#FFFFFF',
    alignment: 'left',
  },
  frame: new Rectangle(0, 0, 0, 0),
})

text.adjustToFit()

var symbol = new SymbolMaster({
  name: 'my symbol',
  layers: [rectangle, text],
  parent: page,
})

let symbolInstance = symbol.createNewInstance()
symbolInstance.parent = page
symbolInstance.frame.offset(110, 0)
symbolInstance.overrides[0].value = 'hi'

symbolInstance.overrides[0].selected = true
symbolInstance.overrides[0].getFrame().width

layer.duplicate 现在适用于没有父级的图层

GitHub 拉取请求

以前，您需要拥有一个父级才能复制图层。现在，您可以随意进行操作，无需绕过此问题。

用法

var sketch = require('sketch')
var ShapePath = sketch.ShapePath
var Rectangle = sketch.Rectangle
var Style = sketch.Style
var document = sketch.getSelectedDocument()
var page = document.selectedPage

page.layers = []

let rectangle = new ShapePath({
  name: 'my shape',
  frame: new Rectangle(0, 0, 100, 100),
  style: {
    fills: [
      {
        fill: Style.FillType.Color,
        color: '#000',
      },
    ],
  },
})

let rectangle2 = rectangle.duplicate()
rectangle2.frame.offset(110, 0)

rectangle.parent = page
rectangle2.parent = page

symbolInstance.master 现在适用于不可变实例

GitHub 拉取请求

如果您以前获得过 MSImmutableSymbolInstance 对象，并尝试包装本机 Sketch 对象，则以前会收到错误。现在已修复。

现在，您可以通过将图层的 flow 设置为 undefined 来删除流程目标

GitHub 拉取请求

以前，您无法删除流程目标。现在可以了！

用法

var sketch = require('sketch')
var Artboard = require('sketch').Artboard
var Group = require('sketch').Group
var Rectangle = require('sketch').Rectangle
var selectedDocument = sketch.getSelectedDocument()

const artboard = new Artboard({
  name: 'Test1',
  frame: new Rectangle(0, 0, 100, 100),
  parent: selectedDocument.selectedPage,
})
const artboard2 = new Artboard({
  name: 'Test2',
  frame: new Rectangle(200, 0, 100, 100),
  parent: selectedDocument.selectedPage,
})

const rect = new Group({
  parent: artboard,
  frame: new Rectangle(0, 0, 50, 50),
  flow: {
    targetId: artboard2.id,
  },
})

rect.flow = undefined

pattern 属性已添加到 Fill

GitHub 拉取请求

以前，这也适用于 noise 属性，但 Sketch 已弃用噪声填充选项，而是改为使用噪声模式作为图像填充。

用法

var sketch = require('sketch')
var Style = sketch.Style
var ShapePath = sketch.ShapePath
var Rectangle = sketch.Rectangle
var document = sketch.getSelectedDocument()
var page = document.selectedPage

page.layers = []

const base64Image = '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'

let rectangle = new ShapePath({
  name: "my shape",
  frame: new Rectangle(0,0,100,100),
  style: {
    fills: [{
      fill: 'Pattern',
      pattern: {
        patternType: Style.PatternFillType.Tile,
        image: {
          base64: base64Image
        },
        tileScale: 1.2
      }
    }]
  },
  parent: page
})

// Image can also be of the form
{ type: 'ImageData', nsimage: NSImage, nsdata: NSImageData }

现在，可以使用 ImageData 使用图像缓冲区

GitHub 拉取请求

此更改有助于下一个更改（如果 output 为 false，则 Export 现在返回缓冲区）

如果 options.output 为 false 且 options.formats 为图像格式，则 export 现在返回一个缓冲区

GitHub 拉取请求

如果您想在标记为导出时获取缩略图预览图像数据，可以使用此新的 API 功能。

Sketch's image export thumbnail highlighted

有关添加此功能的原因，请参阅 此问题。

Sketch 导出选项的快速摘要

该方法返回

  • undefined 如果 options.output 为 undefined 或字符串
  • 如果 objectToExport 为数组且 options.formats 为图像格式，则返回 Buffer 数组
  • 如果 objectToExport 为数组且 options.formats 为 json，则返回 Object 数组
  • 如果 objectToExport 为单个项目且 options.formats 为图像格式，则返回 Buffer
  • 如果 objectToExport 为单个项目且 options.formats 为 json，则返回 Object

用法

var sketch = require('sketch')
var ShapePath = sketch.ShapePath
var Rectangle = sketch.Rectangle
var Style = sketch.Style
var document = sketch.getSelectedDocument()
var page = document.selectedPage

page.layers = []

let rectangle = new ShapePath({
  name: 'my shape',
  frame: new Rectangle(0, 0, 100, 100),
  style: {
    fills: [
      {
        fill: Style.FillType.Color,
        color: '#000',
      },
    ],
  },
  parent: page,
})

const options = { formats: 'png', output: false }
const buffer = sketch.export(rectangle, options)

getSelectedDocument 将更努力地查找您的文档

GitHub 拉取请求

如果您使用的是 SKPM，则 SKPM 将 context 定义为全局变量，因此它将优先使用该变量。如果没有当前文档（通过 NSDocumentController.sharedDocumentController().currentDocument()），则 Sketch 将尝试使用 NSApplication.sharedApplication().orderedDocuments()。最终，您无需过多了解这些底层更改，但了解 .getSelectedDocument() 应该可靠地工作非常有用。如果它不起作用，请务必提交问题。

console.clear 现在将清除 DevTools 控制台

使用 console.clear() 清理您的控制台。

selectedPage 和 selectedLayers 现在可以在 Document 上设置

GitHub 拉取请求

以前，这些是只读属性。但是，现在您可以将图层或页面传递给这些对象以设置它们。

用法

var sketch = require('sketch')
var ShapePath = sketch.ShapePath
var Rectangle = sketch.Rectangle
var Style = sketch.Style
var document = sketch.getSelectedDocument()
var page = document.selectedPage

// Setting selectedLayers
let rectangle = new ShapePath({
  name: 'my shape',
  frame: new Rectangle(0, 0, 100, 100),
  style: {
    fills: [
      {
        fill: Style.FillType.Color,
        color: '#000',
      },
    ],
  },
  parent: page,
})

let rectangle2 = rectangle.duplicate()
rectangle2.frame.offset(110, 0)

document.selectedLayers.layers = [rectangle]
// Note: you can also do
// rectangle.selected = true
// however it will just add the rectangle to the selection rather than replacing it

// Setting selectedPage
let newPage = new Page({
  name: 'Second Page',
  parent: document,
})

document.selectedPage = newPage
// Note: selectedPage isn't an array like selectedLayers
// Note2: You can also do newPage.selected = true

添加一些方法来处理 Symbols 页面

GitHub 拉取请求

“Symbols” 页面与其他页面类似。唯一不同的是，在创建 Symbol 时，Sketch 会询问用户是否要将其移动到该页面。您可以将 Symbols 放置在任何页面中，但如果您想尊重 Sketch 实施的约定，这里有一些方法可以帮助您。

在 Page 上添加了一些方法

  • getSymbolsPage(document)
    • 返回一个 Page，如果还没有 Symbols 页面，则返回 undefined
  • createSymbolsPage()
  • isSymbolsPage()
    • 返回一个 boolean

用法

var sketch = require('sketch')
var Page = sketch.Page
var document = sketch.getSelectedDocument()

var symbolsPage = Page.getSymbolsPage(document)
// undefined

var symbolsPage = Page.createSymbolsPage()
symbolsPage.parent = document
symbolsPage.selected = true

var isSymbolsPage = selectedPage.isSymbolsPage()
// true

请注意，.createSymbolsPage() 不会阻止您创建多个标题为“Symbols”的页面。

如果您有多个标题为“Symbols”的页面，我相信 .isSymbolsPage() 仅对标题为“Symbols”且最早创建的页面为 true。在幕后，API 使用

page.sketchObject.documentData().symbolsPage() == page.sketchObject