SVG

Note

@svg(Startup script) is required

@svg.jsx 内でSVGの読み込みに関する処理を実装している（ただし、useタグなど未実装のものや、グラデーションなど実装自体が困難なものがあるので、完全には再現されない）。 また、 拡張子が .svg　のファイルに対して Register.importFlavor() を用いて読み込めるようにしてあるので、ドラッグ&ドロップで容易にsvgファイルをシェイプレイヤーに変換することが出来る。

SVG.svgToShapeLayer()

svgToShapeLayer(svgFile: File, shapeLayer?: ShapeLayer): ShapeLayer;

svgファイルを読み込み、シェイププレイヤーに変換する。shapeLayerを与えればそのシェイプレイヤー下に、与えなければ、アクティブなコンポに新たにシェイプレイヤーを作り、その下に構築する。

Added in version 0.4.0.

SVG.getContext()

getContext(layer?: AVLayer): SVG.Context;

htmlにおけるcanvasのgetContext()よろしく、SVGのコマンドを用いてシェイプやマスクのパスを構築できる。 @script.svg.d.ts や Paths – SVG 1.1 (Second Edition) 参照のこと。

• TypeScript
• JavaScript

(() => {

    const comp = app.project.activeItem;
    if (!(comp instanceof CompItem)) {
        return;
    }

    const layer = comp.layers.addSolid([1, 1, 1], 'Solid', comp.width, comp.height, 1, comp.duration);
    const ctx = Atarabi.SVG.getContext(layer);
    ctx.style({ stroke: [1, 0, 0], strokeWidth: 10 }); // スタイルの設定（マスクの場合は当然反映されない）
    // 適当にコマンドを入力していく、大文字から始まるコマンドは絶対座標、小文字から始まるコマンドは相対座標
    ctx.M(0, 0); // MoveTo
    ctx.Q(300, 400, 500, 100); // QuadraticCurveTo
    for (let i = 0; i < 100; i++) {
        ctx.t(generateRandomNumber() * 200 - 100, generateRandomNumber() * 200 - 100); // smoothQuadraticCurveTo
    }
    ctx.shape(); // シェイプを生成、 ctx.mask(); にするとマスクを生成する

})();

// SVG.getContext
(function () {
    var comp = app.project.activeItem;
    if (!(comp instanceof CompItem)) {
        return;
    }
    var layer = comp.layers.addSolid([1, 1, 1], 'Solid', comp.width, comp.height, 1, comp.duration);
    var ctx = Atarabi.SVG.getContext(layer);
    ctx.style({ stroke: [1, 0, 0], strokeWidth: 10 }); // スタイルの設定（マスクの場合は当然反映されない）
    // 適当にコマンドを入力していく、大文字から始まるコマンドは絶対座標、小文字から始まるコマンドは相対座標
    ctx.M(0, 0); // MoveTo
    ctx.Q(300, 400, 500, 100); // QuadraticCurveTo
    for (var i = 0; i < 100; i++) {
        ctx.t(generateRandomNumber() * 200 - 100, generateRandomNumber() * 200 - 100); // smoothQuadraticCurveTo
    }
    ctx.shape(); // シェイプを生成、 ctx.mask(); にするとマスクを生成する
})();

Added in version 0.4.0.