~bac/juju-gui/trunkcopy

<p>The <code>Path</code> class creates a shape through the use of drawing methods. The <code>Path</code> class has the following drawing methods available:</p>

1347

1348

<p><ul>

1349

<li><a href="#method_clear"><code>clear</code></a></li>

1350

<li><a href="#method_curveTo"><code>curveTo</code></a></li>

1351

<li><a href="#method_drawRect"><code>drawRect</code></a></li>

1352

<li><a href="#method_drawRoundRect"><code>drawRoundRect</code></a></li>

1353

1354

<li><a href="#method_lineTo"><code>lineTo</code></a></li>

1355

<li><a href="#method_moveTo"><code>moveTo</code></a></li>

1356

<li><a href="#method_quadraticCurveTo"><code>quadraticCurveTo</code></a></li>

1357

</ul></p>

1358

1359

<p><p>Like other shapes, <code>Path</code> elements are created using the <a href="Graphic.html#method_addShape"><code>addShape</code></a> method of the <a href="Graphic.html"><code>Graphic</code></a>

1360

class. The method's <code>cfg</code> argument contains a <code>type</code> attribute. Assigning "path" or <code>Y.Path</code> to this attribute will create a <code>Path</code> instance.

1361

After instantiation, a series of drawing operations must be performed in order to render a shape. The below code instantiates a path element by defining the <code>type</code>

1362

attribute as "path":</p></p>

1363

1364

<pre class="code"><code class="prettyprint"> var myPath = myGraphic.addShape({

1365

type: "path",

1366

fill: {

1367

color: "#9aa"

1368

1369

stroke: {

1370

weight: 1,

1371

color: "#000"

1372

}

1373

});

1374

</code></pre>

1375

1376

<p>Below a <code>Path</code> element with the same properties is instantiated by defining the <code>type</code> attribute with a class reference:</p>

1377

1378

<pre class="code"><code class="prettyprint"> var myPath = myGraphic.addShape({

1379

type: Y.Path,

1380

fill: {

1381

color: "#9aa"

1382

1383

stroke: {

1384

weight: 1,

1385

color: "#000"

1386

}

1387

});

1388

</code></pre>

1389

1390

<p>After instantiation, a shape or segment needs to be drawn for an element to render. After all draw operations are performed, the <a href="#method_end"><code>end</code></a>

1391

method will render the shape. The code below will draw a triangle:</p>

1392

1393

<pre class="code"><code class="prettyprint"> myPath.moveTo(35, 5);

1394

myPath.lineTo(65, 65);

1395

myPath.lineTo(5, 65);

1396

myPath.lineTo(35, 5);

1397

myPath.end();

1398

</code></pre>

1399

1400

<p><code>Path</code> has the following implementations based on browser capability.

1401

<ul>

1402

<li><a href="SVGPath.html"><code>SVGPath</code></a></li>

1403

<li><a href="VMLPath.html"><code>VMLPath</code></a></li>

1404

<li><a href="CanvasPath.html"><code>CanvasPath</code></a></li>

1405

</ul>

1406

It is not necessary to interact with these classes directly. <code>Path</code> will point to the appropriate implemention.</p>

1407

</div>

1408

1409

1410

1411

<h2>Constructor</h2>

1412

1413

1414

1415

1416

1417

1418

1419

1420

1421

1422

1423

1424

1425

1426

1427

1428

1429

1430

1431

1432

1433

1434

1435

<p>

1436

1437

Defined in

1438

1439

1440

1441

1442

<a href="../files/graphics_js_GraphicBase.js.html#l854"><code>graphics/js/GraphicBase.js:854</code></a>

1443

1444

</p>

1445

1446

1447

1448

1449

1450

</div>

1451

1452

1453

1454

</div>

1455

1456

1457

1458

1459

1460

1461

</div>

1462

1463

</div>

1464

1465

1466

1467

1468

<li class="api-class-tab index"><a href="#index">Index</a></li>

1469

1470

1471

<li class="api-class-tab methods"><a href="#methods">Methods</a></li>

1472

1473

1474

1475

<li class="api-class-tab attrs"><a href="#attrs">Attributes</a></li>

1476

1477

1478

</ul>

1479

1480

<div>

1481

1482

<h2 class="off-left">Item Index</h2>

1483

1484

1485

1486

<h3>Methods</h3>

1487

1488

1489

1490

1491

<a href="#method_addClass">addClass</a>

1492

1493

1494

</li>

1495

1496

1497

<a href="#method_clear">clear</a>

1498

1499

1500

</li>

1501

1502

1503

<a href="#method_compareTo">compareTo</a>

1504

1505

1506

</li>

1507

1508

1509

<a href="#method_contains">contains</a>

1510

1511

1512

</li>

1513

1514

1515

<a href="#method_curveTo">curveTo</a>

1516

1517

1518

</li>

1519

1520

1521

<a href="#method_destroy">destroy</a>

1522

1523

1524

</li>

1525

1526

1527

<a href="#method_drawRect">drawRect</a>

1528

1529

1530

</li>

1531

1532

1533

<a href="#method_drawRoundRect">drawRoundRect</a>

1534

1535

1536

</li>

1537

1538

1539

1540

1541

1542

</li>

1543

1544

1545

<a href="#method_getBounds">getBounds</a>

1546

1547

1548

</li>

1549

1550

1551

<a href="#method_getXY">getXY</a>

1552

1553

1554

</li>

1555

1556

1557

1558

1559

1560

</li>

1561

1562

1563

<a href="#method_initializer">initializer</a>

1564

1565

1566

</li>

1567

1568

1569

<a href="#method_lineTo">lineTo</a>

1570

1571

1572

</li>

1573

1574

1575

<a href="#method_moveTo">moveTo</a>

1576

1577

1578

</li>

1579

1580

1581

<a href="#method_quadraticCurveTo">quadraticCurveTo</a>

1582

1583

1584

</li>

1585

1586

1587

<a href="#method_removeClass">removeClass</a>

1588

1589

1590

</li>

1591

1592

1593

<a href="#method_rotate">rotate</a>

1594

1595

1596

</li>

1597

1598

1599

<a href="#method_scale">scale</a>

1600

1601

1602

</li>

1603

1604

1605

1606

1607

1608

</li>

1609

1610

1611

<a href="#method_setXY">setXY</a>

1612

1613

1614

</li>

1615

1616

1617

1618

1619

1620

</li>

1621

1622

1623

<a href="#method_skewX">skewX</a>

1624

1625

1626

</li>

1627

1628

1629

<a href="#method_skewY">skewY</a>

1630

1631

1632

</li>

1633

1634

1635

1636

1637

1638

</li>

1639

1640

1641

<a href="#method_translate">translate</a>

1642

1643

1644

</li>

1645

1646

1647

<a href="#method_translateX">translateX</a>

1648

1649

1650

</li>

1651

1652

1653

<a href="#method_translateY">translateY</a>

1654

1655

1656

</li>

1657

1658

</ul>

1659

</div>

1660

1661

1662

1663

1664

1665

1666

<h3>Attributes</h3>

1667

1668

1669

1670

1671

1672

</li>

1673

1674

1675

<a href="#attr_graphic">graphic</a>

1676

</li>

1677

1678

1679

<a href="#attr_height">height</a>

1680

</li>

1681

1682

1683

1684

</li>

1685

1686

1687

1688

</li>

1689

1690

1691

1692

</li>

1693

1694

1695

<a href="#attr_stroke">stroke</a>

1696

</li>

1697

1698

1699

<a href="#attr_transform">transform</a>

1700

</li>

1701

1702

1703

<a href="#attr_transformOrigin">transformOrigin</a>

1704

</li>

1705

1706

1707

<a href="#attr_visible">visible</a>

1708

</li>

1709

1710

1711

<a href="#attr_width">width</a>

1712

</li>

1713

1714

1715

1716

</li>

1717

1718

1719

1720

</li>

1721

1722

</ul>

1723

</div>

1724

1725

1726

1727

</div>

1728

1729

1730

1731

<h2 class="off-left">Methods</h2>

1732

1733

1734

1735

<h3 class="name"><code>addClass</code></h3>

1736

1737

1738

1739

1740

1741

1742

1743

<code>className</code>

1744

1745

</li>

1746

1747

</ul><span class="paren">)</span>

1748

</div>

1749

1750

1751

1752

1753

1754

1755

1756

1757

1758

1759

1760

1761

1762

1763

1764

1765

1766

<p>Inherited from

1767

<a href="../classes/Shape.html#method_addClass">Shape</a>:

1768

1769

1770

1771

<a href="../files/graphics_js_GraphicBase.js.html#l398"><code>graphics/js/GraphicBase.js:398</code></a>

1772

1773

</p>

1774

1775

1776

1777

1778

1779

</div>

1780

1781

1782

<p>Add a class name to each node.</p>

1783

</div>

1784

1785

1786

1787

<h4>Parameters:</h4>

1788

1789

1790

1791

1792

1793

<code class="param-name">className</code>

1794

<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>

1795

1796

1797

1798

1799

1800

<p>the class name to add to the node's class attribute</p>

1801

</div>

1802

1803

1804

</li>

1805

1806

</ul>

1807

</div>

1808

1809

1810

1811

1812

1813

</div>

1814

1815

1816

1817

<h3 class="name"><code>clear</code></h3>

1818

1819

1820

1821

1822

1823

1824

1825

1826

1827

1828

1829

1830

1831

1832

1833

1834

1835

1836

1837

1838

<p>Inherited from

1839

<a href="../classes/Drawing.html#method_clear">Drawing</a>:

1840

1841

1842

1843

<a href="../files/graphics_js_GraphicBase.js.html#l353"><code>graphics/js/GraphicBase.js:353</code></a>

1844

1845

</p>

1846

1847

1848

1849

1850

1851

</div>

1852

1853

1854

<p>Clears the path.</p>

1855

</div>

1856

1857

1858

1859

1860

1861

1862

</div>

1863

1864

1865

1866

<h3 class="name"><code>compareTo</code></h3>

1867

1868

1869

1870

1871

1872

1873

1874

<code>refNode</code>

1875

1876

</li>

1877

1878

</ul><span class="paren">)</span>

