使用填充向左移动组件

Question

我在 Sketch 组件中使用 p5.js 的视频组件。但是，我无法设置样式。

我想将它向右移动一点，但它卡在我屏幕的最左边。我为 Sketch css 添加了 paddingLeft，但它没有有所作为。

同样的，我想让组件放在屏幕的顶部。但是，它从屏幕中间开始。添加 padding-left 根本没有区别。我相信 Sketch 或 canvas 组件有某种 background/padding 自己的东西，我看不到。

export const Component: React.FC<ComponentProps> = (props: ComponentProps) => {

    let capture: p5Types.Element;
    const setup = (p5: p5Types, canvasParentRef: Element) => {
        p5.createCanvas(390, 240);
        capture = p5.createCapture(p5.VIDEO);
        capture.size(320, 240);
      }
      
      const draw = (p5: p5Types) => {
      }

      
    return <Sketch setup={setup} draw={draw} className="sketch"/>
    ;
};

如何将视频组件移到屏幕右 and/or 顶部？

Codesandbox: https://codesandbox.io/s/objective-wind-yx1gm?file=/src/Video.tsx

Answer 1

看来您不需要 canvas。

https://codesandbox.io/s/purple-pine-lvnyw?file=/src/Video.tsx

发生的事情是一个空 canvas 推下了您的视频

使用填充向左移动组件

move component to the left with padding

javascript

css

html5-canvas

reactjs

p5.js