JSFiddle - React, Tailwind, and code Playground

by DynamsoftTeam

HTML

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

  <head>
    <title>DBRJS - Draw Shapes</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/core.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/dce.js"></script>
  </head>

  <body style="width:80vw; height:600px; margin: 0 auto"><br />

    <button id="drawShapes">Click to Draw Shapes</button><br /><br />
    <div id="enhancerUIContainer" style="width:100%; height:100%;"></div>
    <script>
      let cameraEnhancer = null;
      let cameraView = null;
      document.getElementById('drawShapes').onclick = drawShapes;
      (async () => {
          cameraView = await Dynamsoft.DCE.CameraView.createInstance();
          cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView);
          document.getElementById("enhancerUIContainer").appendChild(cameraView.getUIElement());
          await cameraEnhancer.open();
      })();

      function drawShapes() {
        let drawingLayer = cameraView.createDrawingLayer();
        
        let StyleID = Dynamsoft.DCE.DrawingStyleManager.createDrawingStyle({
          fillStyle: "rgba(65, 105, 225, 0.5)",
          fontFamily: "Consolas",
          fontSize: 100,
          lineWidth: 5,
          paintMode: "strokeAndFill",
          strokeStyle: "rgba(65, 105, 225, 1)"
          
        });
        // take new drawing style ID as input parameter
        drawingLayer.setDefaultStyle(StyleID);

        let rect = new Dynamsoft.DCE.RectDrawingItem({x: 100,y: 100,width: 300,height: 300});
        let line = new Dynamsoft.DCE.LineDrawingItem({startPoint:{x: 600, y: 600}, endPoint:{x: 1050, y: 400}});
        let text = new Dynamsoft.DCE.TextDrawingItem("TESTING...",{x: 20,y: 20,width: 100,height: 100});
        let quad = new Dynamsoft.DCE.QuadDrawingItem({points:[{x:600,y:100},{x:500,y:300},{x:700,y:300},{x:700,y:100}]});
        let img = new...