ivmartel · July 26, 2024 10:36
diff --git a/custom-draw-shape.js b/custom-draw-shape.js
 <!DOCTYPE html>
 <head>
 <style type="text/css">
 body {
  font-family: Arial, Helvetica, sans-serif;
 }
 html, body {
  height: 100%;
 }
 #dwv {
  height: 90%;
 }
 </style>

 <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/konva.min.js"></script>
 <script type="text/javascript" src="../../dwv/dist/dwv.min.js"></script>

 <script type="text/javascript">
 function onDOMContentLoaded() {
  class MyShapeFactory {
    getGroupName() {return 'ruler-group';}
    getNPoints() {return 1;}
    getTimeout() {return 0;}
    isFactoryGroup(group) {
      return this.getGroupName() === group.name();
    }
    create(points, style, viewController) {
      const px = points[0].getX();
      const py = points[0].getY();
      const size = 20;
      // draw shape
      const kshape = new Konva.Line({
        points: [px, py, px - size, py - size, px - 2 * size, py,
          px, py + 4 * size, px + 2 * size, py, px + size, py - size, px, py],
        stroke: style.getLineColour(),
        strokeWidth: style.getStrokeWidth(),
        strokeScaleEnabled: false,
        name: 'shape'
      });
      const group = new Konva.Group();
      group.name(this.getGroupName());
      group.add(kshape);
      group.visible(true); // dont inherit
      return group;
    }
  }
  dwv.toolOptions.draw['MyShapeFactory'] = MyShapeFactory;
  
  // create the dwv app
  const app = new dwv.App();
  // tools, shape can be Ruler, Arrow, Rectangle, Circle, Ellipse
  const tools = {
    Draw: {
      options: ['MyShape'],
      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]});
  });
  app.addEventListener('error', function (event) {
    console.error('error!', event);
  });
  // load dicom data
  app.loadURLs([
    'https://raw.githubusercontent.com/ivmartel/dwv/master/tests/data/bbmri-53323851.dcm'
  ]);
 };

 document.addEventListener('DOMContentLoaded', onDOMContentLoaded);
 </script>

 </head>

 <body>
 <div id='dwv'>
  <div id='layerGroup0'></div>
 </div>
 </body>

 </html>
	<!DOCTYPE html>
	<head>
	<style type="text/css">
	body {
	font-family: Arial, Helvetica, sans-serif;
	}
	html, body {
	height: 100%;
	}
	#dwv {
	height: 90%;
	}
	</style>

	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/konva.min.js"></script>
	<script type="text/javascript" src="../../dwv/dist/dwv.min.js"></script>

	<script type="text/javascript">
	function onDOMContentLoaded() {
	class MyShapeFactory {
	getGroupName() {return 'ruler-group';}
	getNPoints() {return 1;}
	getTimeout() {return 0;}
	isFactoryGroup(group) {
	return this.getGroupName() === group.name();
	}
	create(points, style, viewController) {
	const px = points[0].getX();
	const py = points[0].getY();
	const size = 20;
	// draw shape
	const kshape = new Konva.Line({
	points: [px, py, px - size, py - size, px - 2 * size, py,
	px, py + 4 * size, px + 2 * size, py, px + size, py - size, px, py],
	stroke: style.getLineColour(),
	strokeWidth: style.getStrokeWidth(),
	strokeScaleEnabled: false,
	name: 'shape'
	});
	const group = new Konva.Group();
	group.name(this.getGroupName());
	group.add(kshape);
	group.visible(true); // dont inherit
	return group;
	}
	}
	dwv.toolOptions.draw['MyShapeFactory'] = MyShapeFactory;

	// create the dwv app
	const app = new dwv.App();
	// tools, shape can be Ruler, Arrow, Rectangle, Circle, Ellipse
	const tools = {
	Draw: {
	options: ['MyShape'],
	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]});
	});
	app.addEventListener('error', function (event) {
	console.error('error!', event);
	});
	// load dicom data
	app.loadURLs([
	'https://raw.githubusercontent.com/ivmartel/dwv/master/tests/data/bbmri-53323851.dcm'
	]);
	};

	document.addEventListener('DOMContentLoaded', onDOMContentLoaded);
	</script>

	</head>

	<body>
	<div id='dwv'>
	<div id='layerGroup0'></div>
	</div>
	</body>

	</html>