This is a migrated thread and some comments may be shown as answers.

Draw shapes mode

3 Answers 212 Views
Diagram
This is a migrated thread and some comments may be shown as answers.
Max
Top achievements
Rank 1
Max asked on 18 Feb 2015, 02:06 PM
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

3 Answers, 1 is accepted

Sort by
0
Maurício
Top achievements
Rank 1
answered on 18 Feb 2015, 04:19 PM
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.
0
Max
Top achievements
Rank 1
answered on 19 Feb 2015, 09:05 AM
MaurĂ­cio, thank you! Very strangely, that there is no default behavior/mouse tool for this feature.
0
Pavel R. Pavlov
Telerik team
answered on 20 Feb 2015, 02:21 PM
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.

 
Tags
Diagram
Asked by
Max
Top achievements
Rank 1
Answers by
Maurício
Top achievements
Rank 1
Max
Top achievements
Rank 1
Pavel R. Pavlov
Telerik team
Share this question
or