1879

</div>

1880

1881

1882

1883

1884

<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a></span>

1885

</span>

1886

1887

1888

1889

1890

1891

1892

1893

1894

1895

1896

1897

1898

1899

1900

1901

<p>Inherited from

1902

<a href="../classes/Shape.html#method_compareTo">Shape</a>:

1903

1904

1905

1906

<a href="../files/graphics_js_GraphicBase.js.html#l429"><code>graphics/js/GraphicBase.js:429</code></a>

1907

1908

</p>

1909

1910

1911

1912

1913

1914

</div>

1915

1916

1917

<p>Compares nodes to determine if they match.

1918

Node instances can be compared to each other and/or HTMLElements.</p>

1919

</div>

1920

1921

1922

1923

<h4>Parameters:</h4>

1924

1925

1926

1927

1928

1929

<code class="param-name">refNode</code>

1930

<span class="type"><a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a> | <a href="../classes/Node.html" class="crosslink">Node</a></span>

1931

1932

1933

1934

1935

1936

<p>The reference node to compare to the node.</p>

1937

</div>

1938

1939

1940

</li>

1941

1942

</ul>

1943

</div>

1944

1945

1946

1947

1948

<h4>Returns:</h4>

1949

1950

1951

1952

1953

<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a></span>:

1954

1955

True if the nodes match, false if they do not.

1956

1957

</div>

1958

</div>

1959

1960

1961

1962

</div>

1963

1964

1965

1966

<h3 class="name"><code>contains</code></h3>

1967

1968

1969

1970

1971

1972

1973

1974

<code>needle</code>

1975

1976

</li>

1977

1978

</ul><span class="paren">)</span>

1979

</div>

1980

1981

1982

1983

1984

1985

</span>

1986

1987

1988

1989

1990

1991

1992

1993

1994

1995

1996

1997

1998

1999

2000

2001

<p>Inherited from

2002

<a href="../classes/Shape.html#method_contains">Shape</a>:

2003

2004

2005

2006

<a href="../files/graphics_js_GraphicBase.js.html#l422"><code>graphics/js/GraphicBase.js:422</code></a>

2007

2008

</p>

2009

2010

2011

2012

2013

2014

</div>

2015

2016

2017

<p>Determines whether the node is an ancestor of another HTML element in the DOM hierarchy.</p>

2018

</div>

2019

2020

2021

2022

<h4>Parameters:</h4>

2023

2024

2025

2026

2027

2028

<code class="param-name">needle</code>

2029

<span class="type"><a href="../classes/Shape.html" class="crosslink">Shape</a> | <a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>

2030

2031

2032

2033

2034

2035

<p>The possible node or descendent</p>

2036

</div>

2037

2038

2039

</li>

2040

2041

</ul>

2042

</div>

2043

2044

2045

2046

2047

<h4>Returns:</h4>

2048

2049

2050

2051

2052

Boolean Whether or not this shape is the needle or its ancestor.

2053

2054

</div>

2055

</div>

2056

2057

2058

2059

</div>

2060

2061

2062

2063

<h3 class="name"><code>curveTo</code></h3>

2064

2065

2066

2067

2068

2069

2070

2071

2072

2073

</li>

2074

2075

2076

2077

2078

2079

</li>

2080

2081

2082

2083

2084

2085

</li>

2086

2087

2088

2089

2090

2091

</li>

2092

2093

2094

2095

2096

2097

</li>

2098

2099

2100

2101

2102

2103

</li>

2104

2105

</ul><span class="paren">)</span>

2106

</div>

2107

2108

2109

2110

2111

2112

2113

2114

2115

2116

2117

2118

2119

2120

2121

2122

2123

2124

<p>Inherited from

2125

<a href="../classes/Drawing.html#method_curveTo">Drawing</a>:

2126

2127

2128

2129

<a href="../files/graphics_js_GraphicBase.js.html#l308"><code>graphics/js/GraphicBase.js:308</code></a>

2130

2131

</p>

2132

2133

2134

2135

2136

2137

</div>

2138

2139

2140

<p>Draws a bezier curve.</p>

2141

</div>

2142

2143

2144

2145

<h4>Parameters:</h4>

2146

2147

2148

2149

2150

2151

2152

<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>

2153

2154

2155

2156

2157

2158

<p>x-coordinate for the first control point.</p>

2159

</div>

2160

2161

2162

</li>

2163

2164

2165

2166

2167

<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>

2168

2169

2170

2171

2172

2173

<p>y-coordinate for the first control point.</p>

2174

</div>

2175

2176

2177

</li>

2178

2179

2180

2181

2182

<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>

2183

2184

2185

2186

2187

2188

<p>x-coordinate for the second control point.</p>

2189

</div>

2190

2191

2192

</li>

2193

2194

2195

2196

2197

<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>

