Question

我的目标是将p5画布作为React网页中动态生成列表的背景。现在，我无法直接影响动态生成的p5画布的样式，因此它在我的<article>中很适合作为背景（z-index：-1）。

这是我的代码：

import React, { Component } from 'react'
import uuidv4 from 'uuid/v4'
import P5Wrapper from 'react-p5-wrapper'
import projectList from './projectList'
import './projects.css'

const TILE_SIZE = 200

export default class Projects extends Component {
  constructor(props) {
    super(props)
    this.state = {
      projects: (projectList || {}).projects || {}
    }
  }

  _list = () => {
    const { projects } = this.state
    const listProjects = projects.map((project) => {
      const { name, description } = project
      return (
        <article 
          key={uuidv4()}
          style={projectContainer}
        >
          <header style={header}>
            {name}
            <p>{description}</p>
          </header>
          <P5Wrapper sketch={sketch} />
        </article>
      )
    })
    return listProjects || null
  }

  render() {
    return (
      <nav style={mainContainer}>
        <section style={projectListContainer}>
          {this._list()}
        </section>
      </nav>
    )
  }
}

const mainContainer = {
  flex: 1,
  display: 'flex',
  flexDirection: 'column',
  justifyContent: 'center',
}

const projectListContainer = {
  flex: 1,
  display: 'flex',
  flexWrap: 'wrap',
  flexDirection: 'row',
  justifyContent: 'center',
  alignItems: 'center',
}

const projectContainer = {
  position: 'relative',
  height: TILE_SIZE,
  width: TILE_SIZE,
  marginTop: 32,
  marginLeft: 32,
  marginRight: 32,
  borderRadius: 32,
  backgroundColor: 'rgba(1,1,1, 0)',
  overflow: 'hidden',
}

const header = {
  display: 'flex',
  flexDirection: 'column',
  justifyContent: 'flex-start',
  alignItems: 'flex-start',
  height: TILE_SIZE,
  width: TILE_SIZE,
  backgroundColor: 'rgba(0,0,0,0)',
  padding: 16,
  color: 'rgb(255,255,255)',
  zIndex: 1,
}

function sketch (p) {
  p.setup = () => {
    let cnv = p.createCanvas(TILE_SIZE, TILE_SIZE, p.WEBGL)
  }
}

我的假设是我可以通过

来设计

<P5Wrapper
  sketch={sketch}
  style={canvas} 
/>

哪个不起作用。或者我必须为<canvas>元素导入一个单独的CSS文件？我宁愿能够直接在同一个文件中影响p5对象。

更新：我查看了生成的DOM元素，基本上<P5Wrapper>注入

<div>
  <canvas />
</div>

我能够通过使用外部CSS导入'./projects.css'来手动影响画布，这是不理想的。我仍然想要一个避免外部CSS仅用于画布的解决方案。

canvas {
  position: absolute;
  top: 0;
  left: 0;
  background-color: blueviolet;
  z-index: -1;
}

Answer 1

我让它与样式组件整齐地工作。有了它，我只能指定此反应组件中的div和canvas元素来影响。

导入：

import P5Wrapper from 'react-p5-wrapper'
import styled from 'styled-components'

更新了渲染：

<ItemContainer key={uuidv4()}>
  <header>
    {name}
    <p>{description}</p>
  </header>
  <P5Wrapper sketch={sketch} /> {/* <div><canvas></div> */}
</ItemContainer>

同一文件中的样式组件：

const ItemContainer = styled.article`
  position: relative;
  height: ${TILE_SIZE}px;
  width: ${TILE_SIZE}px;
  margin-top: 32px;
  margin-left: 32px;
  margin-right: 32px;
  border-radius: 32px;
  overflow: hidden;

  div {
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    height: ${TILE_SIZE}px;
    width: ${TILE_SIZE}px;
  }

  canvas {
    flex: 1;
    background-color: rgba(138,43,226,1);
  }

  header {
    justify-content: flex-start;
    align-items: flex-start;
    height: ${TILE_SIZE - 32}px;
    width: ${TILE_SIZE - 32}px;
    background-color: rgba(0,0,0,0.1);
    padding: 16px;
    color: rgb(255,255,255);
    z-index: 1;
  }
`

由于background-color，我必须删除所有父root，特别是我的z-index: -1。这种行为与导入普通ol＆＃39; CSS只适用于<canvas>元素。

在DOM元素中适合p5画布作为背景

1 个答案: