Я продолжаю работу над инструментом совместной эскизы и пытаюсь добавить поддержку устройств сетчатки. В настоящее время я следующее поведение, если пользователь создает рисунок на Ipad воздухе: small moviefabricjs на сетчатке: новый объект прыгает влево
Вот мой код:
this.getZoomLevel = function (height) {
if (height > 1024) {
return 1024/height;
} else {
return height/1024;
}
};
this.calculateCanvasSize = function(pHeight, pWidth) {
var result = {
height: 0,
width: 0
};
while (result.width < pWidth - 1 && result.height < pHeight - 1) {
result.height = result.height + 1;
result.width = result.height * 4/3;
}
return result;
};
this.initCanvas = function() {
try {
var parent = document.getElementsByClassName('komaso-canvas-container')[0];
var canvasSize = this.calculateCanvasSize(parent.clientHeight, parent.clientWidth);
var canvasHtml = "<div id='wrapper-" + this.Id + "' class='whiteboard-canvas-wrapper' data-ng-show='CurrentPage.Id==" + this.Id + "'><canvas width='" + canvasSize.width + "' height='" + canvasSize.height + "' id='whiteboard-" + this.Id + "' class='whiteboard'><p>Your brower does not support Canvas/p></canvas></div>";
$(parent).append($compile(canvasHtml)(scope));
this.Canvaso = document.getElementById(this.HtmlId);
if (!this.Canvaso) {
console.log('Error: Cannot find the imageView canvas element!');
return;
}
if (!this.Canvaso.getContext) {
console.log('Error: no canvas.getContext!');
return;
}
this.FabricCanvas = new fabric.Canvas(this.HtmlId, { selectionColor: 'transparent' });
this.FabricCanvas.setWidth(canvasSize.width);
this.FabricCanvas.setHeight(canvasSize.height);
fabric.Object.prototype.transparentCorners = false;
this.FabricCanvas.on('mouse:down', this.onMouseDown);
this.FabricCanvas.on('mouse:up', this.onMouseUp);
this.FabricCanvas.on('mouse:move', this.onMouseMove);
this.FabricCanvas.on('object:added', this.onObjectAdded);
this.FabricCanvas.on('text:editing:exited', self.onTextObjectEdited);
if (window.devicePixelRatio !== 1) {
var c = this.FabricCanvas.getElement();
var w = c.width, h = c.height;
c.setAttribute('width', w * window.devicePixelRatio);
c.setAttribute('height', h * window.devicePixelRatio);
$(c).width(canvasSize.width);
$(c).height(canvasSize.height);
c.getContext('2d').scale(window.devicePixelRatio, window.devicePixelRatio);
}
this.FabricCanvas.setZoom(this.getZoomLevel(this.Canvaso.height));
this.ToggleTool(self.CurrentTool.ToolName);
this.WhiteboardInitiated = true;
} catch (e) {
console.log(e);
}
};
getZoomLevel возвращает значение для передачи в метод SetZoom из ткани объекта холста расслоения плотных. Мы решили, что все аспекты холста клиента составляют 4: 3, а размер по умолчанию - 1024 * 768. Поэтому, основываясь на этих измерениях, мы вычисляем коэффициент масштабирования.
calculateCanvasSize - возвращает ширину и высоту для холста в соответствии с правилом 4: 3.
Если у вас есть какие-либо идеи, как исправить это неправильное поведение, разместите свой комментарий, пожалуйста. Заранее спасибо!
Какая версия ткани вы используете? – AndreaBogazzi
Привет Андреа. Мы используем 1.6 – dskibin