视网膜上的fabricjs：新对象跳到左上角

Question

我继续我的协作草图工具的工作，并尝试添加对视网膜设备的支持。目前，如果用户在 ipad air 上创建绘图，我有以下行为： small movie

这是我的代码：

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 返回值传递给 Fabric js 画布对象的 SetZoom 方法。我们决定让所有客户端的画布宽高为 4:3，默认尺寸为 1024*768。所以我们根据这个尺寸计算缩放系数。

calculateCanvasSize - 根据 4:3 规则返回画布的宽度和高度。

如果您对如何解决此错误行为有任何想法，请发表您的评论。提前谢谢！

Answer 1

我建议你更新到启用视网膜的 fabricjs 版本（grab 1.6.2）。

如果出于某种原因你不能，我认为问题就在这里：

if (window.devicePixelRatio !== 1) {
   var c = this.FabricCanvas.getElement(); 
   ...
   c.getContext('2d').scale(window.devicePixelRatio, window.devicePixelRatio);
}

getContext 返回一个新的上下文。这不是织物稍后渲染的上下文。如果您想启用视网膜的 lowerCanvas，您必须缩放在 fabric.Canvas 初始化时创建和引用的 this.FabricCanvas.contextContainer。

我建议你还是换成新的面料。