Draw shapes mode

4 posts, 0 answers
  1. Max
    Max avatar
    6 posts
    Member since:
    Feb 2015

    Posted 18 Feb 2015 Link to this post

    Hello. I want to implement future to draw shapes at runtime. In your docs are described, how to draw custom shapes or connections, but there are no info how to paint predefined shapes (Rectangles, Ellipses, Containers, etc.). This future is available only by drag and drop. But how  I can set draw (paint mode) dor mouse, like in MsPaint

    http://joxi.ru/82Qqyg0spOaj2d
  2. Maurício
    Maurício avatar
    41 posts
    Member since:
    Jan 2011

    Posted 18 Feb 2015 in reply to Max Link to this post

    Hello Max

    I have done something like that, maybe it could help you:           

    public class RectangleTool : ToolBase, IMouseListener
    {
        private Point _basePoint;
        private RadDiagramShape _currentShape;
        private bool _isInserting;
     
        public RectangleTool()
        {
            Name = "Rectangle Tool";
        }
     
        public bool MouseDoubleClick(PointerArgs e)
        {
            return false;
        }
     
        public bool MouseMove(PointerArgs e)
        {
            if (IsActive)
            {
                if (_isInserting)
                {
                    var rect = CalculateRectFromBasePoint(_basePoint, e.TransformedPoint);
                    _currentShape.Width = rect.Width;
                    _currentShape.Height = rect.Height;
                    _currentShape.Position = rect.TopLeft();
     
                    return true;
                }
            }
     
            return false;
        }
     
        public bool MouseUp(PointerArgs e)
        {
            return false;
        }
     
        public bool MouseDown(PointerArgs e)
        {
            if (IsActive)
            {
                if (!_isInserting)
                {
                    _basePoint = e.TransformedPoint;
                    _isInserting = true;
     
                    var figure = new PathFigure(new Point(0, 0), new List<PathSegment>
                    {
                        new LineSegment(new Point(0, 100), true),
                        new LineSegment(new Point(100, 100), true),
                        new LineSegment(new Point(100, 0), true)
                    }, true);
     
                    var rectangleGeometry = new PathGeometry(new List<PathFigure> { figure });
     
                    _currentShape = new RadDiagramShape
                    {
                        StrokeDashArray = null,
                        UseDefaultConnectors = false,
                        Width = 1,
                        Height = 1,
                        Position = new Point(_basePoint.X - 0.5, _basePoint.Y - 0.5),
                        Geometry = rectangleGeometry,
                        Background = new SolidColorBrush(Colors.Transparent)
                    };
     
     
                    (Graph as RadDiagram).AddShape(_currentShape);
                }
                else
                {
                    ToolService.DeactivateTool(this);
                    ToolService.ActivatePrimaryTool();
     
                    _isInserting = false;
                }
            }
     
            return false;
        }
     
        protected static Rect CalculateRectFromBasePoint(Point basePoint, Point transformedPoint)
        {
            var width = Math.Abs(basePoint.X - transformedPoint.X);
            var height = Math.Abs(basePoint.Y - transformedPoint.Y);
            var x = Math.Min(basePoint.X, transformedPoint.X);
            var y = Math.Min(basePoint.Y, transformedPoint.Y);
     
            return new Rect(x, y, width, height);
        }
     
        protected override void OnDeactivated()
        {
            base.OnDeactivated();
     
            _isInserting = false;
        }
    }


    Then add the tool to the ToolList:
    var toolsService = Diagram.ServiceLocator.GetService<IToolService>() as ToolService;
     
    toolsService.ToolList.Add(new RectangleTool());

    And activate it whenever you need:
    var toolsService = Diagram.ServiceLocator.GetService<IToolService>() as ToolService;
     
    toolsService.ActivateTool("Rectangle Tool");


    It will insert a rectangle in two clicks, the first one will set the base point and  the second click will deactivate the tool ,creating the shape.
  3. UI for WPF is Visual Studio 2017 Ready
  4. Max
    Max avatar
    6 posts
    Member since:
    Feb 2015

    Posted 19 Feb 2015 in reply to Maurício Link to this post

    Maurício, thank you! Very strangely, that there is no default behavior/mouse tool for this feature.
  5. Pavel R. Pavlov
    Admin
    Pavel R. Pavlov avatar
    1182 posts

    Posted 20 Feb 2015 Link to this post

    Hi Max,

    We have tools that you can use in your particular case. If the default implementation of the tools does not fit your scenario, you can create custom ones that will best fit your scenario. Also, you can take a look at our online Drawing demo to see if any of the demonstrated tools will be suitable for you.

    Regards,
    Pavel R. Pavlov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top