bvas events

by liu qi

HTML

<div id='box'></div>
<button>红色圆圈有点击事件，黄色圆圈鼠标按住可移动</button>
<!-- <script src="../dist/js/bvas.js"></script> -->
<script src="https://www.bougieblog.cn/bvas.min.js"></script>

CSS

html,
body,
div {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#box {
  position: absolute;
}

button {
  position: absolute;
  right: 0;
  top: 0;
  cursor: pointer;
}

JavaScript

let bvas = new Bvas({
  el: '#box'
})
let layer = new Bvas.Layer().addTo(bvas)
let p1 = new Bvas.Point({
  style: {
    position: [50, 50],
    size: 50,
    color: 'green',
    zIndex: 1,
    cursor: 'text'
  }
}).addTo(layer)
let p2 = new Bvas.Point({
  style: {
    position: [50, 50],
    size: 20,
    color: 'red',
    zIndex: 2,
    cursor: 'pointer'
  }
}).addTo(layer).on('click', function() {
  alert('点击了红色圆圈')
})
let c1 = new Bvas.Circle({
  style: {
    position: [200, 200],
    radius: 100,
    strokeStyle: '#000',
    fillStyle: 'yellow',
    cursor: 'move',
    zIndex: 0
  }
}).addTo(layer)
let drag = false,
  sp = [],
  sc = []
c1.on('mousedown', function(o, e) {
  drag = true
  sp = [e.offsetX, e.offsetY]
  sc = c1.getStyle().position
})
c1.on('mouseup', () => drag = false)

function move(e) {
  if (!drag) return
  let offsetX = e.offsetX - sp[0]
  let offsetY = e.offsetY - sp[1]
  c1.setStyle({
    position: [sc[0] + offsetX, sc[1] + offsetY],
    radius: 100,
    strokeStyle: '#000',
    fillStyle: 'yellow',
    cursor: 'move',
    zIndex: 0
  })
}
document.querySelector('#box').addEventListener('mousemove', move)