drawCanvas.vue

<template>
  <div>
    <!-- <el-button v-show="isIcon" style="margin-left: 15px;margin-right: 50px;" class="el-button manage-add-btn el-button--primary" @click="confirmCapture">保存</el-button> -->
    <el-button v-show="isIcon && !isCancel" style="margin-left: 15px;margin-right: 50px;" class="el-button manage-add-btn el-button--primary" @click="cancelCapture">{{$t('dialog.cancel')}}</el-button>
    <el-button v-show="isIcon" style="margin-left: 15px;" class="el-button manage-add-btn el-button--primary" @click="clearCapture">{{$t('button.emptyCanvas')}}</el-button>
    <!-- <el-button v-show="!isIcon" style="margin-left: 15px;margin-right: 50px;" id="capture" class="el-button manage-add-btn el-button--primary" @click="capture">编辑</el-button> -->
    <canvas ref="canvas"></canvas>
  </div>
</template>

<script>
  export default{
    data(){
      return{
        isCancel:false,
        picUrl:'',
        isIcon:false,
        captureCanvas:'',
        locHistory:[],
        isMouseDown:false,
        endTime:new Date().getTime(),
        lastTimestamp:0,
        lastLineWidth:-1,
        lastLoc : {
            x: 0,
            y: 0
        },
        isRemote:'',
        width:'',
        height:''
      }
    },
    methods:{
      createCanvas(pic,width,height,type,isDeal){
        // console.log(pic)
        this.isCancel = width?false:true;
        this.picUrl= pic
        this.width = width
        this.height = height
        this.isRemote = type
        let that = this
        let image = new Image()
        that.$api.videoShopTourReport.getBase64({path: that.picUrl}).then(data => {
          let result = data.data;
          if(result.code == '200'){
            image.src = 'data:image/png;base64,'+result.data
            image.style.width = width?width+'px':'770px'
            image.style.height = height?height+'px':'500px'
            image.crossOrigin = 'Anonymous'
            image.onload = function(){
              that.captureCanvas = that.$refs.canvas;
              that.captureCanvas.width = width?width:'770'
              that.captureCanvas.height = height?height:'500'
              let ctx = that.captureCanvas.getContext("2d");
              ctx.drawImage(image, 0, 0,that.captureCanvas.width,that.captureCanvas.height);
              // let pattern=ctx.createPattern(image,'no-repeat')
              // ctx.fillStyle=pattern;
              // if(!isDeal){
              //    that.$emit('getBase64Str',that.captureCanvas)
              // }
              that.capture()
            }
          }
        });
      },
      cancelCapture(){
        this.isIcon = false;
        this.$emit('getIsRemote',this.isRemote)
      },
      confirmCapture(){
        this.$emit('getBase64Str',this.captureCanvas)
        // if(this.isRemote){
        //   this.$emit('getIsRemote',this.isRemote)
        // }
        // this.closeCapture()
      },
      clearCapture(){
        let context = this.captureCanvas.getContext("2d")
        context.clearRect(0, 0, this.captureCanvas.width, this.captureCanvas.height)
        this.createCanvas(this.picUrl,this.width,this.height)
      },
      closeCapture(){
        this.isIcon = false;
      },
      capture(){
        this.isIcon = true;
        // 绘制
        var context = this.captureCanvas.getContext("2d");
        let _this = this
        this.captureCanvas.onmousedown = function(e) {
          if(!_this.isIcon){
            return
          }
            e.preventDefault();
            _this.beginStroke({
                x: e.clientX,
                y: e.clientY
            })
        }
        this.captureCanvas.onmouseup = function(e) {
            e.preventDefault();
            _this.endStroke()
        }
        this.captureCanvas.onmouseout = function(e) {
            e.preventDefault();
            _this.endStroke()
        }
        this.captureCanvas.onmousemove = function(e) {
            e.preventDefault();
            if (_this.isMouseDown) {
                _this.moveStroke({
                    x: e.clientX,
                    y: e.clientY
                },context)
            }
        }
      },
      beginStroke(point) {
          this.isMouseDown = true
          this.lastTimestamp = new Date().getTime()
          this.lastLoc = this.windowToCanvas(point.x, point.y)
          this.locHistory.push({
              x: this.lastLoc.x,
              y: this.lastLoc.y,
              width: 0,
              t: this.lastTimestamp - this.endTime
          })
      },
      endStroke() {
          this.locHistory.push({
              x: this.lastLoc.x,
              y: this.lastLoc.y,
              width: 0,
              t: 0
          })
          this.isMouseDown = false;
          this.endTime = new Date().getTime()
      },
      moveStroke(point,context) {
          // console.log("mouse move")
          var curLoc = this.windowToCanvas(point.x, point.y)
          var curTimestamp = new Date().getTime();
          var s = this.calcDistance(curLoc, this.lastLoc)
          var t = curTimestamp - this.lastTimestamp;
          var lineWidth = 3
          //draw
          context.beginPath()
          context.moveTo(this.lastLoc.x, this.lastLoc.y)
          context.lineTo(curLoc.x, curLoc.y)

          this.locHistory.push({
              x: curLoc.x,
              y: curLoc.y,
              with: lineWidth,
              t: t
          })

          context.lineWidth = lineWidth
          context.strokeStyle = '#FF0000';
          context.lineCap = "round"
          context.linJoin = "round"
          context.stroke();

          //每次过程结束时，将结束值赋给初始值，一直延续
          this.lastLoc = curLoc
          this.lastTimestamp = curTimestamp
          this.lastLineWidth = lineWidth

      },
      calcDistance(loc1, loc2) {
          return Math.sqrt((loc1.x - loc2.x) * (loc1.x - loc2.x) + (loc1.y - loc2.y) * (loc1.y - loc2
              .y)) //通过起始结束坐标x,y值计算路程长度
      },
      windowToCanvas(x, y) {
          var bbox = this.captureCanvas.getBoundingClientRect(); //获取canvas的位置信息
          return {
              x: Math.round(x - bbox.left),
              y: Math.round(y - bbox.top)
          } //返回当前鼠标相对于canvas的位置
      },
    }
  }
</script>

<style>
</style>