2198

2199

2200

2201

2202

2203

<p>y-coordinate for the second control point.</p>

2204

</div>

2205

2206

2207

</li>

2208

2209

2210

2211

2212

<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>

2213

2214

2215

2216

2217

2218

<p>x-coordinate for the end point.</p>

2219

</div>

2220

2221

2222

</li>

2223

2224

2225

2226

2227

<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>

2228

2229

2230

2231

2232

2233

<p>y-coordinate for the end point.</p>

2234

</div>

2235

2236

2237

</li>

2238

2239

</ul>

2240

</div>

2241

2242

2243

2244

2245

2246

</div>

2247

2248

2249

2250

<h3 class="name"><code>destroy</code></h3>

2251

2252

2253

2254

2255

2256

2257

2258

2259

2260

2261

2262

2263

2264

2265

2266

2267

2268

2269

2270

2271

<p>Inherited from

2272

<a href="../classes/Shape.html#method_destroy">Shape</a>:

2273

2274

2275

2276

<a href="../files/graphics_js_GraphicBase.js.html#l513"><code>graphics/js/GraphicBase.js:513</code></a>

2277

2278

</p>

2279

2280

2281

2282

2283

2284

</div>

2285

2286

2287

<p>Destroys the instance.</p>

2288

</div>

2289

2290

2291

2292

2293

2294

2295

</div>

2296

2297

2298

2299

<h3 class="name"><code>drawRect</code></h3>

2300

2301

2302

2303

2304

2305

2306

2307

2308

2309

</li>

2310

2311

2312

2313

2314

2315

</li>

2316

2317

2318

2319

2320

2321

</li>

2322

2323

2324

2325

2326

2327

</li>

2328

2329

</ul><span class="paren">)</span>

2330

</div>

2331

2332

2333

2334

2335

2336

2337

2338

2339

2340

2341

2342

2343

2344

2345

2346

2347

2348

<p>Inherited from

2349

<a href="../classes/Drawing.html#method_drawRect">Drawing</a>:

2350

2351

2352

2353

<a href="../files/graphics_js_GraphicBase.js.html#l328"><code>graphics/js/GraphicBase.js:328</code></a>

2354

2355

</p>

2356

2357

2358

2359

2360

2361

</div>

2362

2363

2364

<p>Draws a rectangle.</p>

2365

</div>

2366

2367

2368

2369

<h4>Parameters:</h4>

2370

2371

2372

2373

2374

2375

2376

<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>

2377

2378

2379

2380

2381

2382

<p>x-coordinate</p>

2383

</div>

2384

2385

2386

</li>

2387

2388

2389

2390

2391

<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>

2392

2393

2394

2395

2396

2397

<p>y-coordinate</p>

2398

</div>

2399

2400

2401

</li>

2402

2403

2404

2405

2406

<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>

2407

2408

2409

2410

2411

2412

<p>width</p>

2413

</div>

2414

2415

2416

</li>

2417

2418

2419

2420

2421

<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>

2422

2423

2424

2425

2426

2427

<p>height</p>

2428

</div>

2429

2430

2431

</li>

2432

2433

</ul>

2434

</div>

2435

2436

2437

2438

2439

2440

</div>

2441

2442

2443

2444

<h3 class="name"><code>drawRoundRect</code></h3>

2445

2446

2447

2448

2449

2450

2451

2452

2453

2454

</li>

2455

2456

2457

2458

2459

2460

</li>

2461

2462

2463

2464

2465

2466

</li>

2467

2468

2469

2470

2471

2472

</li>

2473

2474

2475

2476

2477

2478

</li>

2479

2480

2481

2482

2483

2484

</li>

2485

2486

</ul><span class="paren">)</span>

2487

</div>

2488

2489

2490

2491

2492

2493

2494

2495

2496

2497

2498

2499

2500

2501

2502

2503

2504

2505

<p>Inherited from

2506

<a href="../classes/Drawing.html#method_drawRoundRect">Drawing</a>:

2507

2508

2509

2510

<a href="../files/graphics_js_GraphicBase.js.html#l337"><code>graphics/js/GraphicBase.js:337</code></a>

2511

2512

</p>

2513

2514

2515

2516

2517

2518

</div>

2519

2520

2521

<p>Draws a rectangle with rounded corners.</p>

2522

</div>

2523

2524

2525

2526

<h4>Parameters:</h4>

2527

2528

2529

2530

2531

2532

2533

<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>

2534

2535

2536

2537

2538

2539

<p>x-coordinate</p>

2540

</div>

2541

2542

2543

</li>

2544

2545

2546

2547

2548

<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>

2549

2550

2551

2552

2553

2554

<p>y-coordinate</p>

2555

</div>

2556

2557

2558

</li>

2559

2560

2561

2562

2563

<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>

2564

2565

2566

2567

2568

2569

<p>width</p>

2570

</div>

2571

2572

2573

</li>

2574

2575

2576

2577

2578

<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>

2579

2580

2581

2582

2583

2584

<p>height</p>

2585

</div>

2586

2587

2588

</li>

2589

2590

2591

2592

2593

<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>

2594

2595

2596

2597

2598

2599

<p>width of the ellipse used to draw the rounded corners</p>

2600

</div>

2601

2602

2603

</li>

2604

2605

2606

2607

2608

<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>

2609

2610

2611

2612

2613

2614

<p>height of the ellipse used to draw the rounded corners</p>

2615

</div>

2616

2617

2618

</li>

2619

2620

</ul>

2621

</div>

2622

2623

2624

2625

2626

2627

</div>

2628

2629

2630

2631

2632

2633

2634

2635

2636

2637

2638

2639

2640

2641

2642

2643

2644

2645

2646

2647

2648

2649

2650

2651

2652

<p>Inherited from

2653

<a href="../classes/Drawing.html#method_end">Drawing</a>:

2654

2655

2656

2657

<a href="../files/graphics_js_GraphicBase.js.html#l348"><code>graphics/js/GraphicBase.js:348</code></a>

2658

2659

</p>

2660

2661

2662

2663

2664

2665

</div>

2666

2667

2668

<p>Completes a drawing operation.</p>

2669

</div>

2670

2671

2672

2673

2674

2675

2676

</div>

2677

2678

2679

2680

<h3 class="name"><code>getBounds</code></h3>

2681

2682

2683

2684

2685

2686

2687

2688

2689

</span>

2690

2691

2692

2693

2694

2695

2696

2697

2698

2699

2700

2701

2702

2703

2704

2705

<p>Inherited from

2706

<a href="../classes/Shape.html#method_getBounds">Shape</a>:

2707

2708

2709

2710

<a href="../files/graphics_js_GraphicBase.js.html#l504"><code>graphics/js/GraphicBase.js:504</code></a>

2711

2712

</p>

2713

2714

2715

2716

2717

2718

</div>

2719

2720

2721

<p>Returns the bounds for a shape.</p>

2722

2723

<p>Calculates the a new bounding box from the original corner coordinates (base on size and position) and the transform matrix.

2724

The calculated bounding box is used by the graphic instance to calculate its viewBox.</p>

2725

</div>

2726

2727

2728

2729

2730

2731

<h4>Returns:</h4>

2732

2733

2734

2735

2736

Object

2737

2738

</div>

2739

</div>

2740

2741

2742

2743

</div>

2744

2745

2746

2747

<h3 class="name"><code>getXY</code></h3>

2748

2749

2750

2751

2752

2753

2754

2755

2756

</span>

2757

2758

2759

2760

2761

2762

