Shulou(Shulou.com)06/02 Report--

This article introduces you how to draw your own body in PS, the content is very detailed, interested friends can refer to, I hope it can be helpful to you.

By writing a JSDom script, controlling PhotoShop, and finally automatically cutting the image of the ninth palace, and outputting the whole process of cutting to a file:

The topics covered below are the foundation of PhotoShop plugin development, focusing on how to draw your own body in PS.

What to do:

Basic drawing-taking Document of PhotoShop as the stage, drawing text and arbitrary shapes on it

What not to do:

1) it does not involve Channel operation, and we do not care about bitmap pixel operation. 2) it does not involve PhotoShop interface programming. Because PS interface programming changes with versions, there are many ways to change all the time. C++ way, powerful, but difficult, not a few words clearly As3 Flex way, easy to use, and PSDom interaction is convenient, but suitable for Adobe CS series Html5 way, simple application, and PSDom interaction is convenient, but suitable for Adobe CC series, but in any case, the core PhotoShop operation is exposed through PSDom API, no matter how the version changes, its own DOM will not change greatly. Therefore, it is more valuable to study. You will find that it is quite easy to develop PS plug-ins. PSDom is very powerful.

PSDom development environment-ExtendScript ToolKit:

When you install the Adobe cs/cc series, it will be installed automatically (I installed CS5.0)

If you are developing under Windows, see the suffix changed to .jsx

If you use the .js suffix, it may be executed by Windows Scripting Host (WSH) rather than a PS script parser. Prevent conflict!

Through this article, I hope you can do whatever you want in PhotoShop!

Let's take a look at:

1) PS DOM (Photoshop document object model) is used to manipulate various objects in PS. You can use AppleScript (for mac), VBScript (for windows), and JavaScript (cross-platform, this document uses only js code to demonstrate).

2) key class diagram in PS DOM (vertical bar indicates inclusion relationship, and all classes starting from layer 3 belong to Document):

3) objects related to painting:

2D drawing can be classified into three categories:

1. Bitmap / image operation:

PS Dom manipulates the data of a channel through an Application.Document.Channel (channel) object (for example, you can manipulate the four channel R G B An of a bitmap separately), which is not the focus of this article.

2. Text drawing:

PS Dom uses Application.Document.ArtLayer.TextItem for text display and related operations.

From the addressing relationship above, you can see that the TextItem text object is attached to a Layer in the PS.

3. Vector drawing:

PS Dom uses:

Application.Document.PathItem

Application.Document.PathItem.SubPathItem Application.Document.PathItem.SubPathItem.PathPoint

These three classes are used for related operations (there are actually some other auxiliary classes, which we will see later)

From the addressing relationship above, you can see that the PathItem path object is not attached to a Layer in the PS like TextItem, but is independent of the layer object.

4) JS running debugging environment and API reference documentation:

After installing PhostShop CS5 or later, you can see the following directory in your PS installation directory:

Among them, JavaScript Ref and Scripting Guide are the references that you must consult, because there is very little information on the PS DOM development network, so these two documents are basically the only ones you can rely on.

Under the Utilities directory:

The scriptListener plug-in, which is used to record the js code of the recording steps during PS Action recording and output to a desktop file. Is a very important plug-in with development functions, there will be special articles in the future, do not pay attention to at present.

Under the Sample Scripts directory:

Double-click to run

It is full of js demo code:

Double-click and jump out of the Yes/No Alert interface: Yes will open PS and run the code, showing the effect of the script running No will open the JS development environment, you can develop, modify, run, debug, etc.

5) commonly used basic code structure flow:

1. The beginning of the js code file

/ / at the beginning of each JS file, the code is basically fixed / / if there is # target photoshop, just open Photoshop and run the js script / / if not, open ps's script editor instead of running # target photoshop / / in case we double clicked the file app.bringToFront () directly in Photoshop

2. Preservation and recovery of unit ruler and other data:

