JSFiddle - React, Tailwind, and code Playground

by liu qi

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
      html,
      body {
        margin: 0;
        padding: 0
      }

      #c-el {
        height: 800px;
        width: 800px;
        margin: 20px;
        border: 1px solid #333;
        overflow: hidden;
      }

    </style>
  </head>

  <body>
    <div id="c-el"></div>
    <script src="https://www.bougieblog.cn/bvas.min.js"></script>
  </body>

</html>

JavaScript

let bvas = new Bvas({
  el: '#c-el'
})
let layer = new Bvas.Layer().addTo(bvas)
let p1 = new Bvas.Point({
  style: {
    position: [50, 50],
    size: 50,
    color: 'green',
    zIndex: 1,
    cursor: 'pointer'
  }
}).addTo(layer)
let p2 = new Bvas.Point({
  style: {
    position: [50, 50],
    size: 20,
    color: 'red',
    zIndex: 2,
    cursor: 'text'
  }
}).addTo(layer)
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('#c-el').addEventListener('mousemove', move)
let l1 = new Bvas.PolyLine({
  style: {
    points: [
      [100, 100],
      [200, 400],
      [800, 600]
    ],
    strokeStyle: 'red',
    strokeWidth: 7,
    cursor: 'pointer',
    zIndex: 1
  }
}).addTo(layer)