~bcsaller/juju-gui/charmFind

* @param {Array} val An array containing data that can be parsed into a method and arguments. The value at zero-index of the array is a string reference of

1454

* the drawing method that will be called. All subsequent indices are argument for that method. For example, `lineTo(10, 100)` would be structured as:

1455

* `["lineTo", 10, 100]`.

1456

* @private

1457

1458

_updateDrawingQueue: function(val)

1459

{

1460

this._methods.push(val);

1461

1462

1463

/**

1464

* Draws a line segment using the current line style from the current drawing position to the specified x and y coordinates.

1465

1466

* @method lineTo

1467

* @param {Number} point1 x-coordinate for the end point.

1468

* @param {Number} point2 y-coordinate for the end point.

1469

1470

lineTo: function(point1, point2, etc)

1471

{

1472

var args = arguments,

1473

i = 0,

1474

len,

1475

1476

1477

wt = this._stroke && this._strokeWeight ? this._strokeWeight : 0;

1478

if(!this._lineToMethods)

1479

{

1480

this._lineToMethods = [];

1481

}

1482

if (typeof point1 === 'string' || typeof point1 === 'number') {

1483

args = [[point1, point2]];

1484

}

1485

1486

len = args.length;

1487

for (; i < len; ++i)

1488

{

1489

if(args[i])

1490

{

1491

x = args[i][0];

1492

y = args[i][1];

1493

this._updateDrawingQueue(["lineTo", x, y]);

1494

this._lineToMethods[this._lineToMethods.length] = this._methods[this._methods.length - 1];

1495

this._trackSize(x - wt, y - wt);

1496

this._trackSize(x + wt, y + wt);

1497

this._updateCoords(x, y);

1498

}

1499

}

1500

this._drawingComplete = false;

1501

return this;

1502

1503

1504

/**

1505

* Moves the current drawing position to specified x and y coordinates.

1506

1507

* @method moveTo

1508

* @param {Number} x x-coordinate for the end point.

1509

* @param {Number} y y-coordinate for the end point.

1510

1511

moveTo: function(x, y) {

1512

var wt = this._stroke && this._strokeWeight ? this._strokeWeight : 0;

1513

this._updateDrawingQueue(["moveTo", x, y]);

1514

this._trackSize(x - wt, y - wt);

1515

this._trackSize(x + wt, y + wt);

1516

this._updateCoords(x, y);

1517

this._drawingComplete = false;

1518

return this;

1519

1520

1521

/**

1522

* Draws a bezier curve.

1523

1524

* @method curveTo

1525

* @param {Number} cp1x x-coordinate for the first control point.

1526

* @param {Number} cp1y y-coordinate for the first control point.

1527

* @param {Number} cp2x x-coordinate for the second control point.

1528

* @param {Number} cp2y y-coordinate for the second control point.

1529

* @param {Number} x x-coordinate for the end point.

1530

* @param {Number} y y-coordinate for the end point.

1531

1532

curveTo: function(cp1x, cp1y, cp2x, cp2y, x, y) {

1533

var hiX,

1534

hiY,

1535

loX,

1536

loY;

1537

this._updateDrawingQueue(["bezierCurveTo", cp1x, cp1y, cp2x, cp2y, x, y]);

1538

this._drawingComplete = false;

1539

hiX = Math.max(x, Math.max(cp1x, cp2x));

1540

hiY = Math.max(y, Math.max(cp1y, cp2y));

1541

loX = Math.min(x, Math.min(cp1x, cp2x));

1542

loY = Math.min(y, Math.min(cp1y, cp2y));

1543

this._trackSize(hiX, hiY);

1544

this._trackSize(loX, loY);

1545

this._updateCoords(hiX, hiY);

1546

return this;

1547

1548

1549

/**

1550

* Draws a quadratic bezier curve.

1551

1552

* @method quadraticCurveTo

1553

* @param {Number} cpx x-coordinate for the control point.

1554

* @param {Number} cpy y-coordinate for the control point.

1555

* @param {Number} x x-coordinate for the end point.

1556

* @param {Number} y y-coordinate for the end point.

1557

1558

quadraticCurveTo: function(cpx, cpy, x, y) {

1559

var hiX,

1560

hiY,

1561

loX,

1562

loY,

1563

wt = this._stroke && this._strokeWeight ? this._strokeWeight : 0;

1564

this._updateDrawingQueue(["quadraticCurveTo", cpx, cpy, x, y]);

1565

this._drawingComplete = false;

1566

hiX = Math.max(x, cpx);

1567

hiY = Math.max(y, cpy);

1568

loX = Math.min(x, cpx);

1569

loY = Math.min(y, cpy);

1570

this._trackSize(hiX + wt, hiY + wt);

1571

this._trackSize(loX - wt, loY - wt);

1572

this._updateCoords(hiX, hiY);

1573

return this;

1574

1575

1576

/**

1577

* Draws a circle. Used internally by `CanvasCircle` class.

1578

1579

* @method drawCircle

1580

* @param {Number} x y-coordinate

1581

* @param {Number} y x-coordinate

1582

* @param {Number} r radius

1583

* @protected

1584

1585

drawCircle: function(x, y, radius) {

1586

var startAngle = 0,

1587

endAngle = 2 * Math.PI,

1588

wt = this._stroke && this._strokeWeight ? this._strokeWeight : 0,

1589

circum = radius * 2;

1590

circum += wt;

1591

this._drawingComplete = false;

1592

this._trackSize(x + circum, y + circum);

1593

this._trackSize(x - wt, y - wt);

1594

this._updateCoords(x, y);

1595

this._updateDrawingQueue(["arc", x + radius, y + radius, radius, startAngle, endAngle, false]);

1596

return this;

1597

1598

1599

/**

1600

* Draws a diamond.

1601

1602

* @method drawDiamond

1603

* @param {Number} x y-coordinate

1604

* @param {Number} y x-coordinate

1605

* @param {Number} width width

1606

* @param {Number} height height

1607

* @protected

1608

1609

drawDiamond: function(x, y, width, height)

1610

{

1611

var midWidth = width * 0.5,

1612

midHeight = height * 0.5;

1613

this.moveTo(x + midWidth, y);

1614

this.lineTo(x + width, y + midHeight);

1615

this.lineTo(x + midWidth, y + height);

1616

this.lineTo(x, y + midHeight);

1617

this.lineTo(x + midWidth, y);

1618

return this;

1619

1620

1621

/**

1622

* Draws an ellipse. Used internally by `CanvasEllipse` class.

1623

1624

* @method drawEllipse

1625

* @param {Number} x x-coordinate

1626

* @param {Number} y y-coordinate

1627

* @param {Number} w width

1628

* @param {Number} h height

1629

* @protected

1630

1631

drawEllipse: function(x, y, w, h) {

1632

var l = 8,

1633

theta = -(45/180) * Math.PI,

1634

angle = 0,

1635

angleMid,

1636

radius = w/2,

1637

yRadius = h/2,

1638

i = 0,

1639

centerX = x + radius,

1640

centerY = y + yRadius,

1641

ax, ay, bx, by, cx, cy,

1642

wt = this._stroke && this._strokeWeight ? this._strokeWeight : 0;

1643

1644

ax = centerX + Math.cos(0) * radius;

1645

ay = centerY + Math.sin(0) * yRadius;

1646

this.moveTo(ax, ay);

1647

for(; i < l; i++)

1648

{

1649

angle += theta;

1650

angleMid = angle - (theta / 2);

1651

bx = centerX + Math.cos(angle) * radius;

1652

by = centerY + Math.sin(angle) * yRadius;

1653

cx = centerX + Math.cos(angleMid) * (radius / Math.cos(theta / 2));

1654

cy = centerY + Math.sin(angleMid) * (yRadius / Math.cos(theta / 2));

1655

this._updateDrawingQueue(["quadraticCurveTo", cx, cy, bx, by]);

1656

}

1657

this._trackSize(x + w + wt, y + h + wt);

1658

this._trackSize(x - wt, y - wt);

1659

this._updateCoords(x, y);

1660

return this;

1661

1662

1663

/**

1664

* Draws a rectangle.

1665

1666

* @method drawRect

1667

* @param {Number} x x-coordinate

1668

* @param {Number} y y-coordinate

1669

* @param {Number} w width

1670

* @param {Number} h height

1671

1672

drawRect: function(x, y, w, h) {

1673

var wt = this._stroke && this._strokeWeight ? this._strokeWeight : 0;

1674

this._drawingComplete = false;

1675

this._updateDrawingQueue(["moveTo", x, y]);

1676

this._updateDrawingQueue(["lineTo", x + w, y]);

1677

this._updateDrawingQueue(["lineTo", x + w, y + h]);

1678

this._updateDrawingQueue(["lineTo", x, y + h]);

1679

this._updateDrawingQueue(["lineTo", x, y]);

1680

this._trackSize(x - wt, y - wt);

1681

this._trackSize(x + w + wt, y + h + wt);

1682

return this;

1683

1684

1685

/**

1686

* Draws a rectangle with rounded corners.

1687

1688

* @method drawRect

1689

* @param {Number} x x-coordinate

1690

* @param {Number} y y-coordinate

1691

* @param {Number} w width

1692

* @param {Number} h height

1693

* @param {Number} ew width of the ellipse used to draw the rounded corners

1694

* @param {Number} eh height of the ellipse used to draw the rounded corners

1695

1696

drawRoundRect: function(x, y, w, h, ew, eh) {

1697

var wt = this._stroke && this._strokeWeight ? this._strokeWeight : 0;

1698

this._drawingComplete = false;

1699

this._updateDrawingQueue(["moveTo", x, y + eh]);

1700

this._updateDrawingQueue(["lineTo", x, y + h - eh]);

1701

this._updateDrawingQueue(["quadraticCurveTo", x, y + h, x + ew, y + h]);

1702

this._updateDrawingQueue(["lineTo", x + w - ew, y + h]);

1703

this._updateDrawingQueue(["quadraticCurveTo", x + w, y + h, x + w, y + h - eh]);

1704

this._updateDrawingQueue(["lineTo", x + w, y + eh]);

1705

this._updateDrawingQueue(["quadraticCurveTo", x + w, y, x + w - ew, y]);

1706

this._updateDrawingQueue(["lineTo", x + ew, y]);

1707

this._updateDrawingQueue(["quadraticCurveTo", x, y, x, y + eh]);

1708

this._trackSize(x - wt, y - wt);

1709

this._trackSize(x + w + wt, y + h + wt);

1710

this._updateCoords(w, h);

1711

return this;

1712

1713

1714

/**

1715

* Draws a wedge.

1716

1717

* @method drawWedge

1718

* @param {Number} x x-coordinate of the wedge's center point

1719

* @param {Number} y y-coordinate of the wedge's center point

1720

* @param {Number} startAngle starting angle in degrees

1721

* @param {Number} arc sweep of the wedge. Negative values draw clockwise.

1722

* @param {Number} radius radius of wedge. If [optional] yRadius is defined, then radius is the x radius.

1723

* @param {Number} yRadius [optional] y radius for wedge.

1724

* @private

1725

1726

drawWedge: function(x, y, startAngle, arc, radius, yRadius)

1727

{

1728

var segs,

1729

segAngle,

1730

theta,

1731

angle,

1732

angleMid,

1733

ax,

1734

ay,

1735

bx,

1736

by,

1737

cx,

1738

cy,

1739

i = 0;

1740

yRadius = yRadius || radius;

1741

1742

this._drawingComplete = false;

1743

// move to x,y position

1744

this._updateDrawingQueue(["moveTo", x, y]);

1745

1746

yRadius = yRadius || radius;

1747

1748

// limit sweep to reasonable numbers

1749

if(Math.abs(arc) > 360)

1750

{

1751

arc = 360;

1752

}

1753

1754

// First we calculate how many segments are needed

1755

// for a smooth arc.

1756

segs = Math.ceil(Math.abs(arc) / 45);

1757

1758

// Now calculate the sweep of each segment.

1759

segAngle = arc / segs;

1760

1761

// The math requires radians rather than degrees. To convert from degrees

1762

// use the formula (degrees/180)*Math.PI to get radians.

1763

theta = -(segAngle / 180) * Math.PI;

1764

1765

// convert angle startAngle to radians

1766

angle = (startAngle / 180) * Math.PI;

1767

1768

// draw the curve in segments no larger than 45 degrees.

1769

if(segs > 0)

1770

{

1771

// draw a line from the center to the start of the curve

1772

ax = x + Math.cos(startAngle / 180 * Math.PI) * radius;

1773

ay = y + Math.sin(startAngle / 180 * Math.PI) * yRadius;

1774

this.lineTo(ax, ay);

1775

// Loop for drawing curve segments

1776

for(; i < segs; ++i)

1777

{

1778

angle += theta;

1779

angleMid = angle - (theta / 2);

1780

bx = x + Math.cos(angle) * radius;

1781

by = y + Math.sin(angle) * yRadius;

1782

cx = x + Math.cos(angleMid) * (radius / Math.cos(theta / 2));

1783

cy = y + Math.sin(angleMid) * (yRadius / Math.cos(theta / 2));

1784

this._updateDrawingQueue(["quadraticCurveTo", cx, cy, bx, by]);

1785

}

1786

// close the wedge by drawing a line to the center

1787

this._updateDrawingQueue(["lineTo", x, y]);

1788

}

1789

this._trackSize(0 , 0);

1790

this._trackSize(radius * 2, radius * 2);

1791

return this;

1792

1793

1794

/**

1795

* Completes a drawing operation.

1796

1797

* @method end

1798

1799

end: function() {

1800

this._closePath();

1801

return this;

1802

1803

1804

/**

1805

* Ends a fill and stroke

1806

1807

* @method closePath

1808

1809

closePath: function()

1810

{

1811

this._updateDrawingQueue(["closePath"]);

1812

this._updateDrawingQueue(["beginPath"]);

1813

1814

1815

/**

1816

* Clears the graphics object.

1817

1818

* @method clear

1819

1820

1821

/**

1822

* Returns a linear gradient fill

1823

1824

* @method _getLinearGradient

1825

* @return CanvasGradient

1826

* @private

1827

1828

_getLinearGradient: function() {

1829

var isNumber = Y.Lang.isNumber,

1830

fill = this.get("fill"),

1831

stops = fill.stops,

1832

opacity,

1833

color,

1834

stop,

1835

i = 0,

1836

len = stops.length,

1837

gradient,

1838

x = 0,

1839

y = 0,

1840

w = this.get("width"),

1841

h = this.get("height"),

1842

r = fill.rotation || 0,

1843

x1, x2, y1, y2,

1844

cx = x + w/2,

1845

cy = y + h/2,

1846

offset,

1847

radCon = Math.PI/180,

1848

tanRadians = parseFloat(parseFloat(Math.tan(r * radCon)).toFixed(8));

1849

if(Math.abs(tanRadians) * w/2 >= h/2)

1850

{

1851

if(r < 180)

1852

{

1853

y1 = y;

1854

y2 = y + h;

1855

}

1856

else

1857

{

1858

y1 = y + h;

1859

y2 = y;

1860

}

1861

x1 = cx - ((cy - y1)/tanRadians);

1862

x2 = cx - ((cy - y2)/tanRadians);

1863

}

1864

else

1865

{

1866

if(r > 90 && r < 270)

1867

{

1868

x1 = x + w;

1869

x2 = x;

1870

}

1871

else

1872

{

1873

x1 = x;

1874

x2 = x + w;

1875

}

1876

y1 = ((tanRadians * (cx - x1)) - cy) * -1;

1877

y2 = ((tanRadians * (cx - x2)) - cy) * -1;

1878

}

1879

gradient = this._context.createLinearGradient(x1, y1, x2, y2);

1880

for(; i < len; ++i)

1881

{

1882

stop = stops[i];

1883

opacity = stop.opacity;

1884

color = stop.color;

1885

offset = stop.offset;

1886

if(isNumber(opacity))

1887

{

1888

opacity = Math.max(0, Math.min(1, opacity));

1889

color = this._toRGBA(color, opacity);

1890

}

1891

else

1892

{

1893

color = TORGB(color);

1894

}

1895

offset = stop.offset || i/(len - 1);

1896

gradient.addColorStop(offset, color);

1897

}

1898

return gradient;

1899

1900

1901

/**

1902

* Returns a radial gradient fill

1903

1904

* @method _getRadialGradient

1905

* @return CanvasGradient

1906

* @private

1907

1908

_getRadialGradient: function() {

1909

var isNumber = Y.Lang.isNumber,

1910

fill = this.get("fill"),

1911

r = fill.r,

1912

fx = fill.fx,

1913

fy = fill.fy,

1914

stops = fill.stops,

1915

opacity,

1916

color,

1917

stop,

1918

i = 0,

1919

len = stops.length,

1920

gradient,

1921

x = 0,

1922

y = 0,

1923

w = this.get("width"),

1924

h = this.get("height"),

1925

x1, x2, y1, y2, r2,

1926

xc, yc, xn, yn, d,

1927

offset,

1928

ratio,

1929

stopMultiplier;

1930

xc = x + w/2;

1931

yc = y + h/2;

1932

x1 = w * fx;

1933

y1 = h * fy;

1934

x2 = x + w/2;

1935

y2 = y + h/2;

1936

r2 = w * r;

1937

d = Math.sqrt( Math.pow(Math.abs(xc - x1), 2) + Math.pow(Math.abs(yc - y1), 2) );

1938

if(d >= r2)

1939

{

1940

ratio = d/r2;

1941

//hack. gradient won't show if it is exactly on the edge of the arc

1942

if(ratio === 1)

1943

{

1944

ratio = 1.01;

1945

}

1946

xn = (x1 - xc)/ratio;

1947

yn = (y1 - yc)/ratio;

1948

xn = xn > 0 ? Math.floor(xn) : Math.ceil(xn);

1949

yn = yn > 0 ? Math.floor(yn) : Math.ceil(yn);

1950

x1 = xc + xn;

1951

y1 = yc + yn;

1952

}

1953

1954

//If the gradient radius is greater than the circle's, adjusting the radius stretches the gradient properly.

1955

//If the gradient radius is less than the circle's, adjusting the radius of the gradient will not work.

1956

//Instead, adjust the color stops to reflect the smaller radius.

1957

if(r >= 0.5)

1958

{

1959

gradient = this._context.createRadialGradient(x1, y1, r, x2, y2, r * w);

1960

stopMultiplier = 1;

1961

}

1962

else

1963

{

1964

gradient = this._context.createRadialGradient(x1, y1, r, x2, y2, w/2);

1965

stopMultiplier = r * 2;

1966

}

1967

for(; i < len; ++i)

1968

{

1969

stop = stops[i];

1970

opacity = stop.opacity;

1971

color = stop.color;

1972

offset = stop.offset;

1973

if(isNumber(opacity))

1974

{

1975

opacity = Math.max(0, Math.min(1, opacity));

1976

color = this._toRGBA(color, opacity);

1977

}

1978

else

1979

{

1980

color = TORGB(color);

1981

}

1982

offset = stop.offset || i/(len - 1);

1983

offset *= stopMultiplier;

1984

if(offset <= 1)

1985

{

1986

gradient.addColorStop(offset, color);

1987

}

1988

}

1989

return gradient;

1990

1991

1992

1993

/**

1994

* Clears all values

1995

1996

* @method _initProps

1997

* @private

1998

1999

_initProps: function() {

2000

this._methods = [];

2001

this._lineToMethods = [];

2002

this._xcoords = [0];

2003

this._ycoords = [0];

2004

this._width = 0;

2005

this._height = 0;

2006

this._left = 0;

2007

this._top = 0;

2008

this._right = 0;

2009

this._bottom = 0;

2010

2011

2012

/**

2013

* Indicates a drawing has completed.

2014

2015

* @property _drawingComplete

2016

* @type Boolean

2017

* @private

2018

2019

_drawingComplete: false,

2020

2021

/**

2022

* Creates canvas element

2023

2024

* @method _createGraphic

2025

* @return HTMLCanvasElement

2026

* @private

2027

2028

_createGraphic: function(config) {

2029

var graphic = Y.config.doc.createElement('canvas');

2030

return graphic;

2031

2032

2033

/**

2034

* Updates the size of the graphics object

2035

2036

* @method _trackSize

2037

* @param {Number} w width

2038

* @param {Number} h height

2039

* @private

2040

2041

_trackSize: function(w, h) {

2042

if (w > this._right) {

2043

this._right = w;

2044

}

2045

if(w < this._left)

2046

{

2047

this._left = w;

2048

}

2049

if (h < this._top)

2050

{

2051

this._top = h;

2052

}

2053

if (h > this._bottom)

2054

{

2055

this._bottom = h;

2056

}

2057

this._width = this._right - this._left;

2058

this._height = this._bottom - this._top;

2059

}

2060

};

2061

Y.CanvasDrawing = CanvasDrawing;

2062

2063

</pre>

2064

</div>

2065

2066

</div>

2067

</div>

2068

</div>

2069

</div>

2070

</div>

2071

</div>

2072

2073

2074

2075

2076

2077

2078

2079

2080

</body>

2081

</html>

Older »