/ / Store the current state var startRulerUnits = app.preferences.rulerUnits; var startTypeUnits = app.preferences.typeUnits; var startDisplayDialogs = app.displayDialogs; / / set the new state. We use pixels as the unit of measurement for each object in the document / / of course, we can also set other units of measurement, such as centimeters, inches, etc. App.preferences.rulerUnits = Units.PIXELS; app.preferences.typeUnits = TypeUnits.PIXELS; app.displayDialogs = DialogModes.NO / / the reason for this is that the development of ps is based on the state machine model / / all graphical operations are basically state machines, opengl D3D gdi quartz2d.

3. If you open a lot of programs in PS and want to show only the document you are working on, you can close all documents first using the following code

/ / close all open documents while (app.documents.length! = 0) {app.activeDocument.close ();}

4. Use the open global function to open a PSD file and set it to the currently active Document

Var doc = open (File (app.path + "/ example / mytest.psd"); app.activeDocument = buttonDoc

5. Perform relevant operations on various documents

The code that operates on the document object and each object in the document needs you to implement!

6. After operating the document, you need to return to the original state (to the state value recorded at the beginning).

/ / restore to the state before modification app.preferences.rulerUnits = startRulerUnits; app.preferences.typeUnits = startTypeUnits; app.displayDialogs = startDisplayDialogs; / / the state machine restores the default state

6) text manipulation (TextItem)

Requirements description:

1. Print out the information of all Font objects in ps in order to understand the main attributes of TextFont objects: Family | name | postScriptName | style