2763

2764

2765

2766

2767

2768

2769

2770

2771

2772

<p>Inherited from

2773

<a href="../classes/Shape.html#method_getXY">Shape</a>:

2774

2775

2776

2777

<a href="../files/graphics_js_GraphicBase.js.html#l410"><code>graphics/js/GraphicBase.js:410</code></a>

2778

2779

</p>

2780

2781

2782

2783

2784

2785

</div>

2786

2787

2788

<p>Gets the current position of the node in page coordinates.</p>

2789

</div>

2790

2791

2792

2793

2794

2795

<h4>Returns:</h4>

2796

2797

2798

2799

2800

Array The XY position of the shape.

2801

2802

</div>

2803

</div>

2804

2805

2806

2807

</div>

2808

2809

2810

2811

2812

2813

2814

2815

2816

2817

2818

2819

2820

2821

2822

<span class="flag protected">protected</span>

2823

2824

2825

2826

2827

2828

2829

2830

2831

2832

2833

2834

<p>Inherited from

2835

<a href="../classes/Shape.html#method_init">Shape</a>:

2836

2837

2838

2839

<a href="../files/graphics_js_GraphicBase.js.html#l385"><code>graphics/js/GraphicBase.js:385</code></a>

2840

2841

</p>

2842

2843

2844

2845

2846

2847

</div>

2848

2849

2850

<p>Init method, invoked during construction.

2851

Calls <code>initializer</code> method.</p>

2852

</div>

2853

2854

2855

2856

2857

2858

2859

</div>

2860

2861

2862

2863

<h3 class="name"><code>initializer</code></h3>

2864

2865

2866

2867

2868

2869

2870

2871

2872

2873

2874

<span class="flag private">private</span>

2875

2876

2877

2878

2879

2880

2881

2882

2883

2884

2885

2886

<p>Inherited from

2887

<a href="../classes/Shape.html#method_initializer">Shape</a>:

2888

2889

2890

2891

<a href="../files/graphics_js_GraphicBase.js.html#l392"><code>graphics/js/GraphicBase.js:392</code></a>

2892

2893

</p>

2894

2895

2896

2897

2898

2899

</div>

2900

2901

2902

<p>Initializes the shape</p>

2903

</div>

2904

2905

2906

2907

2908

2909

2910

</div>

2911

2912

2913

2914

<h3 class="name"><code>lineTo</code></h3>

2915

2916

2917

2918

2919

2920

2921

2922

<code>point1</code>

2923

2924

</li>

2925

2926

2927

2928

<code>point2</code>

2929

2930

</li>

2931

2932

</ul><span class="paren">)</span>

2933

</div>

2934

2935

2936

2937

2938

2939

2940

2941

2942

2943

2944

2945

2946

2947

2948

2949

2950

2951

<p>Inherited from

2952

<a href="../classes/Drawing.html#method_lineTo">Drawing</a>:

2953

2954

2955

2956

<a href="../files/graphics_js_GraphicBase.js.html#l294"><code>graphics/js/GraphicBase.js:294</code></a>

2957

2958

</p>

2959

2960

2961

2962

2963

2964

</div>

2965

2966

2967

<p>Draws a line segment using the current line style from the current drawing position to the specified x and y coordinates.</p>

2968

</div>

2969

2970

2971

2972

<h4>Parameters:</h4>

2973

2974

2975

2976

2977

2978

<code class="param-name">point1</code>

2979

<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>

2980

2981

2982

2983

2984

2985

<p>x-coordinate for the end point.</p>

2986

</div>

2987

2988

2989

</li>

2990

2991

2992

2993

<code class="param-name">point2</code>

2994

<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>

2995

2996

2997

2998

2999

3000

<p>y-coordinate for the end point.</p>

3001

</div>

3002

3003

3004

</li>

3005

3006

</ul>

3007

</div>

3008

3009

3010

3011

3012

3013

</div>

3014

3015

3016

3017

<h3 class="name"><code>moveTo</code></h3>

3018

3019

3020

3021

3022

3023

3024

3025

3026

3027

</li>

3028

3029

3030

3031

3032

3033

</li>

3034

3035

</ul><span class="paren">)</span>

3036

</div>

3037

3038

3039

3040

3041

3042

3043

3044

3045

3046

3047

3048

3049

3050

3051

3052

3053

3054

<p>Inherited from

3055

<a href="../classes/Drawing.html#method_moveTo">Drawing</a>:

3056

3057

3058

3059

<a href="../files/graphics_js_GraphicBase.js.html#l301"><code>graphics/js/GraphicBase.js:301</code></a>

3060

3061

</p>

3062

3063

3064

3065

3066

3067

</div>

3068

3069

3070

<p>Moves the current drawing position to specified x and y coordinates.</p>

3071

</div>

3072

3073

3074

3075

<h4>Parameters:</h4>

3076

3077

3078

3079

3080

3081

3082

<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>

3083

3084

3085

3086

3087

3088

<p>x-coordinate for the end point.</p>

3089

</div>

3090

3091

3092

</li>

3093

3094

3095

3096

3097

<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>

3098

3099

3100

3101

3102

3103

<p>y-coordinate for the end point.</p>

3104

</div>

3105

3106

3107

</li>

3108

3109

</ul>

3110

</div>

3111

3112

3113

3114

3115

3116

</div>

3117

3118

3119

3120

<h3 class="name"><code>quadraticCurveTo</code></h3>

3121

3122

3123

3124

3125

3126

3127

3128

3129

3130

</li>

3131

3132

3133

3134

3135

3136

</li>

3137

3138

3139

3140

3141

3142

</li>

3143

3144

3145

3146

3147

3148

</li>

3149

3150

</ul><span class="paren">)</span>

3151

</div>

3152

3153

3154

3155

3156

3157

3158

3159

3160

3161

3162

3163

3164

3165

3166

3167

3168

3169

<p>Inherited from

3170

<a href="../classes/Drawing.html#method_quadraticCurveTo">Drawing</a>:

3171

3172

3173

3174

<a href="../files/graphics_js_GraphicBase.js.html#l319"><code>graphics/js/GraphicBase.js:319</code></a>

3175

3176

</p>

3177

3178

3179

3180

3181

3182

</div>

3183

3184

3185

<p>Draws a quadratic bezier curve.</p>

3186

</div>

3187

3188

3189

3190

<h4>Parameters:</h4>

3191

3192

3193

3194

3195

3196

3197

<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>

3198

3199

3200

3201

3202

3203

<p>x-coordinate for the control point.</p>

3204

</div>

3205

3206

3207

</li>

3208

3209

3210

3211

3212

<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>

3213

3214

3215

3216

3217

3218

<p>y-coordinate for the control point.</p>

3219

</div>

3220

3221

3222

</li>

3223

3224

3225

3226

3227

<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>

3228

3229

3230

3231

3232

3233

<p>x-coordinate for the end point.</p>

3234

</div>

3235

3236

3237

</li>

3238

3239

3240

3241

3242

<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>

3243

3244

3245

3246

3247

3248

<p>y-coordinate for the end point.</p>

3249

</div>

3250

3251

3252

</li>

3253

3254

</ul>

3255

</div>

3256

3257

3258

3259

3260

3261

</div>

3262

3263

3264

3265

<h3 class="name"><code>removeClass</code></h3>

3266

3267

3268

3269

3270

3271

3272

3273

<code>className</code>

3274

3275

</li>

3276

3277

</ul><span class="paren">)</span>

3278

</div>

3279

3280

3281

3282

3283

3284

3285

3286

3287

3288

3289

3290

3291

3292

3293

3294

3295

3296

<p>Inherited from

3297

<a href="../classes/Shape.html#method_removeClass">Shape</a>:

3298

3299

3300

3301

<a href="../files/graphics_js_GraphicBase.js.html#l404"><code>graphics/js/GraphicBase.js:404</code></a>

3302

3303

</p>

3304

3305

3306

3307

3308

3309

</div>

3310

3311

3312

<p>Removes a class name from each node.</p>

3313

</div>

3314

3315

3316

3317

<h4>Parameters:</h4>

3318

3319

3320

3321

3322

3323

<code class="param-name">className</code>

3324

<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>

3325

3326

3327

3328

3329

3330

<p>the class name to remove from the node's class attribute</p>

3331

</div>

3332

3333

3334

</li>

3335

3336

</ul>

3337

</div>

3338

3339

3340

3341

3342

3343

</div>

3344

3345

3346

3347

<h3 class="name"><code>rotate</code></h3>

3348

3349

3350

3351

3352

3353

3354

3355

3356

3357

</li>

3358

3359

</ul><span class="paren">)</span>

3360

</div>

3361

3362

3363

3364

3365

3366

3367

3368

3369

3370

3371

3372

3373

3374

3375

3376

3377

3378

<p>Inherited from

3379

<a href="../classes/Shape.html#method_rotate">Shape</a>:

3380

3381

3382

3383

<a href="../files/graphics_js_GraphicBase.js.html#l492"><code>graphics/js/GraphicBase.js:492</code></a>

3384

3385

</p>

3386

3387

3388

3389

3390

3391

</div>

3392

3393

3394

<p>Rotates the shape clockwise around it transformOrigin.</p>

3395

</div>

3396

3397

3398

3399

<h4>Parameters:</h4>

3400

3401

3402

3403

3404

3405

3406

<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>

3407

3408

3409

3410

3411

3412

<p>The degree of the rotation.</p>

3413

</div>

3414

3415

3416

</li>

3417

3418

</ul>

3419

</div>

3420

3421

3422

3423

3424

3425

</div>

3426

3427

3428

3429

<h3 class="name"><code>scale</code></h3>

3430

3431

3432

3433

3434

3435

3436

3437

3438

3439

</li>

3440

3441

</ul><span class="paren">)</span>

3442

</div>

3443

3444

3445

3446

3447

3448

3449

3450

3451

3452

3453

3454

3455

3456

3457

3458

3459

3460

<p>Inherited from

3461

<a href="../classes/Shape.html#method_scale">Shape</a>:

3462

3463

3464

3465

<a href="../files/graphics_js_GraphicBase.js.html#l498"><code>graphics/js/GraphicBase.js:498</code></a>

3466

3467

</p>

3468

3469

3470

3471

3472

3473

</div>

3474

3475

3476

<p>Specifies a 2d scaling operation.</p>

3477

</div>

3478

3479

3480

3481

<h4>Parameters:</h4>

3482

3483

3484

3485

3486

3487

3488

<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>

3489

3490

3491

3492

3493

3494

3495

</div>

3496

3497

3498

</li>

3499

3500

</ul>

3501

</div>

3502

3503

3504

3505

3506

3507

</div>

3508

3509

3510

3511

3512

3513

3514

3515

3516

3517

3518

3519

3520

3521

</li>

3522

3523

3524

3525

<code>value</code>

3526

3527

</li>

3528

3529

</ul><span class="paren">)</span>

3530

</div>

3531

3532

3533

3534

3535

3536

3537

3538

3539

3540

3541

3542

3543

3544

3545

3546

3547

3548

<p>Inherited from

3549

<a href="../classes/Shape.html#method_set">Shape</a>:

3550

3551

3552

3553

<a href="../files/graphics_js_GraphicBase.js.html#l443"><code>graphics/js/GraphicBase.js:443</code></a>

3554

3555

</p>

3556

3557

3558

3559

3560

3561

</div>

3562

3563

3564

<p>Sets the value of an attribute.</p>

3565

</div>

3566

3567

3568

3569

<h4>Parameters:</h4>

3570

3571

3572

3573

3574

3575

3576

<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a> | <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>

3577

3578

3579

3580

3581

3582

<p>The name of the attribute. Alternatively, an object of key value pairs can

3583

be passed in to set multiple attributes at once.</p>

3584

</div>

3585

3586

3587

</li>

3588

3589

3590

3591

<code class="param-name">value</code>

3592

3593

3594

3595

3596

3597

3598

<p>The value to set the attribute to. This value is ignored if an object is received as

3599

the name param.</p>

3600

</div>

3601

3602

3603

</li>

3604

3605

</ul>

3606

</div>

3607

3608

3609

3610

3611

3612

</div>

3613

3614

3615

3616

<h3 class="name"><code>setXY</code></h3>

3617

3618

3619

3620

3621

3622

3623

3624

<code>Contains</code>

3625

3626

</li>

3627

3628

</ul><span class="paren">)</span>

3629

</div>

3630

3631

3632

3633

3634

3635

3636

3637

3638

3639

3640

3641

3642

3643

3644

3645

3646

3647

<p>Inherited from

3648

<a href="../classes/Shape.html#method_setXY">Shape</a>:

3649

3650

3651

3652

<a href="../files/graphics_js_GraphicBase.js.html#l416"><code>graphics/js/GraphicBase.js:416</code></a>

3653

3654

</p>

3655

3656

3657

3658

3659

3660

</div>

3661

3662

3663

<p>Set the position of the shape in page coordinates, regardless of how the node is positioned.</p>

3664

</div>

3665

3666

3667

3668

<h4>Parameters:</h4>

3669

3670

3671

3672

3673

3674

<code class="param-name">Contains</code>

3675

<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array" class="crosslink external" target="_blank">Array</a></span>

3676

3677

3678

3679

3680

3681

<p>x & y values for new position (coordinates are page-based)</p>

3682

</div>

3683

3684

3685

</li>

3686

3687

</ul>

3688

</div>

3689

3690

3691

3692

3693

3694

</div>

3695

3696

3697

3698

3699

3700

3701

3702

3703

3704

3705

3706

3707

3708

</li>

3709

3710

3711

3712

3713

3714

</li>

3715

3716

</ul><span class="paren">)</span>

3717

</div>

3718

3719

3720

3721

3722

3723

3724

3725

3726

3727

3728

3729

3730

3731

3732

3733

3734

3735

<p>Inherited from

3736

<a href="../classes/Shape.html#method_skew">Shape</a>:

3737

3738

3739

3740

<a href="../files/graphics_js_GraphicBase.js.html#l473"><code>graphics/js/GraphicBase.js:473</code></a>

3741

3742

</p>

3743

3744

3745

3746

3747

3748

</div>

3749

3750

3751

<p>Skews the shape around the x-axis and y-axis.</p>

3752

</div>

3753

3754

3755

3756

<h4>Parameters:</h4>

3757

3758

3759

3760

3761

3762

3763

<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>

3764

3765

3766

3767

3768

3769

<p>The value to skew on the x-axis.</p>

3770

</div>

3771

3772

3773

</li>

3774

3775

3776

3777

3778

<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>

3779

3780

3781

3782

3783

3784

<p>The value to skew on the y-axis.</p>

3785

</div>

3786

3787

3788

</li>

3789

3790

</ul>

3791

</div>

3792

3793

3794

3795

3796

3797

</div>

3798

3799

3800

3801

