Рисование круга с помощью мыши.

Question

Я пытаюсь нарисовать круг, нажав и перетащив указатель мыши. То, как вы будете делать в PowerPoint или что-то в этом роде. Центр круга появляется в странных местах, и я не могу это объяснить.

Вот jsfiddle: https://jsfiddle.net/h8t3hfa2/2/

Это, как я получить начальную и конечную позицию;

$('#c').mousedown(function(event) { 
    var parentOffset = $(this).offset(); 
    circle = new Circle(); 
    circle.start['x'] = event.pageX - parentOffset.left; 
    circle.start['y'] = event.pageY - parentOffset.top; 

}); 

$('#c').mouseup(function(event) { 
    var parentOffset = $(this).offset(); 
    circle.end['x'] = event.pageX - parentOffset.left; 
    circle.end['y'] = event.pageY - parentOffset.top; 
    circle.draw(canvas[0]); 

}); 

При консолидации журнала средняя точка выглядит правильно, но круг появляется где-то в другом месте. Есть идеи?

Answer 1

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

Быстрое исправление для выравнивания их:

canvas.get(0).width = canvas.width(); 
canvas.get(0).height = canvas.height(); 

https://jsfiddle.net/h8t3hfa2/3/

var Circle = function() { 
 
    this.start = []; 
 
    this.end = []; 
 
} 
 
Circle.prototype.draw = function(canvas) { 
 
    var me = this; 
 

 
    if (canvas.getContext) { 
 
    var ctx = canvas.getContext('2d'); 
 
    var mid = me.getcenter(); 
 
    var rad = me.getradius(); 
 
    console.log(mid, rad); 
 
    ctx.beginPath(); 
 
    console.log(mid['x'], mid['y']); 
 
    ctx.arc(mid['x'], mid['y'], rad, 0, 360); 
 
    ctx.stroke(); 
 
    } 
 

 
}; 
 

 
Circle.prototype.getcenter = function() { 
 
    var me = this; 
 
    //Check the start and end are set 
 
    var centerX = (me.start['x'] + me.end['x'])/2; 
 
    var centerY = (me.start['y'] + me.end['y'])/2; 
 

 
    return { 
 
    'x': centerX, 
 
    'y': centerY 
 
    }; 
 
}; 
 

 
Circle.prototype.getradius = function() { 
 
    var me = this; 
 
    var distX = Math.abs(me.start['x'] - me.end['x']); 
 
    var distY = Math.abs(me.start['y'] - me.end['y']); 
 

 
    return distX/2; 
 
}; 
 

 
var circle; 
 
var canvas = $('#c'); 
 

 
// added only these two lines 
 
canvas.get(0).width = canvas.width(); 
 
canvas.get(0).height = canvas.height(); 
 

 
$('#c').mousedown(function(event) { 
 
    var parentOffset = $(this).offset(); 
 
    circle = new Circle(); 
 
    circle.start['x'] = event.pageX - parentOffset.left; 
 
    circle.start['y'] = event.pageY - parentOffset.top; 
 

 
}); 
 

 
$('#c').mouseup(function(event) { 
 
    var parentOffset = $(this).offset(); 
 
    circle.end['x'] = event.pageX - parentOffset.left; 
 
    circle.end['y'] = event.pageY - parentOffset.top; 
 
    circle.draw(canvas[0]); 
 

 
});

canvas {background-color: white;height: 100%;width: 100%;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<canvas id='c'></canvas>

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

Answer 2

Удаление height: 100%; width: 100%; из стилей исправления устраняет проблему.

Не по теме, но я предлагаю редактирование getradius использовать мин (или более) из distX и distY (вместо жесткого кодирования distX) как приложения, которые вы упомянули.

Circle.prototype.getradius = function() { 
    var me = this; 
    var distX = Math.abs(me.start['x'] - me.end['x'])/2; 
    var distY = Math.abs(me.start['y'] - me.end['y'])/2; 

    return Math.min(distX, distY); 
};