Function printAllInstalledTextFontInfo () {var allFonts = []; for (var I = 0; I

< app.fonts.length; i++) { var str = "{"+app.fonts[i].family+"|"+app.fonts[i].name+"|" +app.fonts[i].postScriptName+"|"+app.fonts[i].style+"}"; allFonts.push (str); } alert(allFonts); } 2、不要从现有的PSD载入，而是从无到有通过代码创建文档，层等 //创建一个Document对象 var docRef = app.documents.add(400, 300, 72); //创建一个ArtLayer对象 var newTextLayer = docRef.artLayers.add(); //注意:一个文本对象必须要依附于一个Layer对象，并且Layer的kind必须是TEXT类型 newTextLayer.kind = LayerKind.TEXT; 3、使用微软雅黑并blod字体样式 //当设置为TEXT类型时，PS自动会创建一个TextItem对象给Layer，因此可以直接引用newTextLayer.textItem.font = "MicrosoftYaHeiUI-Blod"; //这里需要注意的是，TextItem.font的数据类型是字符串，该字符串是使用了TextFont //对象中的postScriptName,这一点务必要注意。 //由这里看出，前面 printAllInstalledTextFontInfo函数的作用了，你可以打印出来，查找 //postScriptName的名称，然后记住是用这个名称来设置字体name和style 4、绘制文字内容为"随风而行的PSDOM Demo" //设置要显示的内容 newTextLayer.textItem.contents = "随风而行的PSDOM Demo"; 5、设置文字的大小 newTextLayer.textItem.size = 36; 6、文字颜色为红色(SolidColor对象) var textColor = new SolidColor; textColor.rgb.red = 255; textColor.rgb.green = 0; textColor.rgb.blue = 0; newTextLayer.textItem.color = textColor; //这样就可以显示文字了 其他的文字相关属性请查阅文档 7）路径操作(PathItem)--核心操作 1、先来一段示例代码，能够对PathItem有个比较直观的了解 我们编写一个函数，用来显示多边形： function DrawPolygon() { //PS是状态机，基于当前选中的状态进行操作 var doc = app.activeDocument; //获取参数的数量，使用js可变参数//因为多边形参数不确定，例如三角形，三个顶点，n边形，n个顶点var y = arguments.length;var i = 0; var lineArray = []; for (i = 0; i < y; i++) { //创建一个PathPointInfo对象 //里面包含绘制点的相关信息 lineArray[i] = new PathPointInfo; //多边形是凸包，没有任何曲线段表示，因此每个点都是CORNERPOINT类型 //如果是曲线的话，那么每个点的类似是SMOOTHPOINT lineArray[i].kind = PointKind.CORNERPOINT; //要绘制的点的坐标，来源于参数，类型为[x,y]; //对于非曲线来说，leftDirection = rightDirection=anchor lineArray[i].anchor = arguments[i]; lineArray[i].leftDirection = lineArray[i].anchor; lineArray[i].rightDirection = lineArray[i].anchor;}//到此处，所有的绘制点的信息都保存在lineArray数组中 //创建一个SubPathInfo对象var lineSubPathArray = new SubPathInfo();//SubPathiInfo.entireSubPath指向了要绘制的顶点数据数组 lineSubPathArray.entireSubPath = lineArray;//设置SubPathiInfo.closed为true,这样在strokePath时候，会自动封闭整个路径//否则如果为false的话，那么会缺少最后一条线段，导致路径非封闭状态。lineSubPathArray.closed = true;//设置ShapeOperation为Add模式，叠加模式，前景层直接覆盖到背景层上//还有其他也写操作，可以理解为布尔操作，例如前景和背景取并集，交集，差集等lineSubPathArray.operation = ShapeOperation.SHAPEADD;//创建一个PathItem对象，使用的是doc.pathItems.add方法//注意，我们会发现是doc而不像TextItem是属于层对象的。var myPathItem = doc.pathItems.add("myPath" , [lineSubPathArray]);//调用PathItem的描边函数//矢量图形绘制可以分为边的绘制以及封闭形体的填充两种操作//strokePath用来进行边的绘制//fillPath则用来进行填充内容myPathItem.strokePath(ToolType.PENCIL);//绘制好后，将PathItem去除掉，由于已经描边渲染了，所有所有效果都输出到//像素缓冲区了，因此不需要该PathItem了//如果你需要后续进行顶点级别的操作的话，那你也可以保留着，不要remove掉 myPathItem.remove();} 2、测试多边形绘制: //从两个点生成4个绘制点，绘制Rectfunction DrawRect(left,top,right,bottom){ DrawPolygon( [left,top], [right,top], [right,bottom], [left,bottom] );}//由于strokePath时使用的颜色是基于当前的前景色的//注意，如果是填充封闭路径fillPath的话，则使用指定颜色作为参数，但是描边是基于前//景色的操作//为了防止干扰，因此先记录下当前的前景色var saveColor = app.foregroundColor;//生成一个红色的SolidColor对象var newColor = new SolidColor;newColor.rgb.red = 255;newColor.rgb.green = 0;newColor.rgb.blue = 0;//设置前景色为红色，并绘制三角形app.foregroundColor = newColor; DrawPolygon([250,10],[350,10],[250,100]);//修改颜色为绿色newColor.rgb.red = 0;newColor.rgb.green = 255;newColor.rgb.blue = 0;//设置前景色为绿色，并绘制四边形app.foregroundColor = newColor; DrawRect(10,100,100,200);//修改颜色为蓝色，绘制8角形newColor.rgb.red = 0;newColor.rgb.green = 0;newColor.rgb.blue = 255;app.foregroundColor = newColor;DrawPolygon([36.9999885559082,13.9999985694885],[165.99999666214,13.9999985694885],[185.999989509583,33.9999973773956],[185.999989509583,61.9999945163727],[165.99999666214,81.999×××847443],[36.9999885559082,81.999×××847443],[16.9999957084656,61.9999945163727],[16.9999957084656,33.9999973773956]);//完成后，将前景色恢复到以前记录下来的颜色app.foregroundColor = saveColor; 在PhotoShop显示的结果如下:(我们使用Brush进行绘制，如果线条的话，可以使用Pencil) 如果使用填充模式,在PhotoShop中获得的效果: 3、PathItem对象模型: 由此可见，PathItem对象的读写是使用不同的类来表示的,切记！！ 4、贝塞尔曲线曲面研究： pathItem中的PathPoint有三个很重要的属性 pathPoint.anchor[x,y] The X and Y coordinates of the anchor point of the curvepathPoint.leftDirection[a,b] The location of the left-direction endpoint ('in'position). pathPoint.rightDirection[e,f] The location of the right-direction endpoint ('out'position). For paths that are straight segments (not curved), the coordinates of all three points are the same. 如果是直线的话，leftDirection = rightDirection = anchor 但是如果是曲线的话，文档中的解释是 For curved segements, the the coordinates are different. The difference between the anchor point and the left or right direction points determines the arc of the curve. You use the left direction point to bend the curve "outward" or make it convex; you use the right direction point to bend the curve "inward" or make it concave. 这些描述非常抽象，而且ps dom文档只演示了非曲线曲面的demo，对于曲线曲面并没有demo，而且网上也很难查到相关资料 因此只有抽取数据进行查看了解其数据的格式以及猜测strokePath是如何绘制的 为了研究strokePath是如何绘制曲线的，必须先要取得矢量对象中所有曲线的点，看看是如何组成的，所以先将矢量对象所有的点输出到文件，以利于查看: function saveFile(msg1,msg2,msg3,types){ //弹出saveFile对话框，save类型为txt文件 var file = File.saveDialog("Saving TXT file.", "TXT Files: *.txt"); if ( file == null ) return; //如果已经存在，弹框确认是否覆盖重写 if (file.exists) { if(!confirm(file.fsName + " exists.\\\\rOver write?")) return; } //打开要写的文件流，并且设置编码为utf16格式存储 file.open("w"); // open as write file.encoding = "UTF16"; file.write("\\\\uFEFF"); // Unicode marker //将anchor数据写入文件流 file.write("pts:"); file.write(msg1); //将left Direction points数据写入文件流 file.write("lts:"); file.write(msg2); file.write("rts:"); file.write(msg3); //将right Direction points数据写入文件流 file.write("tps:"); file.write(types); file.write("\\\\n"); //关闭文件流，写入完成 file.close();}//将每个pathItem中的每个subPathItem中的pathPoint值输出到文件参看具体数据for(var i = 0; i < buttonDoc.pathItems.length; i++){ var subItems = buttonDoc.pathItems[i].subPathItems; for(var j = 0; j < subItems.length; j++) { var subItem = subItems[j]; var pathPoints = subItem.pathPoints; var pts = []; var lefts = []; var rights = []; var types = [] for(var k = 0; k < pathPoints.length; k++) { pts.push(pathPoints[k].anchor); lefts.push(pathPoints[k].leftDirection); rights.push(pathPoints[k].rightDirection); types.push(pathPoints[k].kind); } saveFile(pts,lefts,rights,types); }}上面代码运行后会在桌面生成一个文件，例如叫PathItem.txt 我们将一个圆角矩形输出到文件，并且对浮点数进行四舍五入后获得所有数据，进行分析: 1、顶点的定义是左手系，顺时针方式 [0，1，2，3，4，5，6，7] 如上图所画形状。多边形的面是有正反面之分,ps中按照左手顺时针为正面。2、线段是以Line_Strip或Line_Strip_Loop方式连接的 上图来源于opengl的图元类型中的线图源类型 ps使用的是： Line_Strip(如果SubPathItem.closed = false)Line_Strip_loop(如果SubPathItem.closed = true). 备注，OpenGL的顶点定义是右手系逆时针。而psdom中和d3d一样使用左手系表示 Line_Strip n个顶点确定n-1条线段 n >

