DWV display example #2.1 draw

DWV image display example with draw activated.

by ivmartel

HTML

<script src="https://cdn.rawgit.com/konvajs/konva/8.3.0/konva.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/i18next/21.6.0/i18next.min.js"></script>
<script src="https://github.com/ivmartel/dwv/releases/download/v0.34.0/dwv-0.34.0.min.js"></script>
<!-- Main container div -->
<div id="dwv">
  <div id="layerGroup0" class="layerGroup"></div>
</div>

CSS

html, body {
  height: 100%;
}

#dwv { height: 80%; }

.layerGroup {
  display: inline-block;
  height: 250px;
  width: 250px;
}

.layer {
  position: absolute;
}

JavaScript

// create the dwv app
var app = new dwv.App();
// tools, shape can be Ruler, Arrow, Rectangle, Circle, Ellipse
var tools = {
  Draw: {
    options: ['Rectangle'],
    type: 'factory'
  }
};
// initialise with the id of the container div
app.init({
  dataViewConfigs: {'*': [{divId: 'layerGroup0'}]},
  tools: tools
});
// activate tool once done loading
app.addEventListener('load', function () {
  app.setTool('Draw');
  app.setToolFeatures({shapeName: tools.Draw.options[0]});
});
// load dicom data
app.loadURLs(['https://raw.githubusercontent.com/ivmartel/dwv/master/tests/data/bbmri-53323851.dcm']);