Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/440.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/jquery/84.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 为什么形状选择偏移?_Javascript_Jquery_Html_Css_Fabricjs - Fatal编程技术网

Javascript 为什么形状选择偏移?

Javascript 为什么形状选择偏移?,javascript,jquery,html,css,fabricjs,Javascript,Jquery,Html,Css,Fabricjs,我正在使用Fabric.js,遇到了一个类似于下面小提琴中的问题 当我复制并粘贴代码时,我遇到了一个问题,形状选择器似乎位于形状的右下角。在本例中,当我将鼠标悬停在形状上时,无法移动该形状。我只能在从右下角拖动时移动 这把小提琴上没有相同的问题,但当我把代码带到我的机器上时,我有相同的问题 我错过了什么 谢谢 更新 这似乎是我正在使用的电脑。我能够在另一台机器上安装并运行,没有问题。两者都在使用Xampp和firefox。唯一的区别是赢10和赢7,但这会导致问题吗 它们在每台计算机上加载时会有所

我正在使用Fabric.js,遇到了一个类似于下面小提琴中的问题

当我复制并粘贴代码时,我遇到了一个问题,形状选择器似乎位于形状的右下角。在本例中,当我将鼠标悬停在形状上时,无法移动该形状。我只能在从右下角拖动时移动

这把小提琴上没有相同的问题,但当我把代码带到我的机器上时,我有相同的问题

我错过了什么

谢谢

更新

这似乎是我正在使用的电脑。我能够在另一台机器上安装并运行,没有问题。两者都在使用Xampp和firefox。唯一的区别是赢10和赢7,但这会导致问题吗

它们在每台计算机上加载时会有所不同

不使用一个html看起来像这样

<div class="canvas-container" style="width: 300px; height: 300px; position: relative; -moz-user-select: none;">
<canvas id="canvas" class="lower-canvas" height="450" width="450" style="position: absolute; width: 300px; height: 300px; left: 0px; top: 0px; -moz-user-select: none;"></canvas>
<canvas class="upper-canvas " style="position: absolute; width: 300px; height: 300px; left: 0px; top: 0px; -moz-user-select: none; cursor: default;" width="300" height="300"></canvas>
</div>
工作看起来像这样

<div class="canvas-container" style="width: 300px; height: 300px; position: relative; -moz-user-select: none;">
<canvas id="canvas" class="lower-canvas" height="300" width="300" style="position: absolute; width: 300px; height: 300px; left: 0px; top: 0px; -moz-user-select: none;"></canvas>
<canvas class="upper-canvas " style="position: absolute; width: 300px; height: 300px; left: 0px; top: 0px; -moz-user-select: none; cursor: default;" width="300" height="300"></canvas>

为什么该课程的高度和宽度将达到450??

不确定是什么问题,但升级到最新版本的Fabric JS 1.7.2,问题就消失了

我无法在MacOSX、Firefox或Chrome上重现这一点。也许这是坏掉的电脑的延伸。由于无法复制,投票关闭。我在不工作的计算机上的一些浏览器上进行了尝试,但结果相同。我能发布屏幕截图吗?有什么建议可以帮助我进一步解决问题吗?在所有浏览器上,无论我为div维度添加了什么,它都会扩展较低的画布大小。这可能与屏幕的dpi有关。在windows 10中,您的字体有多大?100&oe 150%,125%?这会改变html吗?我的等级被设置为150%,这就是这个班级被扩大到300->450的等级。
<div class="canvas-container" style="width: 300px; height: 300px; position: relative; -moz-user-select: none;">
<canvas id="canvas" class="lower-canvas" height="300" width="300" style="position: absolute; width: 300px; height: 300px; left: 0px; top: 0px; -moz-user-select: none;"></canvas>
<canvas class="upper-canvas " style="position: absolute; width: 300px; height: 300px; left: 0px; top: 0px; -moz-user-select: none; cursor: default;" width="300" height="300"></canvas>