canvas尺寸自适应，canvas点位获取，标尺跟随鼠标移动

React+canvas

React.js

自适应：在less里面设置rem会变形，所以用fontSize在页面设置canvas的尺寸。

父类div：为position: relative，里面的canvas为position: absolute;比较好计算距离屏幕的距离。

标尺跟随鼠标移动：跟随鼠标移动的标尺为position: absolute;比较好计算距离屏幕的距离。

 

class SecondaryZone extends Component {

  state = {

    isBut: {

      isButEdit: true,

      isButReset: false,

      isButSave: false,

    },

    scenemarList: []

  }

  componentDidMount() {

    const { isBut } = this.state

    let { secondaryZone, isButEdit } = this.props

    isBut.isButEdit = isButEdit

    this.setState({ isBut, scenemarList: secondaryZone }, () => {

      this.setCanvas()

    })

  }

// 数值渲染到canvas上面

  setCanvas = () => {

    const { scenemarList } = this.state

    const { fontSize } = this.props

    const c = document.getElementById("canvasBox");

    const cxt = c.getContext("2d");

    cxt.clearRect(0, 0, c.width, c.height);

    cxt.beginPath();

    cxt.strokeStyle = "#000";

    cxt.lineWidth = 0.2 * fontSize;

    cxt.fillStyle = "#000";

    

    if (scenemarList) { 

      cxt.beginPath();

      cxt.strokeStyle = "#FEF448";

      cxt.setLineDash([4, 4]);

      for (var k in scenemarList) {

        if (k === 0) {

          // cxt.moveTo(scenemarList[k][0] / 16 * fontSize, scenemarList[k][1] / 16 * fontSize);

          cxt.moveTo(scenemarList[k][0], scenemarList[k][1]);

        } else {

          // cxt.lineTo(scenemarList[k][0] / 16 * fontSize, scenemarList[k][1] / 16 * fontSize);

          cxt.lineTo(scenemarList[k][0], scenemarList[k][1]);

        }

      }

      cxt.closePath();

      cxt.stroke();

    }

  }

 

  // canvas 点击事件，添加点位

  changeCanvas = (event) => {

    const { isBut } = this.state

    if (isBut.isButSave) {

      const pointTop = document.getElementsByClassName("videoBox")[0].offsetTop

      const pointLeft = document.getElementsByClassName("videoBox")[0].offsetLeft

      const addModalTop = document.getElementsByClassName("secondary")[0].offsetTop

      const addModalLeft = document.getElementsByClassName("secondary")[0].offsetLeft

      const top = event.pageY - pointTop - addModalTop

      const left = event.pageX - pointLeft - addModalLeft

      // console.log("top:", top, top / 16, "   left:", left, left / 16)

      let { scenemarList } = this.state

      const scenemarArr = Object.keys(scenemarList)

      scenemarList[scenemarArr.length] = [left, top]

      this.setState({ scenemarList }, this.setCanvas)

    }

  }

 

  //场景设置，鼠标移动

  canvasMouseMove = (event) => {

    if (document.getElementsByClassName("canvasX")[0]) {

      const pointTop = document.getElementsByClassName("videoBox")[0].offsetTop

      const pointLeft = document.getElementsByClassName("videoBox")[0].offsetLeft

      const addModalTop = document.getElementsByClassName("secondary")[0].offsetTop

      const addModalLeft = document.getElementsByClassName("secondary")[0].offsetLeft

      const top = event.pageY - pointTop - addModalTop

      const left = event.pageX - pointLeft - addModalLeft

      if (event.pageY - top >= 0) {

        document.getElementsByClassName("canvasX")[0].style.top = top + "px";

      }

      if (event.pageX - left >= 0) {

        document.getElementsByClassName("canvasY")[0].style.left = left + "px";

      }

    }

  }

 

  render() {

    const { fontSize, saveModle, cancelModle } = this.props

    const { isBut, scenemarList } = this.state

    return <div className="secondaryZone">

      <div className="videoBac">

        <div className="videoBox">

          <video id="video" width={fontSize * 75.2} height={fontSize * 41.25}></video>

          <canvas id="canvasBox" width={fontSize * 75.2} height={fontSize * 41.25} onClick={this.changeCanvas} onMouseMove={this.canvasMouseMove}></canvas>

          {isBut.isButSave ? <div className="canvasX"></div> : ""}

          {isBut.isButSave ? <div className="canvasY"></div> : ""}

        </div>

      </div>

    </div>

  }

}

export default SecondaryZone

 

 

Less

.secondaryZone {

  min-height: 52rem;

  .videoBac {

    width: 83.13rem;

    height: 50rem;

    background: url(../img/videoBig.svg) no-repeat;

    background-size: 100%;

 

    .videoBox {

      width: 75.2rem;

      height: 41.25rem;

      position: relative;

      z-index: 888;

      right: 0;

      left: 0;

      top: 4.12rem;

      margin: auto;

      > video {

        position: absolute;

        top: 0;

        left: 0;

        transform: rotateY(180deg);

        width: 100%;

        height: 100%;

      }

      #canvasBox {

        position: absolute;

        top: 0;

        left: 0;

        width: 100%;

        height: 100%;

        z-index: 100;

      }

      .canvasX {

        border-top: 1px dashed pink;

        width: 100%;

        position: absolute;

        top: 0;

        left: 0;

      }

      .canvasY {

        border-left: 1px dashed pink;

        width: 1px;

        height: 100%;

        position: absolute;

        top: 0;

        left: 0;

      }

    }

  }

}