How to create a interactive graphic in ScriptUI ?

[Yo——kukei]

This is a ScriptUI panel,I want to know how to create the interactive graphic?

When I click the point in the graphic,it will be selected.

[UQg]

You need to add a "mousedown" event listener: run over the vertex array and see if the mouse event occured close enough from a vertex (location of mouse event ev in widget system is : ev.clientX for x and ev.clientY for y).

One thing is that ScriptUIGraphics doesnt have a curveTo() method, so if you want to draw bezier curves like in the picture you'll have to implement it (like AE does, by splitting the curves into line segments, maybe not as many as in the comp viewer (32), 8 should be ok).

Feasable, but quite some work though...

[Mathias Moehl]

For these kinds of complex user interfaces, you should also consider using CEP panels. Since their UI is build with HTML5, you have way more flexibility (but it only works with recent AE versions).

[Yo——kukei]

Ok, do you know where I can find the tutorials about this method ??

Or relevant guidance books in the Adobe website?

Thanks for your help !!

[Mathias Moehl · Accepted solution]

For CEP panels, best start reading here:

CEP 6 HTML Extension Cookbook for CC 2015 · Adobe-CEP/CEP-Resources Wiki · GitHub

[Alex White]

Also you can keep an eye on Davide Barranca's book here:

HTML Panels book – Update (Dec 2015) | Photoshop, etc.‌

I hope he will release it soon.

[Yo——kukei]

Thank you my friends !!!!!!!!!