Question

我正在尝试从Adobe Illustrator捕获矢量图形并将其转换为UIBezierPath。我创建了以下JavaScript，将选定的路径转换为必要的Swift代码。 javascript可以正常运行，但是Xcode视图中的图形是颠倒的并向右移动。

在Adobe Illustrator中，我将参考点设置为中心，而标尺设置为Artboard中心。在Xcode中，我加入了let语句来调整水平和垂直位置。

任何人都可以提供有关计算调整值以将图形居中放置在视图中并使图像正面朝上的逻辑的帮助吗？

Adobe Illustrator矢量绘图：

JavaScript代码：

// create a text file for the data
var file = File.saveDialog('Save a list of the path coordinates in UIBezierPath format.', 'Path values:*.txt');
file.open('w')
//path selection and point variables
var selection = app.activeDocument.selection ;
var item = selection[0]
var points = item.pathPoints;
var length = points.length;
var adjHorzPos = 0;
var adjVertPos = 0;

//select each path and write array to text file
for(i=0; i<length; i++)
    {
        if (i == 0) {
            //get the inital anchor points for starting move to values
            var anchorX = Math.floor(item.pathPoints[i].anchor[0] );
            var anchorY = Math.floor(item.pathPoints[i].anchor[1] );
            //write the let and move to code lines to file
            file.write("let adjHorzPos = " + adjHorzPos + "\nlet adjVertPos = " + adjVertPos + "\n\nlet drawing = UIBezierPath()\ndrawing.move(to: CGPoint(x: "+anchorX+" + adjHorzPos, y: "+anchorY+" + adjVertPos))\n");
        } else {
            //get the path points to make remaining addCurve code
            var ld0 = Math.floor(item.pathPoints[i].leftDirection[0] );
            var ld1 = Math.floor(item.pathPoints[i].leftDirection[1]);
            var a0 = Math.floor(item.pathPoints[i].anchor[0] );
            var a1 = Math.floor(item.pathPoints[i].anchor[1] );
            var rd0 = Math.floor(item.pathPoints[i-1].rightDirection[0] );
            var rd1 = Math.floor(item.pathPoints[i-1].rightDirection[1] );
            var str = "drawing.addCurve(to: CGPoint(x: "+a0+" + adjHorzPos, y: "+a1+" + adjVertPos), controlPoint1: CGPoint(x: "+rd0+" + adjHorzPos, y: "+rd1+" + adjVertPos), controlPoint2: CGPoint(x: "+ld0+" + adjHorzPos, y: "+ld1+" + adjVertPos))\n";
            //write addCurve to the file
            file.write(str);
        }
    } 
file.write("drawing.close()\n");
alert("Done!");

Xcode中的UIBezierPath：

let adjHorzPos = 0
let adjVertPos = 0
let drawing = UIBezierPath()
drawing.move(to: CGPoint(x: 305 + adjHorzPos, y: 281 + adjVertPos))
drawing.addCurve(to: CGPoint(x: 344 + adjHorzPos, y: 281 + adjVertPos), controlPoint1: CGPoint(x: 305 + adjHorzPos, y: 281 + adjVertPos), controlPoint2: CGPoint(x: 339 + adjHorzPos, y: 280 + adjVertPos))
drawing.addCurve(to: CGPoint(x: 353 + adjHorzPos, y: 289 + adjVertPos), controlPoint1: CGPoint(x: 348 + adjHorzPos, y: 281 + adjVertPos), controlPoint2: CGPoint(x: 352 + adjHorzPos, y: 286 + adjVertPos))
// …
drawing.addCurve(to: CGPoint(x: 267 + adjHorzPos, y: 281 + adjVertPos), controlPoint1: CGPoint(x: 259 + adjHorzPos, y: 286 + adjVertPos), controlPoint2: CGPoint(x: 263 + adjHorzPos, y: 281 + adjVertPos))
drawing.addCurve(to: CGPoint(x: 305 + adjHorzPos, y: 281 + adjVertPos), controlPoint1: CGPoint(x: 272 + adjHorzPos, y: 280 + adjVertPos), controlPoint2: CGPoint(x: 305 + adjHorzPos, y: 281 + adjVertPos))
drawing.close()

Xcode视图图形：

Answer 1

谢谢您的提示。看来Illustrator的坐标系是从左下角开始的（与iOS相反）。我颠倒了Javascript中的Y坐标，并将let语句更改为View的中心。现在它按预期显示了。

修订的Javascript代码：

if (i == 0) {
            //get the inital anchor points for starting move to values
            var anchorX = Math.floor(item.pathPoints[i].anchor[0] );
            var anchorY = -Math.floor(item.pathPoints[i].anchor[1] );
            //write the let and move to code lines to file
            file.write("let adjHorzPos = view.frame.width / 2\nlet adjVertPos = view.frame.height / 2\n\nlet drawing = UIBezierPath()\ndrawing.move(to: CGPoint(x: "+anchorX+" + adjHorzPos, y: "+anchorY+" + adjVertPos))\n");
        } else {
            //get the path points to make remaining addCurve code
            var ld0 = Math.floor(item.pathPoints[i].leftDirection[0] );
            var ld1 = -Math.floor(item.pathPoints[i].leftDirection[1]);
            var a0 = Math.floor(item.pathPoints[i].anchor[0] );
            var a1 = -Math.floor(item.pathPoints[i].anchor[1] );
            var rd0 = Math.floor(item.pathPoints[i-1].rightDirection[0] );
            var rd1 = -Math.floor(item.pathPoints[i-1].rightDirection[1] );
            var str = "drawing.addCurve(to: CGPoint(x: "+a0+" + adjHorzPos, y: "+a1+" + adjVertPos), controlPoint1: CGPoint(x: "+rd0+" + adjHorzPos, y: "+rd1+" + adjVertPos), controlPoint2: CGPoint(x: "+ld0+" + adjHorzPos, y: "+ld1+" + adjVertPos))\n";
            //write addCurve to the file
            file.write(str);
        }

Illustrator中的UIBezierPath，参考坐标问题

1 个答案: