DIR : /home/kozerus/public_html/go/konva10.html

/home/kozerus/public_html/go


Canvas Scrolling Large
view raw

<!DOCTYPE html>
<html>
<head>
<!--	<script src="https://unpkg.com/konva@8.3.0/konva.min.js"></script> -->
	<script src="/go/js/konva_min.js"></script>
	<meta charset="utf-8" />
	<title>Konva Free Drawing Demo</title>
	<style>
		body { 	
			margin: 0; padding: 0; 
			overflow: hidden; 
			background-color: #f0f0f0; 
			}
		</style>
	</head>

<body>
	Tool:
	<select id="tool">
		<option value="brush">Brush</option>
		<option value="eraser">Eraser</option>
		</select>
	<div id="container"></div>
	<script>
		var width = window.innerWidth;
		var height = window.innerHeight - 25;

// first we need Konva core things: stage and layer
		var stage = new Konva.Stage({
			container: 'container',
			width: width,
			height: height,
			});

		var layer = new Konva.Layer();
		stage.add(layer);

      // then we are going to draw into special canvas element
      var canvas = document.createElement('canvas');
      canvas.width = stage.width();
      canvas.height = stage.height();

      // created canvas we can add to layer as "Konva.Image" element
      var image = new Konva.Image({
        image: canvas,
        x: 0,
        y: 0,
      });
      layer.add(image);

      // Good. Now we need to get access to context element
      var context = canvas.getContext('2d');
      context.strokeStyle = '#df4b26';
      context.lineJoin = 'round';
      context.lineWidth = 5;

      var isPaint = false;
      var lastPointerPosition;
      var mode = 'brush';

      // now we need to bind some events
      // we need to start drawing on mousedown
      // and stop drawing on mouseup
      image.on('mousedown touchstart', function () {
        isPaint = true;
        lastPointerPosition = stage.getPointerPosition();
      });

      // will it be better to listen move/end events on the window?

      stage.on('mouseup touchend', function () {
        isPaint = false;
      });

      // and core function - drawing
      stage.on('mousemove touchmove', function () {
        if (!isPaint) {
          return;
        }

        if (mode === 'brush') {
          context.globalCompositeOperation = 'source-over';
        }
        if (mode === 'eraser') {
          context.globalCompositeOperation = 'destination-out';
        }
        context.beginPath();

        var localPos = {
          x: lastPointerPosition.x - image.x(),
          y: lastPointerPosition.y - image.y(),
        };
        context.moveTo(localPos.x, localPos.y);
        var pos = stage.getPointerPosition();
        localPos = {
          x: pos.x - image.x(),
          y: pos.y - image.y(),
        };
			context.lineTo(localPos.x, localPos.y);
			context.closePath();
			context.stroke();

			lastPointerPosition = pos;
// redraw manually
			layer.batchDraw();
			});

		var select = document.getElementById('tool');
		select.addEventListener('change', function () {
			mode = select.value;
			});
		</script>

	</body>
	</html>
//


koh5_pano



Your browser does not support the HTML5 canvas element.
Drag mouse to navigate.

Navigation





17.Aug.2010, Martin Wengenmayer