Way to increase point/segment square size when path is selected?

[Dave Argue]

Newbie question...please forgive any incorrect usage of terminology.

I'm looking for a way to make the squares representing each point/
segment on a path larger, so they are easier for the user to click
with their mouse. For example, on the "Hit Testing" example page
(http://paperjs.org/examples/hit-testing/), when you hover over a
"blob", the points that appear when the path is marked as selected are
quite small, making it hard to click on a point to adjust the shape of
the blob. I accidentally add new points instead of selecting an
existing point. I'd like to make the squares representing each point
about twice as large, making them easier to select.

Thanks in advance for any tips on how to accomplish this!

[Alex Blackwood]

Increasing the size of the 'selected' rectangles doesn't increase the
hitbox of each segment. Instead, try altering the values of the
hitOptions variable found at the top of the script.

Although if you just want a larger visual cue, you can change the
drawHandles function in paper.js (line 4455?) to draw a larger
rectangle.

[Dave Argue]

I really would like to increase the hitbox area for each segment, but the existing hitOptions values don't seem to affect this.  This is what I have:

var hitOptions = {
    segments: true,
    stroke: true,
    fill: true,
    tolerance: 5
};

I couldn't find any documentation on other available settings that might help in this situation to increase the hitbox size.  Anyone?

Thanks for the suggestion on modifying drawHandles for the larger visual cue.  That worked great.

[Alex Blackwood]

Changing hitOptions to the following sets only segments as selectable,
and increases the radius of the hit test.

var hitOptions = {
    segments: true,

    stroke: false,
    fill: false,
    tolerance: 500
};

Because paper.js uses the same HitResult function for segments,
handles, and whole items, just increasing the tolerance will increase
the hit radius for all selectable items. If you want everything
selectable, I'd think the easiest way would be to listen for modifier
key, and change the hitOptions accordingly.

The source files on the github project page have more documentation in
the comments.

[Harun Damar]

var hitOptions = { type : ('path'), segments: true, stroke: true, fill: true, tolerance: 5 };
project.options.handleSize = 8;
...
and go...
default value of project.options.handleSize is 4 :)


29 Şubat 2012 Çarşamba 00:42:04 UTC+2 tarihinde Dave Argue yazdı: