Edit this page

Implement Free-Form Drawing

The example below demonstrates how to implement a free-form drawing surface while working with the Kendo UI Drawing API.

Example
    <div id="surface" style="width: 1000px; height: 1000px;border: 1px solid black;cursor: crosshair"></div>
    <script>
      var draw = kendo.drawing;

      var path = new draw.MultiPath({
        stroke: {
          width: 1,
          color: "#000"
        }
      });

      var element = $("#surface")
      var surface = draw.Surface.create(element);
      surface.draw(path);

      element.kendoTouch({
        dragstart: function (e) {
          e.event.preventDefault();
          var point = surfacePoint(e);
          path.moveTo(point.x, point.y);
        },
        drag: function (e) {
          var point = surfacePoint(e);
          path.lineTo(point.x, point.y);
        }
      });

      function surfacePoint(e) {
        e.event.preventDefault();
        var offset = element.offset();
        var x = e.touch.x.location - offset.left;
        var y = e.touch.y.location - offset.top;
        return {
          x: x,
          y: y
        };
      }
    </script>

See Also

Other articles and how-to examples on Kendo UI Drawing API:

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy