Получение правильной позиции мыши на холсте, когда размер холста является относительным - PullRequest
Новая
       22

Получение правильной позиции мыши на холсте, когда размер холста является относительным

2 голосов
/ 17 октября 2011

Проблема в следующем, ширина и высота моего холста относительно его родителей.В css его ширина и высота установлены на 95%.Это приводит к тому, что моя функция getMousePosition не работает должным образом, что означает, что когда я щелкаю точку холста, фактическая точка, где, например, нарисован прямоугольник, находится далеко от наблюдаемой точки щелчка.

Вот HTML-материал 

<div class="Container">
            <div id = 'left-div'>
                <canvas class = "Blackboard" id = "blackboard-canvas" >

                </canvas>
            </div>                  
            <div id='right-div'>
                <div id = 'tools-div'>
                    <ul>
                        <li><a href='#colorOption'>Color Options</a></li>
                        <li><a href='#toolbar-option'>Tool Bar</a></li>
                    </ul>
                    <div id='colorOption'>
                        <canvas id='color-option-canvas' >

                        </canvas>
                    </div>
                    <div id='toolbar-option'>
                        Tool bar options goes here
                    </div>
                </div>
            </div>

            <br style="clear:both;"/>
        </div>

и соответствующий css 

.Blackboard{

border-style: ridge;
border-color: gray;
border-width: 5px; 
width: 96%;
height: 96%;
cursor: crosshair;
position: relative;
-webkit-border-radius: 16px;
-webkit-box-shadow: 0px 6px 7px #0a0505;
  };

 .Blackboard:active{
cursor: crosshair;
  }

 .Container{
border-color: #666;
border-width: 10px;
border-style: inset;
background-color: gray;
width: 700px;
height: 400px;
 }

 #right-div, #left-div{
height: 100%;
 }
 #left-div{
float: left;
width: 60%;
 }
 #right-div{
float: right;
background-color: black;
width: 40%;
 }

Есть ли способ «нормализовать» это или что-то?

РЕДАКТИРОВАТЬ:

вот этоjfiddle http://jsfiddle.net/EZktE/

Ответы [ 2 ]

2 голосов
/ 17 октября 2011

Ваша проблема в том, что ваш холст принимает атрибуты <canvas> размера по умолчанию width=300 height=150.Эти атрибуты устанавливают систему координат для холста независимо от любых атрибутов ширины и высоты, полученных из CSS.

Чтобы разрешить это, поместите это сразу после строки, которая находит элемент холста: 

this.canvas.width = this.canvas.offsetWidth;
this.canvas.height = this.canvas.offsetHeight;

Это также работает с коэффициентом масштабирования 96% относительно его родителя.

См. http://jsfiddle.net/alnitak/9JtfW/

Примечание: ваша собственная скрипка не работает, потому что ваш класс Blackboard был создан внутриОбработчик jsfiddle по умолчанию $(document).ready(), поэтому недоступен при вызове из встроенного обработчика в HTML.

0 голосов
/ 17 октября 2011

Конечно, просто вычтите свойства OffsetX и OffsetY вашего DOMElement холста с помощью x и y, которые вы получите.

Это будет работать правильно, пока пользователь не начнет увеличивать изображение, что является довольно сложной проблемой.

...