Creating Polygon based on Template

[Santhoshsvg]

Hi Ulrich,

I would like to ask one question.
I want to draw a triangle using the draw function.
But i dont want the user to click three points in the canvas for creating the triangle.
Instead of that i would like to create a traingle as template. but only as the user expands it the traingle should get expanded.

Is there any way for doing the same.

Thanks in advance.

[Santhoshsvg]

I had used the Invent command for creating the Triangle as follows

SVG.Triangle = SVG.invent({
  // Initialize node
  create: 'polygon'

  // Inherit from
, inherit: SVG.Shape

  // Add parent method
, construct: {
    // Create a wrapped polygon element
    triangle: function(p) {
      return this.put(new SVG.Triangle).plot(p)
    }
  }
})

and while creating, i am creating this triangle as follows

var triDraw = SVG.get('cvs');
var triangleEle = triDraw.triangle('100,100 150,100 125,150').fill('none').stroke({ width: 1 })

[Fuzzyma]

You are almost there. I now can see, that I did a design mistake in this plugin by using the type of the node as key.

But however: You need to add a custom constructor function. In this function you have to set this.type = 'triangle'. Now you can add functions for drawing the triangle.
For testing I would just add triangle to line 239 as follows:

SVG.Element.prototype.draw.extend('rect image triangle', {

I will soon add a feature, to add a type to an already existing draw-function so you can add your triangle to the rect draw function (because thats the function actually used when you want the triangle behave like this).

I did not explained it very well. Please ask when I should clarify a things!

[Santhoshsvg]

Thanks a lot Ulrich,

will try to check the code and implement as you are telling and will come back to you.

[Santhoshsvg]

Hi Ulrich,

I think i am lost somewhere in the code for making the triangle as an template. For your reference, Please find the source code which i had created for making a triangle as an template and drawing the same using the template.

I think now the functionality is totally wierd. I believe i had not implemented as you said.

Can you pls point out what is the error i made on this.

Template-Creation.zip

Thanks in advance!

[Fuzzyma]

Sorry for the long wait. Had to fiddle around myself.
As I mentioned in my comment, you have to adapt the constructor from SVG.Triangle like so:

SVG.Triangle = SVG.invent({
  // Initialize node
  create: function(){
    this.constructor.call(this, SVG.create('polygon'))
    this.type = 'triangle'
  }

  // Inherit from
, inherit: SVG.Shape

  // Add parent method
, construct: {
    // Create a wrapped polygon element
    triangle: function(p) {
      return this.put(new SVG.Triangle).plot(p)
    }
  }
})

In the next step I was mistaken, that you can just take the rect-drawing stuff and use it.
You have to adapt a bit and you get this:

    SVG.Element.prototype.draw.extend('ellipse', {

        init:function(e){
            // We start with a circle with radius 1 at the position of the cursor
            var p = this.startPoint;

            this.el.attr({ cx: p.x, cy: p.y, rx: 1, ry: 1 });

        },

        calc:function (e) {
            var p = this.transformPoint(e.clientX, e.clientY);

            var ellipse = {
                cx: this.startPoint.x,
                cy: this.startPoint.y,
                rx: Math.abs(p.x - this.startPoint.x),
                ry: Math.abs(p.y - this.startPoint.y)
            };

            this.snapToGrid(ellipse);
            this.el.attr(ellipse);
        }

    });


    SVG.Element.prototype.draw.extend('triangle', {

        init:function(e){

            var p = this.startPoint;

            this.el.plot([[p.x-2,p.y],[p.x-1,p.y-1],[p.x,p.y]]);
        },

        calc:function (e) {

            var rect = {
                x: this.startPoint.x,
                y: this.startPoint.y
            },  p = this.transformPoint(e.clientX, e.clientY);

            rect.width = p.x - rect.x;
            rect.height = p.y - rect.y;

            // Snap the params to the grid we specified
            this.snapToGrid(rect);

            // When width is less than one, we have to draw to the left
            // which means we have to move the start-point to the left
            if (rect.width < 1) {
                rect.x = rect.x + rect.width;
                rect.width = -rect.width;
            }

            // ...same with height
            if (rect.height < 1) {
                rect.y = rect.y + rect.height;
                rect.height = -rect.height;
            }

            // needed or math will explode
            if(rect.width < 1 || rect.height < 1) return

            this.el.move(rect.x,rect.y)
            this.el.size(rect.width, rect.height)

        }

    });

Also you have to make sure, that you stop the drawing properly on mouseup:

        templateDraw.on('mouseup', function(event){
            triangleTemp.draw('stop', event);
        });

This way it works for me.
Note, that you can alter the form of the triangle by altering the initial coordinates of the triangle located in the init method.

And now to another topic: Instead of uploading your whole project here please create a fiddle. That has several advantages.
Also: Make sure to locate the code in its own files and dont write it in the core. Its okay for testing but not for production.