<h3 class="name"><code>skewX</code></h3>

3802

3803

3804

3805

3806

3807

3808

3809

3810

3811

</li>

3812

3813

</ul><span class="paren">)</span>

3814

</div>

3815

3816

3817

3818

3819

3820

3821

3822

3823

3824

3825

3826

3827

3828

3829

3830

3831

3832

<p>Inherited from

3833

<a href="../classes/Shape.html#method_skewX">Shape</a>:

3834

3835

3836

3837

<a href="../files/graphics_js_GraphicBase.js.html#l480"><code>graphics/js/GraphicBase.js:480</code></a>

3838

3839

</p>

3840

3841

3842

3843

3844

3845

</div>

3846

3847

3848

<p>Skews the shape around the x-axis.</p>

3849

</div>

3850

3851

3852

3853

<h4>Parameters:</h4>

3854

3855

3856

3857

3858

3859

3860

<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>

3861

3862

3863

3864

3865

3866

<p>x-coordinate</p>

3867

</div>

3868

3869

3870

</li>

3871

3872

</ul>

3873

</div>

3874

3875

3876

3877

3878

3879

</div>

3880

3881

3882

3883

<h3 class="name"><code>skewY</code></h3>

3884

3885

3886

3887

3888

3889

3890

3891

3892

3893

</li>

3894

3895

</ul><span class="paren">)</span>

3896

</div>

3897

3898

3899

3900

3901

3902

3903

3904

3905

3906

3907

3908

3909

3910

3911

3912

3913

3914

<p>Inherited from

3915

<a href="../classes/Shape.html#method_skewY">Shape</a>:

3916

3917

3918

3919

<a href="../files/graphics_js_GraphicBase.js.html#l486"><code>graphics/js/GraphicBase.js:486</code></a>

3920

3921

</p>

3922

3923

3924

3925

3926

3927

</div>

3928

3929

3930

<p>Skews the shape around the y-axis.</p>

3931

</div>

3932

3933

3934

3935

<h4>Parameters:</h4>

3936

3937

3938

3939

3940

3941

3942

<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>

3943

3944

3945

3946

3947

3948

<p>y-coordinate</p>

3949

</div>

3950

3951

3952

</li>

3953

3954

</ul>

3955

</div>

3956

3957

3958

3959

3960

3961

</div>

3962

3963

3964

3965

3966

3967

3968

3969

3970

3971

3972

3973

<code>selector</code>

3974

3975

</li>

3976

3977

</ul><span class="paren">)</span>

3978

</div>

3979

3980

3981

3982

3983

3984

</span>

3985

3986

3987

3988

3989

3990

3991

3992

3993

3994

3995

3996

3997

3998

3999

4000

<p>Inherited from

4001

<a href="../classes/Shape.html#method_test">Shape</a>:

4002

4003

4004

4005

<a href="../files/graphics_js_GraphicBase.js.html#l436"><code>graphics/js/GraphicBase.js:436</code></a>

4006

4007

</p>

4008

4009

4010

4011

4012

4013

</div>

4014

4015

4016

<p>Test if the supplied node matches the supplied selector.</p>

4017

</div>

4018

4019

4020

4021

<h4>Parameters:</h4>

4022

4023

4024

4025

4026

4027

<code class="param-name">selector</code>

4028

<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>

4029

4030

4031

4032

4033

4034

<p>The CSS selector to test against.</p>

4035

</div>

4036

4037

4038

</li>

4039

4040

</ul>

4041

</div>

4042

4043

4044

4045

4046

<h4>Returns:</h4>

4047

4048

4049

4050

4051

Boolean Wheter or not the shape matches the selector.

4052

4053

</div>

4054

</div>

4055

4056

4057

4058

</div>

4059

4060

4061

4062

<h3 class="name"><code>translate</code></h3>

4063

4064

4065

4066

4067

4068

4069

4070

4071

4072

</li>

4073

4074

4075

4076

4077

4078

</li>

4079

4080

</ul><span class="paren">)</span>

4081

</div>

4082

4083

4084

4085

4086

4087

4088

4089

4090

4091

4092

4093

4094

4095

4096

4097

4098

4099

<p>Inherited from

4100

<a href="../classes/Shape.html#method_translate">Shape</a>:

4101

4102

4103

4104

<a href="../files/graphics_js_GraphicBase.js.html#l452"><code>graphics/js/GraphicBase.js:452</code></a>

4105

4106

</p>

4107

4108

4109

4110

4111

4112

</div>

4113

4114

4115

<p>Specifies a 2d translation.</p>

4116

</div>

4117

4118

4119

4120

<h4>Parameters:</h4>

4121

4122

4123

4124

4125

4126

4127

<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>

4128

4129

4130

4131

4132

4133

<p>The value to transate on the x-axis.</p>

4134

</div>

4135

4136

4137

</li>

4138

4139

4140

4141

4142

<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>

4143

4144

4145

4146

4147

4148

<p>The value to translate on the y-axis.</p>

4149

</div>

4150

4151

4152

</li>

4153

4154

</ul>

4155

</div>

4156

4157

4158

4159

4160

4161

</div>

4162

4163

4164

4165

<h3 class="name"><code>translateX</code></h3>

4166

4167

4168

4169

4170

4171

4172

4173

4174

4175

</li>

4176

4177

</ul><span class="paren">)</span>

4178

</div>

4179

4180

4181

4182

4183

4184

4185

4186

4187

4188

4189

4190

4191

4192

4193

4194

4195

4196

<p>Inherited from

4197

<a href="../classes/Shape.html#method_translateX">Shape</a>:

4198

4199

4200

4201

<a href="../files/graphics_js_GraphicBase.js.html#l459"><code>graphics/js/GraphicBase.js:459</code></a>

4202

4203

</p>

4204

4205

4206

4207

4208

4209

</div>

4210

4211

4212

<p>Translates the shape along the x-axis. When translating x and y coordinates,

4213

use the <code>translate</code> method.</p>

4214

</div>

4215

4216

4217

4218

<h4>Parameters:</h4>

4219

4220

4221

4222

4223

4224

4225

<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>

4226

4227

4228

4229

4230

4231

<p>The value to translate.</p>

4232

</div>

4233

4234

4235

</li>

4236

4237

</ul>

4238

</div>

4239

4240

4241

4242

4243

4244

</div>

4245

4246

4247

4248

<h3 class="name"><code>translateY</code></h3>

4249

4250

4251

4252

4253

4254

4255

4256

4257

4258

</li>

4259

4260

</ul><span class="paren">)</span>

4261

</div>

4262

4263

4264

4265

4266

4267

4268

4269

4270

4271

4272

4273

4274

4275

4276

4277

4278

4279

<p>Inherited from

4280

<a href="../classes/Shape.html#method_translateY">Shape</a>:

4281

4282

4283

4284

<a href="../files/graphics_js_GraphicBase.js.html#l466"><code>graphics/js/GraphicBase.js:466</code></a>

4285

4286

</p>

4287

4288

4289

4290

4291

4292

</div>

4293

4294

4295

<p>Translates the shape along the y-axis. When translating x and y coordinates,

4296

use the <code>translate</code> method.</p>

4297

</div>

4298

4299

4300

4301

<h4>Parameters:</h4>

4302

4303

4304

4305

4306

4307

4308

<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>

4309

4310

4311

4312

4313

4314

<p>The value to translate.</p>

4315

</div>

4316

4317

4318

</li>

4319

4320

</ul>

4321

</div>

4322

4323

4324

4325

4326

