Imgareaselect
Компонент нужен для выделения области на картинке.
Официальная страница компонента:
http://odyniec.net/projects/imgareaselect/examples.html
Механизм работы таков: на страницу добавляется img у которого задан id или class. Этот id или class передается в компонент вместе с параметрами, которые задают поведение компонента.
Описание парметров находится на этой странице: http://odyniec.net/projects/imgareaselect/usage.html#options.
Кроме описанных на этой странице параметров, существуют еще 4 дополнительных: postX1, postY1, postX2, postY2.
Они задают имена input-ов в value которых нужно записать координаты выделенной области.
Следующий пример полностью описывает работу компонента:
<?php IncludeCom("dev/imgareaselect", array("data" => array( ".imgareaselect2" => array( "maxWidth" => 500, "maxHeight" => 300, "postX1" => "#x1", "postX2" => "#x2", "postY1" => "#y1", "postY2" => "#y2", ), ".imgareaselect3" => array( ) ) )); ?> <img class="imgareaselect2" src="<?= Root("i/image/test.jpg") ?>"> <form action="<?= GetCurUrl() ?>" method="post"> <input type="hidden" id="x1" name="x1" value="" /> <input type="hidden" id="y1" name="y1" value="" /> <input type="hidden" id="x2" name="x2" value="" /> <input type="hidden" id="y2" name="y2" value="" /> <input type="submit" name="submit" value="Submit" /> </form> <p> x1: <?= Post("x1", "0") ?> </p> <p> x2: <?= Post("x2", "0") ?> </p> <p> y1: <?= Post("y1", "0") ?> </p> <p> y2: <?= Post("y2", "0") ?> </p>
По умолчанию в компоненте задан один класс ".imgareaselect" со следующими параметрами:
handles: true
postX1: #x1
postY1: #y1
postX2: #x2
postY2: #y2