PHOTOSHOP에서 앵커 포인트의 좌표 가져오기



하고 싶었던 일



img 태그로 일본지도를 두고, usemap을 사용해 지방을 링크화하고 싶다는 것이 상당히 있습니다.
이 때 포토샵에서 패스로 뽀찌뽀치하고 지방을 둘러싸고 앵커 포인트를 토해 주었으면 한다. 경고로 좋다.
이것을 실현하는 jsx를 만들었습니다.

코드


LF = String.fromCharCode(10);
docW = activeDocument.width.value;
docH = activeDocument.height.value;
pObj = activeDocument.pathItems; // 全パス配列
result = '';
for (var i=0; i<pObj.length; i++) {
    result += pObj[i].name + ':';
    var pp = pObj[i].subPathItems[0].pathPoints;
    for (var j=0; j<pp.length; j++) {
        var x = pp[j].anchor[0];
        var y = pp[j].anchor[1];
        x += '';
        y += '';
        var pointFloatX = x.indexOf('.');
        var pointFloatY = y.indexOf('.');
        if (pointFloatX !== -1) x = x.slice(0, pointFloatX);
        if (pointFloatY !== -1) y = y.slice(0, pointFloatY);
        result += x + ',' + y;
        if (j !== pp.length-1) result += ',';
    }
    if (i !== pp.length-1) result += '\n';
}
alert(result);

Photoshop CC에서 실행하는 방법


  • 위 코드를 저장한 jsx 파일을 Photoshop의 Scripts 폴더에 넣습니다(참고: PHOTOSHOP JSX 개발 노트 - Qiita )
  • Photoshop 재시작
  • 일본지도와 같은 이미지를 열고 링크하려는 영역을 경로로 묶습니다
  • 파일 > 스크립트 > {저장된 파일 이름} 실행

  • 경고에 표시되는 좌표를 복사하고 area 태그의 coords 속성 값으로 설정합니다.

    후기



    이 손의 스크립트는 찾아보면 상당히 있습니다만, 정말 간단하게 친 경로의 좌표를 표시할 뿐의 것이 발견되지 않았기 때문에, 만들어 보았습니다.

    좋은 웹페이지 즐겨찾기