4327

</div>

4328

4329

4330

</div>

4331

4332

4333

4334

4335

4336

4337

<h2 class="off-left">Attributes</h2>

4338

4339

4340

4341

4342

4343

<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>

4344

4345

4346

4347

4348

4349

4350

4351

4352

4353

4354

4355

4356

<p>Inherited from

4357

<a href="../classes/Shape.html#attr_fill">Shape</a>:

4358

4359

4360

4361

<a href="../files/graphics_js_GraphicBase.js.html#l589"><code>graphics/js/GraphicBase.js:589</code></a>

4362

4363

</p>

4364

4365

4366

4367

4368

</div>

4369

4370

4371

<p>Contains information about the fill of the shape.

4372

<dl>

4373

<dt>color</dt><dd>The color of the fill.</dd>

4374

<dt>opacity</dt><dd>Number between 0 and 1 that indicates the opacity of the fill. The default value is 1.</dd>

4375

<dt>type</dt><dd>Type of fill.

4376

<dl>

4377

<dt>solid</dt><dd>Solid single color fill. (default)</dd>

4378

<dt>linear</dt><dd>Linear gradient fill.</dd>

4379

<dt>radial</dt><dd>Radial gradient fill.</dd>

4380

</dl>

4381

</dd>

4382

</dl>

4383

<p>If a <code>linear</code> or <code>radial</code> is specified as the fill type. The following additional property is used:

4384

<dl>

4385

<dt>stops</dt><dd>An array of objects containing the following properties:

4386

<dl>

4387

<dt>color</dt><dd>The color of the stop.</dd>

4388

<dt>opacity</dt><dd>Number between 0 and 1 that indicates the opacity of the stop. The default value is 1. Note: No effect for IE 6 - 8</dd>

4389

<dt>offset</dt><dd>Number between 0 and 1 indicating where the color stop is positioned.</dd>

4390

</dl>

4391

</dd>

4392

<p>Linear gradients also have the following property:</p>

4393

4394

<pre class="code"><code class="prettyprint"> <dt>rotation</dt><dd>Linear gradients flow left to right by default. The rotation property allows you to change the flow by rotation. (e.g. A rotation of 180 would make the gradient pain from right to left.)</dd>

4395

<p>Radial gradients have the following additional properties:</p>

4396

<dt>r</dt><dd>Radius of the gradient circle.</dd>

4397

<dt>fx</dt><dd>Focal point x-coordinate of the gradient.</dd>

4398

<dt>fy</dt><dd>Focal point y-coordinate of the gradient.</dd>

4399

4400

<p>The x-coordinate of the center of the gradient circle. Determines where the color stop begins. The default value 0.5.</p>

4401

<p><strong>Note: </strong>Currently, this property is not implemented for corresponding <code>CanvasShape</code> and <code>VMLShape</code> classes which are used on Android or IE 6 - 8.</p>

4402

</dd>

4403

4404

<p>The y-coordinate of the center of the gradient circle. Determines where the color stop begins. The default value 0.5.</p>

4405

<p><strong>Note: </strong>Currently, this property is not implemented for corresponding <code>CanvasShape</code> and <code>VMLShape</code> classes which are used on Android or IE 6 - 8.</p>

4406

</dd>

4407

</code></pre>

4408

4409

4410

</div>

4411

4412

4413

4414

4415

4416

4417

</div>

4418

4419

4420

4421

4422

<h3 class="name"><code>graphic</code></h3>

4423

<span class="type"><a href="../classes/Graphic.html" class="crosslink">Graphic</a></span>

4424

4425

4426

4427

4428

4429

4430

4431

4432

4433

4434

4435

4436

<p>Inherited from

4437

<a href="../classes/Shape.html#attr_graphic">Shape</a>:

4438

4439

4440

4441

<a href="../files/graphics_js_GraphicBase.js.html#l665"><code>graphics/js/GraphicBase.js:665</code></a>

4442

4443

</p>

4444

4445

4446

4447

4448

</div>

4449

4450

4451

<p>Reference to the parent graphic instance</p>

4452

</div>

4453

4454

4455

4456

4457

4458

4459

</div>

4460

4461

4462

4463

4464

<h3 class="name"><code>height</code></h3>

4465

<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>

4466

4467

4468

4469

4470

4471

4472

4473

4474

4475

4476

4477

4478

<p>Inherited from

4479

<a href="../classes/Shape.html#attr_height">Shape</a>:

4480

4481

4482

4483

<a href="../files/graphics_js_GraphicBase.js.html#l577"><code>graphics/js/GraphicBase.js:577</code></a>

4484

4485

</p>

4486

4487

4488

4489

4490

</div>

4491

4492

4493

<p>Indicates the height of the shape</p>

4494

</div>

4495

4496

4497

4498

4499

4500

4501

</div>

4502

4503

4504

4505

4506

4507

<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>

4508

4509

4510

4511

4512

4513

4514

4515

4516

4517

4518

4519

4520

<p>Inherited from

4521

<a href="../classes/Shape.html#attr_id">Shape</a>:

4522

4523

4524

4525

<a href="../files/graphics_js_GraphicBase.js.html#l553"><code>graphics/js/GraphicBase.js:553</code></a>

4526

4527

</p>

4528

4529

4530

4531

4532

</div>

4533

4534

4535

<p>Unique id for class instance.</p>

4536

</div>

4537

4538

4539

4540

4541

4542

4543

</div>

4544

4545

4546

4547

4548

4549

<span class="type"><a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>

4550

4551

4552

4553

4554

4555

4556

4557

4558

4559

4560

4561

4562

<p>Inherited from

4563

<a href="../classes/Shape.html#attr_node">Shape</a>:

4564

4565

4566

4567

<a href="../files/graphics_js_GraphicBase.js.html#l658"><code>graphics/js/GraphicBase.js:658</code></a>

4568

4569

</p>

4570

4571

4572

4573

4574

</div>

4575

4576

4577

<p>Dom node for the shape.</p>

4578

</div>

4579

4580

4581

4582

4583

4584

4585

</div>

4586

4587

4588

4589

4590

4591

<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>

4592

4593

4594

4595

4596

4597

4598

4599

4600

4601

4602

4603

4604

4605

<p>

4606

4607

Defined in

4608

4609

4610

4611

4612

<a href="../files/graphics_js_GraphicBase.js.html#l918"><code>graphics/js/GraphicBase.js:918</code></a>

4613

4614

</p>

4615

4616

4617

4618

4619

</div>

4620

4621

4622

<p>Indicates the path used for the node.</p>

4623

</div>

4624

4625

4626

4627

4628

4629

4630

</div>

4631

4632

4633

4634

4635

<h3 class="name"><code>stroke</code></h3>

4636

<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>

4637

4638

4639

4640

4641

4642

4643

4644

4645

4646

4647

4648

4649

<p>Inherited from

4650

<a href="../classes/Shape.html#attr_stroke">Shape</a>:

4651

4652

4653

4654

<a href="../files/graphics_js_GraphicBase.js.html#l630"><code>graphics/js/GraphicBase.js:630</code></a>

4655

4656

</p>

4657

4658

4659

4660

4661

</div>

4662

4663

4664

<p>Contains information about the stroke of the shape.

4665

<dl>

4666

<dt>color</dt><dd>The color of the stroke.</dd>

4667

<dt>weight</dt><dd>Number that indicates the width of the stroke.</dd>

4668

<dt>opacity</dt><dd>Number between 0 and 1 that indicates the opacity of the stroke. The default value is 1.</dd>

4669

<dt>dashstyle</dt>Indicates whether to draw a dashed stroke. When set to "none", a solid stroke is drawn. When set to an array, the first index indicates the

4670

length of the dash. The second index indicates the length of gap.

4671

<dt>linecap</dt><dd>Specifies the linecap for the stroke. The following values can be specified:

4672

<dl>

4673

<dt>butt (default)</dt><dd>Specifies a butt linecap.</dd>

4674

<dt>square</dt><dd>Specifies a sqare linecap.</dd>

4675

<dt>round</dt><dd>Specifies a round linecap.</dd>

4676

</dl>

4677

</dd>

4678

<dt>linejoin</dt><dd>Specifies a linejoin for the stroke. The following values can be specified:

4679

<dl>

4680

<dt>round (default)</dt><dd>Specifies that the linejoin will be round.</dd>

4681

<dt>bevel</dt><dd>Specifies a bevel for the linejoin.</dd>

4682

<dt>miter limit</dt><dd>An integer specifying the miter limit of a miter linejoin. If you want to specify a linejoin of miter, you simply specify the limit as opposed to having

4683

separate miter and miter limit values.</dd>

4684

</dl>

4685

</dd>

4686

</dl></p>

4687

</div>

4688

4689

4690

4691

4692

4693

4694

</div>

4695

4696

4697

4698

4699

<h3 class="name"><code>transform</code></h3>

4700

<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>

4701

4702

4703

4704

4705

4706

4707

4708

4709

4710

4711

4712

4713

<p>Inherited from

4714

<a href="../classes/Shape.html#attr_transform">Shape</a>:

4715

4716

4717

4718

<a href="../files/graphics_js_GraphicBase.js.html#l525"><code>graphics/js/GraphicBase.js:525</code></a>

4719

4720

</p>

4721

4722

4723

4724

4725

</div>

4726

4727

4728

<p>A string containing, in order, transform operations applied to the shape instance. The <code>transform</code> string can contain the following values:

4729

4730

<dl>

4731

<dt>rotate</dt><dd>Rotates the shape clockwise around it transformOrigin.</dd>

4732

<dt>translate</dt><dd>Specifies a 2d translation.</dd>

4733

<dt>skew</dt><dd>Skews the shape around the x-axis and y-axis.</dd>

4734

<dt>scale</dt><dd>Specifies a 2d scaling operation.</dd>

4735

<dt>translateX</dt><dd>Translates the shape along the x-axis.</dd>

4736

<dt>translateY</dt><dd>Translates the shape along the y-axis.</dd>

4737

<dt>skewX</dt><dd>Skews the shape around the x-axis.</dd>

4738

<dt>skewY</dt><dd>Skews the shape around the y-axis.</dd>

4739

</dl>

4740

</p>

4741

4742

<p>Applying transforms through the transform attribute will reset the transform matrix and apply a new transform. The shape class also contains corresponding methods for each transform

4743

that will apply the transform to the current matrix. The below code illustrates how you might use the <code>transform</code> attribute to instantiate a recangle with a rotation of 45 degrees.</p>

4744

4745

<pre class="code"><code class="prettyprint"> var myRect = new Y.Rect({

4746

type:"rect",

4747

width: 50,

4748

height: 40,

4749

transform: "rotate(45)"

4750

};

4751

</code></pre>

4752

4753

<p>The code below would apply <code>translate</code> and <code>rotate</code> to an existing shape.</p>

4754

4755

<pre class="code"><code class="prettyprint"> myRect.set("transform", "translate(40, 50) rotate(45)");

4756

</code></pre>

4757

</div>

4758

4759

4760

4761

4762

4763

4764

</div>

4765

4766

4767

4768

4769

<h3 class="name"><code>transformOrigin</code></h3>

4770

<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array" class="crosslink external" target="_blank">Array</a></span>

4771

4772

4773

4774

4775

4776

4777

4778

4779

4780

4781

4782

4783

<p>Inherited from

4784

<a href="../classes/Shape.html#attr_transformOrigin">Shape</a>:

4785

4786

4787

4788

<a href="../files/graphics_js_GraphicBase.js.html#l518"><code>graphics/js/GraphicBase.js:518</code></a>

4789

4790

</p>

4791

4792

4793

4794

4795

</div>

4796

4797

4798

<p>An array of x, y values which indicates the transformOrigin in which to rotate the shape. Valid values range between 0 and 1 representing a

4799

fraction of the shape's corresponding bounding box dimension. The default value is [0.5, 0.5].</p>

4800

</div>

4801

4802

4803

4804

4805

4806

4807

</div>

4808

4809

4810

4811

4812

<h3 class="name"><code>visible</code></h3>

4813

<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a></span>

4814

4815

4816

4817

4818

4819

4820

4821

4822

4823

4824

4825

4826

<p>Inherited from

4827

<a href="../classes/Shape.html#attr_visible">Shape</a>:

4828

4829

4830

4831

<a href="../files/graphics_js_GraphicBase.js.html#l583"><code>graphics/js/GraphicBase.js:583</code></a>

4832

4833

</p>

4834

4835

4836

4837

4838

</div>

4839

4840

4841

<p>Indicates whether the shape is visible.</p>

4842

</div>

4843

4844

4845

4846

4847

4848

4849

</div>

4850

4851

4852

4853

4854

<h3 class="name"><code>width</code></h3>

4855

<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>

4856

4857

4858

4859

4860

4861

4862

4863

4864

4865

4866

4867

4868

<p>Inherited from

4869

<a href="../classes/Shape.html#attr_width">Shape</a>:

4870

4871

4872

4873

<a href="../files/graphics_js_GraphicBase.js.html#l571"><code>graphics/js/GraphicBase.js:571</code></a>

4874

4875

</p>

4876

4877

4878

4879

4880

</div>

4881

4882

4883

<p>Indicates the width of the shape</p>

4884

</div>

4885

4886

4887

4888

4889

4890

4891

</div>

4892

4893

4894

4895

4896

4897

<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>

4898

4899

4900

4901

4902

4903

4904

4905

4906

4907

4908

4909

4910

<p>Inherited from

4911

<a href="../classes/Shape.html#attr_x">Shape</a>:

4912

4913

4914

4915

<a href="../files/graphics_js_GraphicBase.js.html#l559"><code>graphics/js/GraphicBase.js:559</code></a>

4916

4917

</p>

4918

4919

4920

4921

4922

</div>

4923

4924

4925

<p>Indicates the x position of shape.</p>

4926

</div>

4927

4928

4929

4930

4931

4932

4933

</div>

4934

4935

4936

4937

4938

4939

<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>

4940

4941

4942

4943

4944

4945

4946

4947

4948

4949

4950

4951

4952

<p>Inherited from

4953

<a href="../classes/Shape.html#attr_y">Shape</a>:

4954

4955

4956

4957

<a href="../files/graphics_js_GraphicBase.js.html#l565"><code>graphics/js/GraphicBase.js:565</code></a>

4958

4959

</p>

4960

4961

4962

4963

4964

</div>

4965

4966

4967

<p>Indicates the y position of shape.</p>

4968

</div>

4969

4970

4971

4972

4973

4974

4975

</div>

4976

4977

4978

</div>

4979

4980

4981

4982

</div>

4983

</div>

4984

4985

</div>

4986

</div>

4987

</div>

4988

</div>

4989

</div>

4990

</div>

4991

4992

4993

4994

4995

4996

4997

4998

4999

</body>

5000

</html>

Older »