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 canvas对象的SetZoom方法。我们决定让所有客户的画布方面都是4：3，默认尺寸是1024 * 768。因此，基于此尺寸，我们计算缩放系数。

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

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

Answer 1

我建议你更新一个支持视网膜的fabricjs版本（抓住1.6.2）。

如果出于任何原因你无法解决，我认为问题在于：

#include "stdafx.h"
#include <iostream>
#include <conio.h>
using namespace std;
bool gameOver;
const int width=20;
const int height=20;
int x,y,fruitx,fruity,score; //coordinates for head and fruit
enum eDirection {STOP=0, LEFT, RIGHT, UP,DOWN};
eDir direction;

void setup(){
  gameOver=false;
  dir=STOP;
  //initial position of head
  x=width/2;
  y=height/2;
  fruitx=rand()%width;
  fruity=rand()%height;
  score=0;
}

void draw(){
  system("cls");
  int i,j;
  //print the top wall
  for(i=0;i<width;i++)
    cout << "#";
  cout << endl;
  for(i=0;i<height;i++){
    for(j=0;j<width;j++){
      if (j==0)
        cout << "#"; //print the left wall
      if (i==y && j==x)
        cout << "O"; //print the head
      else if (i==fruity && j==fruitx)
        cout << "F"; //print the fruit
      else cout << " "; //print a space character
      if (j==(width-1)) cout << "#"; //print the right wall
    }
    cout << endl;
  }
  //print the bottom wall
  for(i=0;i<width;i++)
    cout << "#";
  cout << endl;
}

void input(){
  if(_kbhit()){
    switch(_getch()){
      case 'a': 
        dir=LEFT;
        break;
      case 'd':
        dir=RIGHT;
        break;
      case 'w':
        dir=UP;
        break;
      case 's':
        dir = DOWN;
        break;
      case 'x':
        gameOver=true;
        break;
    }
  }
}

void logic(){
  switch (dir){
    case LEFT:
      x--;
      break;
    case RIGHT:
      x++;
      break;
    case UP:
      y--;
      break;
    case DOWN:
      y++;
      break;
    default:
      break;
  }
}

int main(){
  setup();
  while(!gameOver){
    draw();
    input();
    logic();
  }
  return 0;
}

getContext返回一个新的上下文。这不是织物稍后渲染的背景。如果你想让retina启用lowerCanvas，你必须缩放在fabric.Canvas初始化时创建和引用的if (window.devicePixelRatio !== 1) { var c = this.FabricCanvas.getElement(); ... c.getContext('2d').scale(window.devicePixelRatio, window.devicePixelRatio); }。

我建议你切换到更新的面料。

视网膜上的织物：新物体跳到左上方

1 个答案: