javascript 如何在 React 中访问画布上下文

How to access canvas context in React

提问by cocoa

I made a color pickerwith React and Canvas. Currently the components are rendered in React and canvas is done with vanilla javascript. I'd like to two to mesh more, so I want the click events to be handled with React.

我用 React 和 Canvas制作了一个颜色选择器。目前，组件在 React 中呈现，而 canvas 是使用 vanilla javascript 完成的。我想要两个网格更多，所以我希望用 React 处理点击事件。

For example, this

例如，这

colorStrip.addEventListener("click", click, false);

function click(e) {
  x = e.offsetX;
  y = e.offsetY;
  var imageData = context.getImageData(x, y, 1, 1).data;
  rgbaColor = 'rgba(' + imageData[0] + ',' + imageData[1] + ',' + imageData[2] + ',1)';
  fillGradient();
}

I would hope would be able to translate to this

我希望能够翻译成这个

var ColorPicker = React.createClass({
  colorStripClick: function() {
    //handle click events here
  },
  render: function() {
    var styles = {
      opacity: this.props.isVisible ? '1' : '0'
    };
    return(
      <div id="color-picker" style={styles}>
        <canvas id="color-block" height="150" width="150"></canvas>
        <canvas id="color-strip" height="150" width="30" onClick={this.colorStripClick}></canvas>
      </div>
    );
  }
});

But that doesn't work because I don't know how to access context. How can I get access to the canvas properties with React? Is there a way to access it before the click?

但这不起作用，因为我不知道如何访问context. 如何使用 React 访问画布属性？有没有办法在点击之前访问它？

UPDATE

更新

I used David's answer but I was getting errors by putting a function in refso I did ref="canvasBlock"and ref="canvasStrip"instead and then assigned the context in componentDidMount

我用大卫的答案，但我是通过将一个函数在收到错误信息ref，所以我做ref="canvasBlock"和ref="canvasStrip"代替，然后分配在上下文componentDidMount

采纳答案by David Hellsing

You can add a reffunction attribute on the canvaselement:

您可以ref在canvas元素上添加函数属性：

<canvas id="color-strip" ref={(c) => this.context = c.getContext('2d')} height="...

Then you'll have access to the context through this.context:

然后您将可以通过this.context以下方式访问上下文：

colorStripClick: function() {
    var imageData = this.context.getImageData(x, y, 1, 1).data
}

You can also use the event object to access to DOM node as already pointed out, but this way you'll have access from anywhere, not just event handlers.

您还可以使用事件对象来访问 DOM 节点，正如已经指出的那样，但这样您就可以从任何地方访问，而不仅仅是事件处理程序。

回答by Alex S

In accordance to React16 You can use React.createRef()

根据 React16 可以使用 React.createRef()

class ColorPicker extends React.Component {
constructor(props) {
   super(props);

   this.colorPickerRef = React.createRef();
}

componentDidMount() {
   this.context = this.colorPickerRef.current.getContext('2d');
}

render() {
   return (
      <canvas ref={this.colorPickerRef} />
   )
}
}

回答by Tamizaan

Here's the React way to remove a canvas from your component:

这是从组件中删除画布的 React 方法：

const canvas = ReactDOM.findDOMNode(this.refs.canvas); const context = canvas.getContext('2d'); ctx.clearRect(0, 0, canvas.width, canvas.height);

const canvas = ReactDOM.findDOMNode(this.refs.canvas); const context = canvas.getContext('2d'); ctx.clearRect(0, 0, canvas.width, canvas.height);

As long as you can target the DOM Node the react way, you can pretty much access the Canvas Rendering API.

只要您可以以反应方式定位 DOM 节点，您就可以几乎访问 Canvas Rendering API。

回答by PhilVarg

It should just be accessing the target of the click

它应该只是访问点击的目标

colorStripClick: function(e) {
  var ctx = e.target.getContext('2d')
}

回答by Alexander T.

Like this

像这样

colorStripClick: function (e) {
    var context = e.currentTarget.getContext('2d');
    // your code
}

Example

Example