Показать сообщение отдельно
  #1 (permalink)  
Старый 10.08.2016, 16:25
Новичок на форуме
Отправить личное сообщение для Morr123 Посмотреть профиль Найти все сообщения от Morr123
 
Регистрация: 09.08.2016
Сообщений: 4

рисование canvas
Делаю простенький редактор фотографий на canvas
Есть такой код
Класс рисования:
function Sketch(name) {
        this.startDrawing = function(e) 
        {
	       this.isDrawing = true;
	       this.context.beginPath();
	       this.context.moveTo(e.pageX - this.canvas.offsetLeft, e.pageY - this.canvas.offsetTop);
        }

        this.draw = function(e) 
        {
	       if (this.isDrawing == true)
	       {
		      var x = e.pageX - this.canvas.offsetLeft;
		      var y = e.pageY - this.canvas.offsetTop;
		      this.context.lineTo(x, y);
		      this.context.stroke();
	       }
        }

        this.stopDrawing = function() 
        {
            this.isDrawing = false;	
        }
    
      this.isDrawing;
        
      this.canvas = document.getElementById(name);
      this.context = this.canvas.getContext("2d");
     // Подключаем требуемые для рисования события
      this.canvas.onmousedown = this.startDrawing.bind(this);
      this.canvas.onmouseup = this.stopDrawing.bind(this);
      this.canvas.onmouseout = this.stopDrawing.bind(this);
      this.canvas.onmousemove = this.draw.bind(this);
      //this.canvas.bind('mousedown mouseup mousemove mouseout', this.onEvent);
      this.context.lineWidth = 4;
      this.context.strokeStyle = '#ff0';
      this.context.lineJoin = "round";
      this.context.lineCap = "round";
};


Т.к. редактор должен быть адаптинвым ширину и выосту картинки приходиться высчитывать пропорционально на js
jQuery(document).ready(function () {    

var block = $('#block-canvas').width();

var new_height = (wcanvas * height) / width;

if(width < block)
{
    $('#sketch').width(width+'px');
}
else
{
    $('#sketch').width('100%'); 
}
    

    var wcanvas = $('#sketch').width();
    var new_height = (wcanvas * height) / width;
    $('#sketch').height(new_height);
 
 var sketch = new Sketch('sketch');

В последней строке я запускаю класс и он работает - рисует НО расположение линий не правильное хотя координаты вроди правильные... вообщем так не объяснить, посмотрите как оно работает сейчас http://w91829a8.bget.ru/photo2/photo...er-install.jpg
соответсвенно нужно что бы рисовалось правильно.
Но если не задавать высоту и ширину с помощью js то рисуется правильно.
В чем проблема может быть?
Ответить с цитированием