= 2Line_Strip_Loop n vertices to determine n line segments, and the last line segment is connected in the first place n > = 23, the meaning of four vertices in PathItem Bezier cubic curve

If you want to draw the above curve, the vertices are as follows: pathPoint0.anchor = p0 _ pathPoint0.leftDirection = p0 _ pathPoint0.rightDirection = r _ 0 _ pathPoint1.direction = p1pathPoint1.leftDirection = L1 _ ShipathPoint1.rightDirection = r1ShipathPoint1.rightDirection = p2pathPoint1.leftDirection = L2npathPoint1.rightDirection = p0

Let's take a look at a complete example of drawing a rounded rectangle.

Function DrawRoundRetange (left,top,right,bottom,radius) {if (radius = (Math.min (right-left, bottom-top)) / 2.0) {alert ("too large radius") / / how to deal with, to study / / PS, in general, it is 8 points / / but in the radius is too large or some other cases, it seems that 6 points / / can not be reversed at present, we will study it later! Return;} var doc = app.activeDocument; var I = 0; var lineArray = []; / / the following code sets anchor and anchor points with radius and vertex as parameters / / specific algorithms are illustrated above / / these algorithms need to have some mathematical foundation. I am about to open up a collection of articles called / / the beauty of mathematics lineArray [0] = new PathPointInfo; lineArray [0] .kind = PointKind.SMOOTHPOINT LineArray [0] .directions = [left+radius,top]; lineArray [0] .leftDirection = lineArray [0] .directions; lineArray [0] .rightDirection = [left,top]; lineArray [1] = new PathPointInfo; lineArray [1] .kind = PointKind.SMOOTHPOINT; lineArray [1] .directions = [right-radius,top]; lineArray [1] .leftDirection = [right,top]; lineArray [1] .rightDirection = lineArray [1] .directions; lineArray [2] = new PathPointInfo LineArray [2] .kind = PointKind.SMOOTHPOINT; lineArray [2] .directions = [right,top+radius]; lineArray [2] .leftDirection = lineArray [2] .directions; lineArray [2] .rightDirection = [right,top]; lineArray [3] = new PathPointInfo; lineArray [3] .kind = PointKind.SMOOTHPOINT; lineArray [3] .directions = [right,bottom-radius]; lineArray [3] .leftDirection = [right,bottom]; lineArray [3] .rightDirection = lineArray [3] .directions LineArray [4] = new PathPointInfo; lineArray [4] .kind = PointKind.SMOOTHPOINT; lineArray [4] .questions = [right-radius,bottom]; lineArray [4] .leftDirection = lineArray [4] .directions; lineArray [4] .RightDirection = [right,bottom]; lineArray [5] = new PathPointInfo; lineArray [5] .kind = PointKind.SMOOTHPOINT; lineArray [5] .directions = [left+radius,bottom]; lineArray [5] .leftDirection = [left,bottom] LineArray [5] .rightDirection = lineArray [5] .directions; lineArray [6] = new PathPointInfo; lineArray [6] .kind = PointKind.SMOOTHPOINT; lineArray [6] .directions = [left,bottom-radius]; lineArray [6] .leftDirection = lineArray [6] .directions; lineArray [6] .rightDirection = [left,bottom]; lineArray [7] = new PathPointInfo; lineArray [7] .kind = PointKind.SMOOTHPOINT; lineArray [7] .questions = [left,top+radius] LineArray [7] .leftDirection = [left,top]; lineArray [7] .rightDirection = lineArray [7] .directions; var lineSubPathArray = new SubPathInfo (); lineSubPathArray.closed = true; lineSubPathArray.operation = ShapeOperation.SHAPEADD; lineSubPathArray.entireSubPath = lineArray;var myPathItem = doc.pathItems.add ("myRoundedRetangle", [lineSubPathArray]); myPathItem.strokePath (ToolType.PENCIL); / / myPathItem.fillPath (); myPathItem.remove ();}

