Sketch 53 中的新功能

发布日期：2019 年 2 月 5 日 - 阅读发行说明

更改

来自库的文档现在将拥有一个正确的路径（本地路径或 Appcast URL）

GitHub 拉取请求

之前，当您使用 library.getDocument() 时，文档的路径将未定义。现在已正确设置。

在 Layer 上添加了 exportFormats 属性

GitHub 拉取请求

您可以指定 size、suffix、prefix 和 fileFormat，有效文件格式为

  • jpg
  • png
  • tiff
  • eps
  • pdf
  • webp
  • svg

用法

var sketch = require('sketch')
var document = sketch.getSelectedDocument()
var layer = document.selectedLayers.layers[0]

layer.exportFormats = [
  {
    size: '2x',
    suffix: '@2x',
  },
  {
    size: '1x',
    suffix: '@1x',
  },
]

// You will need to reload the inspector to see the changes appear there
document.sketchObject.inspectorController().reload()

console.log(layer)
/* Which logs:
[ { type: 'ExportFormat',
    fileFormat: 'png',
    prefix: undefined,
    suffix: '@2x',
    size: '2x' },
  { type: 'ExportFormat',
    fileFormat: 'png',
    prefix: undefined,
    suffix: '@1x',
    size: '1x' } ]
 */

添加了用于获取 Sketch 主题的方法

GitHub 拉取请求

Sketch 有 2 个主题：light 和 dark。如果您的插件有一些自定义 UI，它也应该支持这两种主题。

用法

var theme = UI.getTheme()

if (theme === 'dark') {
  // show UI in dark theme
} else {
  // show UI in light theme
}

更少地指定对象类型

几乎所有来自 JS API 的对象都是对原生对象的包装器（例如，ExportFormats 是对 MSExportFormat 的包装器）。当创建新的包装器时，API 的工作方式是查看类型字段以创建底层的原生对象。但在某些情况下，没有选择：exportFormats 内部的对象始终为 MSExportFormat。

用法

而不是

