javascript - Regular polygon with different height and width -


I want to create a polygon with Kinetic.js and give me width , Height for polygon , rotation and number of digits .

I thought it would be possible using regular multilevel, but for this, I have to set a value for radius. A triangle will be created like this:

  Var hexagon = new kinetic Regular polygon ({x: stage.width () / 2, y: stage.height () / 2, side: 3, radius: 70, fill: 'red',});  

The same polygon is being created here:

The result will look something like this:

But what if I want to make a triangle whose width should be twice the height? Looking at something like this:

Enter image details here

As long as I understand, it is not possible to adjust the radius.

How can I get this for a polygon? Note that I do not know the values ​​of the starting points (although they can be calculated). I think it may be possible to use scaleX and scaleY, but is it possible to achieve it in a simple way? I just want to set the width and height directly.

kineticjs polygon regular polygon (all sides are same

scaling a regular polygon It is strange if you want to stroke the polygon because the stroke is too small and therefore the stroke becomes deformed.

Then your best solution can be to create a multi-line to create just a triangle.

Enter image details here

Example code here And the demo is:

  var stage = new kinetic.Stage ({container: 'container', width: 350, height: 350}); var layer = new Kinetic Layer (); stage.add (Layer); Var PI = Math.PI; Var PI2 = PI * 2; ScaledRegularPolygon (100,100,30,5,2,1, 'Red'); Function Scale Regular Polygon ( Cx, cy, radius, side, scale, scale, scale, fill) {var number = []; (Var i = 0; i & lt; side; i ++) for {var sweep = PI2 / side; Var midbottom = PI / 2; Var Rightbotm = Midbotum-Sweep / 2; Var start = rightbottom-sweep; Var Angel = Start + sweep * i; Var x = cx + radius * Math kos (angle); Var y = cy + radius * Math.sin (angle); X = cx + (x-cx) * scaleX; Y = cy + (y-cy) * scaleY; Points.push (x, y); } Var poly = new kinetic Line ({dot: point, shut: true, fill: fill, stroke: 'black', stroke width: 4}); Layer.add (poly); Layer.draw (); }  
  & lt; Script src = "http://d3lp1msu2r81bx.cloudfront.net/kjs/js/ lib / kinetic-v5.1.0.min.js" & gt; & Lt; / Script & gt; & Lt; Div id = "container" & gt; & Gt; / Div & gt;  


Comments

Popular posts from this blog

java - Can't add JTree to JPanel of a JInternalFrame -

javascript - data.match(var) not working it seems -

javascript - How can I pause a jQuery .each() loop, while waiting for user input? -