Vue

by zhouzhijun01

HTML

<div id="app">
  <canvas ref="myCanvas" height="667" width="375"></canvas>
  <div class="btn btn-primary" @click="saveCanvas">
    <span class="btn-text">保存当前状态</span>
  </div>
</div>

CSS

body {
  background: #20262E;
  font-family: Helvetica;
}

#app {
  background: #fff;
  transition: all 0.2s;
  display: flex;
  align-items: flex-start;
}

.btn {
  height: 35px;
  line-height: 35px;
  border: 1px solid #ccc;
  border-radius: 10px;
  background: #eee;
  display: inline-block;
  padding-left: 20px;
  padding-right: 20px;
  cursor: pointer;
}

.btn-primary {}

Vue

let ctx = null
var WIDTH = 375
var HEIGHT = 667
var offsetX = 0
var offsetY = 0
// drag related variables
var dragok = false;
var startX;
var startY;

new Vue({
  el: "#app",
  data: {
  	bg_img_src: 'https://cronus.ministudy.com/dist/static/img/lesson_bg.da0a913.jpg',
    images: [
    	{
      	x: 125 - 15,
        y: 350 - 15,
        width: 120,
        height: 120,
        fill: "#444444",
        path: 'https://cronus.ministudy.com/uploads/deskmate/qr/2018-09-28/939pages-referralhome-referralhome.png',
        isDragging: false
      },
      {
      	x: 125 - 15,
        y: 550 - 15,
        width: 120,
        height: 120,
        fill: "#ff550d",
        path: 'https://cronus.ministudy.com/uploads/deskmate/qr/2018-09-28/939pages-referralshare-referralshare.png',
        isDragging: false
      }
    ]
  },
  created() {
  	let images_str = window.localStorage.getItem('sd_images')
    if (images_str) {
    	let images = JSON.parse(window.localStorage.getItem('sd_images'))
    	this.images = images
    }  	
  },
  mounted() {
		this.drawPoster()
	},
  methods: {
  	drawPoster() {
    	ctx = this.$refs['myCanvas'].getContext('2d')
      
      let bb = this.$refs['myCanvas'].getBoundingClientRect()
      
      offsetX = bb.left
      offsetY = bb.top
      
      this.$refs['myCanvas'].onmousedown = this.myDown
      this.$refs['myCanvas'].onmouseup = this.myUp
      this.$refs['myCanvas'].onmousemove = this.myMove
    	
      let bg_img = new Image()
      bg_img.src = this.bg_img_src
      
      bg_img.addEventListener('load', () => {
        ctx.drawImage(bg_img, 0, 0, WIDTH, HEIGHT)
        ctx.stroke()
        this.drawImages()
      })
    },
    clear() {
    	ctx.clearRect(0, 0, WIDTH, HEIGHT)
    },
    myDown(e) {
    	console.log(e, 'down', offsetX, offsetY)
      e.preventDefault()
    	e.stopPropagation()
      
      var mx = parseInt(e.clientX - offsetX)
      var my = parseInt(e.clientY - offsetY)
      
      dragok = false
      
     ...