javascript - 使用侧边栏向 Canvas 上的居中矩形添加一点填充

问题描述

我知道如何在画布上居中一个矩形。我已经看过How do I center a rectangle on a canvas但我也有一个250px侧边栏。

我有以下代码：

<Rect
  width={browser.width}
  height={browser.height}
  x={(win.width - 250 - browser.width) / 2}
  y={(win.height - browser.height) / 2}
  fill="papayawhip"
/>

其中win.width等于window.innerWidth，分别win.height等于window.innerHeight。

browser.width等于win.width - 250250 是我的侧边栏宽度。

我做了答案所说的canvasWidth/2 - rectangleWidth/2。我canvasWidth的是win.width - 250&rectangleWidth是browser.width。

如何为papayawhip矩形添加一点填充？

这是一个最小的 Codesandbox → https://codesandbox.io/s/add-padding-to-centered-canvas-with-sidebar-gqhhl

标签： javascripthtmlcsscanvas

我在构建问题时找到了答案，所以我将其发布。

我必须创建一个pad变量并从矩形宽度中减去它并将它的一半添加到x如下位置：

const pad = 50
<Rect
  width={browser.width - pad}
  height={browser.height}
  x={pad / 2}
  y={(win.height - browser.height) / 2}
  fill="papayawhip"
/>

javascript - 使用侧边栏向 Canvas 上的居中矩形添加一点填充

问题描述

解决方案

推荐阅读