KineticJS dragBound inside a Polygon

Я использую KineticJS для создания приложения. Проблема в том, что мне нужно применить dragBoundFunc к изображению внутри многоугольника, чтобы пользователь не мог перемещать изображение снаружи. Полигон может покупать любую форму, как это, например:KineticJS dragBound inside a Polygon

Demo

var polygon = new Kinetic.Polygon({ 
    points: [-5, 0, 75, 0, 70, 10, 70, 60, 60, 90, 61, 92, 64, 96, 66, 100, 67, 105, 67, 110, 67, 113, 66, 117, 64, 120, 63, 122, 61, 124, 58, 127, 55, 129, 53, 130, 50, 130, 20, 130, 17, 130, 15, 129, 12, 127, 9, 124, 7, 122, 6, 120, 4, 117, 3, 113, 3, 110, 3, 105, 4, 100, 6, 96, 9, 92, 10, 90, 0, 60, 0, 10], 
    fill: 'none', 
    stroke: '#000', 
    strokeWidth: 0, 
    name: 'polygon', 
    draggable: false 
});

Какие алгоритмы, чтобы проверить, если изображение находится внутри многоугольника? Или что является лучшим способом решения проблемы?

источник

2013-11-08 Dennis Selkirk

привет здесь пост подобное может помочь у start.http: //stackoverflow.com/questions/15854001/kineticjs-dragboundfunc-for-a-rect-in-a-rect/15865422#15865422 – codebreaker

Спасибо! Но этот алгоритм для прямоугольника, я не могу применить его для многоугольника ... –

его просто помогите, и начните только делать - вокруг для полигона нужно соответственно моему другу. – codebreaker

Ваш сложный путь представляет собой проблему

Проблема заключается в том, что сложные пути (например, ваш пример) требует обширных вычислений, чтобы определить, если внутри объекта бежал вне пути.

И помните, что эти вычисления должны выполняться с каждым событием mousemove. Mousemove события могут стрелять десятки раз в секунду.

У меня есть опыт работы с KineticJS, и я считаю, что ограничивающие объекты внутри вашего сложного пути потерпят неудачу, потому что вычисления не могут быть выполнены до того, как объект был вытащен за пределы пути.

Альтернатива

В качестве альтернативы (если вы проектируете разрешения), вы можете создать прямоугольник вокруг сложного пути и использовать, что ограничивающий прямоугольник содержать внутри объект.

Аналогичным образом вы можете создать ограничивающий круг вокруг вашего сложного пути и использовать этот ограничивающий круг для размещения внутри объекта.

Прямоугольные и круговые ограничивающие области можно проверять достаточно быстро, чтобы содержать объект, прежде чем он ускользнет.

У меня есть еще одна альтернатива для вас.

Поскольку ваш внутренний объект является прямоугольником, вы можете проверить, находятся ли все 4 угла прямоугольника внутри вашего сложного пути. Если все 4 угла находятся внутри пути, ваш прямоугольник равен , вероятно, но не обязательно внутри вашего сложного пути.

Вы можете использовать собственный контекст canvas.isPointInPath (corner1X, corner1Y), чтобы проверить 4 угла.

Это решение потребует от вас:

Поддерживать отдельный закадровый HTML холст.
Нарисуйте сложный путь на этом зазеркальном холсте.
Используйте context.isPointInPath для проверки четырех углов прямоугольника.

источник

2013-11-08 06:05:26 markE

KineticJS dragBound inside a Polygon

ответ

Смежные вопросы