layer.exportFormats = [{type: 'ExportFormat, size: '2x'}]

您只需编写

layer.exportFormats = [{ size: '2x' }]

添加 UI.getInputFromUser 方法并弃用其他输入方法

GitHub 拉取请求

相同的 UI 输入在那里（String 和 Select），但已移至 UI.getInputFromUser 方法

已弃用

  • UI.getStringFromUser(message, initialValue)
  • UI.getSelectionFromUser(message, items, selectedItemIndex)

奖励

Slider、Number、Color 和 Path 输入即将推出

用法

// Default type .string
UI.getInputFromUser(
  "What's your name?",
  {
    initialValue: 'Appleseed',
  },
  (err, value) => {
    if (err) {
      // most likely the user canceled the input
      return
    }
  }
)

// Type .selection
UI.getInputFromUser(
  "What's your favorite design tool?",
  {
    type: UI.INPUT_TYPE.selection,
    possibleValues: ['Sketch'],
  },
  (err, value) => {
    if (err) {
      // most likely the user canceled the input
      return
    }
  }
)

在 Layer 上添加了一些 getParent* 方法

GitHub 拉取请求

您可以使用 getParentPage()、getParentArtboard()、getParentSymbolMaster() 和 getParentShape() 快速访问更高级别的组件。

请注意，您也可以使用 Layer 上的 parent 属性向上遍历图层结构。

用法

var sketch = require('sketch')
var document = sketch.getSelectedDocument()
var layer = document.selectedLayers.layers[0]

layer.getParentPage() // gets the page
layer.getParentArtboard() // gets the containing artboard
layer.getParentSymbolMaster() // you get the idea now...

layer.parent // goes up one level
layer.parent.parent // you can continue to chain all the way up
document.parent // will be undefined

添加了对文本样式的支持

GitHub 拉取请求

这里添加了很多功能。

已弃用

  • Text.systemFontSize
  • Text.alignment（已移至 Text.style.alignment）

在 Text.style 中添加了属性

  • alignment
    • left、center、right、justified
  • verticalAlignment
    • top、center、bottom
  • kerning
    • 如果没有设置，则默认为 null
    • （返回的值存在浮点问题，但已在此修复 GitHub PR）
  • lineHeight
    • 如果没有设置任何内容，则默认为 null
    • 您可以从 getDefaultLineHeight() 方法获取默认行高（GitHub PR）
  • textColor
    • 请注意，它可以使用各种格式设置 #000、#000000 以及不透明度变体 #000000FF
  • fontSize
  • textTransform
    • uppercase、lowercase 和 none
  • fontFamily
  • fontWeight
    • 默认值为 5
    • 如果您尝试将权重设置为字体不支持的值，Sketch 将尝试选择最接近的值。
  • fontStyle
    • italic 、normal
    • 默认为 undefined
    • 将此属性设置为 normal 将在您稍后读取它时返回 undefined
  • fontStretch
    • condensed、normal
    • 默认为 undefined
    • 将此属性设置为 normal 将在您稍后读取它时返回 undefined
  • textUnderline
    • single、none、double dot、dot double、thick dash-dot
    • 默认为 undefined
    • 将此属性设置为 double dot 或 dot double 将在您稍后读取它时都返回 double dot
    • 将此属性设置为 none 将在您稍后读取它时返回 undefined
  • textStrikethrough
    • single、none、double dot、dot double、thick dash-dot
    • 默认为 undefined
    • 将此属性设置为 double dot 或 dot double 将在您稍后读取它时都返回 double dot
    • 将此属性设置为 none 将在您稍后读取它时返回 undefined

用法

var sketch = require('sketch')
var document = sketch.getSelectedDocument()
var Text = require('sketch/dom').Text
var Rectangle = require('sketch/dom').Rectangle

const text = new Text({
  text: 'blah',
  frame: new Rectangle(10, 10, 100, 100),
  parent: document.pages[0].layers[0], //If you want to bind it to an artboard
})

// Below are the default props with on the new Text object

text.style
// { type: 'Style',
// ...
// alignment: 'left'
// verticalAlignment: 'top'
// kerning: null
// lineHeight: null
// textColor: '#000000ff'
// fontSize: 12
// textTransform: 'none'
// fontFamily: 'Helvetica'
// fontWeight: 5
// fontStyle: undefined
// fontStretch: undefined
// textUnderline: undefined
// textStrikethrough: undefined
// }

添加了一些用于存储会话变量的方法

GitHub 拉取请求

会话变量允许您存储一个在插件完成运行时会持久化的值，但在 Sketch 关闭时不会持久化。当您希望在插件的运行之间保留一个值时，它非常有用。

请注意，您仍然可以使用 setSettingForKey 在 Sketch 关闭后存储内容。

用法

var Settings = require('sketch/settings')

Settings.sessionVariable('myVar')
// undefined

Settings.setSessionVariable('myVar', 0.1)
Settings.sessionVariable('myVar')
// 0.1

允许即使从“运行脚本”面板中也使用设置方法

GitHub 拉取请求

之前，您无法在脚本面板中测试来自 'sketch/settings' 的任何内容，现在您可以测试了！

能够创建切片

GitHub 拉取请求

您可以通过以下方式创建切片

const slice = new Slice({ name: 'Test' })

您也可以传入 exportFormats 和父级以将其绑定到图层或对象。

用法

const artboard = new Slice({
  parent: sketch.getSelectedDocument().selectedPage,
  exportFormats: [
    {
      size: '2x',
      suffix: '@2x',
    },
  ],
})

setTimeout 和所有其他超时、间隔、立即方法现在可以直接使用，无需对它们进行填充

GitHub 拉取请求 （这可能是 PR，但差异似乎是关于修复碎片问题 🤔）

一个新的实用方法，可以在 path 模块中用于获取插件包中的资源

GitHub 拉取请求

require('path').resourcePath(string) 返回插件包中资源的路径，如果不存在，则返回 undefined。

添加了一个名为 LayersResized 的新操作

GitHub 拉取请求

此操作的操作上下文包含两个键

  • document：触发操作的文档
  • layers：正在调整大小的图层的数组

用法

// In your manifest.json you will need to add / modify the commands object
"commands": [
  ...
  {
    "name": "layerResized",
    "identifier": "myLayerResized",
    "script": "./my-command.js",
    "handlers": {
      "actions": {
        "LayerResized.begin" : "layerResizedMethod"
      }
    }
  }
],
...

// And then in your my-command.js you can add this function
export function layerResizedMethod(context) {
  // Do some fancy stuff here with context.document or context.layers
}

// Remember, some actions have a begin and finish phase so if you
// want the action to trigger once, you should modify the handler
// to be YourAction.begin or YourAction.finish. If you don't add
// anything, the action will be triggered twice.
// See https://developer.sketchapp.com/guides/action-api/ for more info

您现在可以控制 Symbol Source 覆盖的属性是否 editable。Symbol 实例覆盖也具有名为 editabled 的属性

GitHub 拉取请求

用法

var sketch = require('sketch')
var document = sketch.getSelectedDocument()
var Artboard = require('sketch/dom').Artboard
var Text = require('sketch/dom').Text
var SymbolMaster = require('sketch/dom').SymbolMaster

const artboard = new Artboard({
  name: 'test',
  parent: document.selectedPage,
})

const text = new Text({
  text: 'test text value',
  parent: artboard,
})

const symbol = SymbolMaster.fromArtboard(artboard)
symbol.overrides[0].editable = false
const instance = symbol.createNewInstance()
instance.parent = document.selectedPage
instance.overrides[0].editable
// false

Obj-C 异常将作为 JS 错误抛出，这些错误将在它们的 nativeException 属性中引用异常

GitHub 拉取请求

您现在可以递归地分离 Symbol 实例，以便嵌套的 Symbol 也分离

GitHub 拉取请求

  • instance.detach() 只会分离外部 Symbol
  • instance.detach({recursively:true}) 也将分离嵌套的 Symbol

您现在可以旋转图层。此外，您还可以垂直或水平翻转它们

GitHub 拉取请求

这些可以在 transform 属性下找到，您可以像预期的那样设置和获取它们。

用法

var layer = document.selectedLayers.layers[0]
layer
// { type: 'Text',
// ...
// transform:
//    { rotation: 0,
//      flippedHorizontally: false,
//      flippedVertically: false },
// ...

layer.transform.rotation = 10
document.sketchObject.inspectorController().reload()
// be sure to reload the inspector to see your changes

layer.transform.rotation
// 10

您现在可以访问画板的背景属性

GitHub 拉取请求

  • background.enabled：布尔值，表示背景是否显示
  • background.includedInExport：布尔值，表示背景是否应该导出或在导出时是否应该透明
  • background.color：字符串，背景颜色的 rgba 表示形式

用法

var Artboard = require('sketch/dom').Artboard
const artboard = new Artboard({ name: 'Test' })

artboard
// { type: 'Artboard',
// ...
// background: { enabled: false, includedInExport: true, color: '#ffffffff' } }

export 现在可以导出为 JSON

GitHub 拉取请求

用法

var sketch = require('sketch')
var Shape = require('sketch/dom').Shape
const object = new Shape()
const options = { formats: 'json', output: false }
const sketchJSON = sketch.export(object, options)
console.log(sketchJSON)
// big JSON file