Vue

by zhouzhijun01

HTML

<div id="app">
  <canvas ref="myCanvas" height="667" width="375"></canvas>
</div>

CSS

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

#app {
  background: #fff;
  transition: all 0.2s;
}

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
      }
    ]
  },
  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
      
      for (var i = 0; i < this.images.length; i++) {
				var r = this.images[i]
        if (mx > r.x && mx < r.x + r.width && my > r.y && my < r.y + r.height) { 
        	dragok = true
          r.isDragging = true
...