Let's test it:

/ / Store the current state var startRulerUnits = app.preferences.rulerUnits;var startTypeUnits = app.preferences.typeUnits;var startDisplayDialogs = app.displayDialogs;// set the new state app.preferences.rulerUnits = Units.PIXELS;app.preferences.typeUnits = TypeUnits.PIXELS;app.displayDialogs = DialogModes.NO;// close all open documents while (app.documents.length! = 0) {app.activeDocument.close () } / / create a new document object with the name of PathItemTest// and set it to the current object var doc = app.documents.add (500jing500 dpi=72 72, "PathItemTest"); app.activeDocument = doc;// to call the above function drawRoundRetange (20jingjie 200jie50); / / restore to the system initialized state app.preferences.rulerUnits = startRulerUnits;app.preferences.typeUnits = startTypeUnits;app.displayDialogs = startDisplayDialogs

At this point, the end of our first article on Photoshop, we will have the opportunity to focus on how to operate PS Layer, which is also a very interesting topic.

The interface in photoshop above is written in flash as3.0. At present, html5 is the best alternative.

Note: on parametric curves and surfaces, in fact, there is still a lot of mathematical knowledge, including the OpenGL solar system Demo this bolg issued some time ago, and not a very detailed explanation of the code, because it involves a lot of mathematical methods of computer graphics, so with the wind plans to open up a collection called the beauty of mathematics, using Canvas2D,WebGL based on javascript / typescript to demonstrate a variety of animation effects, experience the beauty of mathematics!

On how to draw their own body in PS to share here, I hope the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.