Question

Codepen：https://codepen.io/anon/pen/EvNqyY

使用Canvas，我在画布上创建数千个圆圈，并且画布填充整个视口。我添加了一些平移功能，但是在鼠标释放后我的重绘问题。

基本上用户可以拖动画布（代码方式，这可行），但在视觉上它没有显示任何平移和鼠标释放，画布重新绘制在其原始位置，所以似乎没有任何东西发生了。

JS：

class Account extends Component {
  constructor(props) {
    super(props);

    Meteor.subscribe('userData');

    this.state = {
      user: {}
    }
  }

  componentWillMount() {
    if (!Meteor.userId()) {
      history.replace('/login');
    }
  }

  componentDidMount() {
    console.log(Meteor.userId()); // I can always get this value
    const user = Meteor.users.find({ _id: Meteor.userId() }, {
      fields: { profile: 1 }
    }).fetch();
    console.log(user); // On refresh it is an empty array [].

    this.setState({ user });
  }

  render() {
    return (
      <div>Hello Account</div>
    );
  }
};

export default Account;

Answer 1

ctx.setTransform overwrites the remapping of the (0,0) point done by ctx.translate(). So you should remove the line ctx.setTransform(1, 0, 0, 1, 0, 0); from your draw() function.

HTML Canvas通过鼠标平移

1 个答案: