leafer-ui 1.0.7 → 1.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -0
- package/dist/web.cjs +13 -32
- package/dist/web.esm.js +13 -32
- package/dist/web.js +78 -117
- package/dist/web.min.js +1 -1
- package/dist/web.module.js +78 -117
- package/dist/web.module.min.js +1 -1
- package/package.json +11 -11
package/README.md
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
# leafer-ui
|
|
2
2
|
|
|
3
|
+
一款好用的 Canvas 渲染引擎，革新的体验。高效绘图 、UI 交互（小游戏、互动应用、组态）、图形编辑，前端开发必备～
|
|
4
|
+
|
|
3
5
|
[](https://www.leaferjs.com)
|
|
4
6
|
|
|
5
7
|
[**leafer-ui**](https://leaferjs.com/ui/guide/install/ui/start.html) 是基于核心库 [leafer](https://github.com/leaferjs/leafer) 开发的一套绚丽多彩的 UI 绘图、交互框架。作为[LeaferJS](https://www.leaferjs.com) 的表现层，可结合 AI 绘图、生成界面，表现力丰富、性能强劲，可媲美当前主流设计软件。
|
package/dist/web.cjs
CHANGED
|
@@ -1478,14 +1478,10 @@ function fillText(ui, canvas) {
|
|
|
1478
1478
|
const { rows, decorationY, decorationHeight } = ui.__.__textDrawData;
|
|
1479
1479
|
for (let i = 0, len = rows.length; i < len; i++) {
|
|
1480
1480
|
row = rows[i];
|
|
1481
|
-
if (row.text)
|
|
1481
|
+
if (row.text)
|
|
1482
1482
|
canvas.fillText(row.text, row.x, row.y);
|
|
1483
|
-
|
|
1484
|
-
|
|
1485
|
-
row.data.forEach(charData => {
|
|
1486
|
-
canvas.fillText(charData.char, charData.x, row.y);
|
|
1487
|
-
});
|
|
1488
|
-
}
|
|
1483
|
+
else if (row.data)
|
|
1484
|
+
row.data.forEach(charData => { canvas.fillText(charData.char, charData.x, row.y); });
|
|
1489
1485
|
if (decorationY)
|
|
1490
1486
|
canvas.fillRect(row.x, row.y + decorationY, row.width, decorationHeight);
|
|
1491
1487
|
}
|
|
@@ -1551,12 +1547,10 @@ function drawAlignStroke(align, stroke, isStrokes, ui, canvas) {
|
|
|
1551
1547
|
out.blendMode = align === 'outside' ? 'destination-out' : 'destination-in';
|
|
1552
1548
|
fillText(ui, out);
|
|
1553
1549
|
out.blendMode = 'normal';
|
|
1554
|
-
if (ui.__worldFlipped)
|
|
1550
|
+
if (ui.__worldFlipped)
|
|
1555
1551
|
canvas.copyWorldByReset(out, ui.__nowWorld);
|
|
1556
|
-
|
|
1557
|
-
else {
|
|
1552
|
+
else
|
|
1558
1553
|
canvas.copyWorldToInner(out, ui.__nowWorld, ui.__layout.renderBounds);
|
|
1559
|
-
}
|
|
1560
1554
|
out.recycle(ui.__nowWorld);
|
|
1561
1555
|
}
|
|
1562
1556
|
function drawTextStroke(ui, canvas) {
|
|
@@ -1564,14 +1558,10 @@ function drawTextStroke(ui, canvas) {
|
|
|
1564
1558
|
const { rows, decorationY, decorationHeight } = ui.__.__textDrawData;
|
|
1565
1559
|
for (let i = 0, len = rows.length; i < len; i++) {
|
|
1566
1560
|
row = rows[i];
|
|
1567
|
-
if (row.text)
|
|
1561
|
+
if (row.text)
|
|
1568
1562
|
canvas.strokeText(row.text, row.x, row.y);
|
|
1569
|
-
|
|
1570
|
-
|
|
1571
|
-
row.data.forEach(charData => {
|
|
1572
|
-
canvas.strokeText(charData.char, charData.x, row.y);
|
|
1573
|
-
});
|
|
1574
|
-
}
|
|
1563
|
+
else if (row.data)
|
|
1564
|
+
row.data.forEach(charData => { canvas.strokeText(charData.char, charData.x, row.y); });
|
|
1575
1565
|
if (decorationY)
|
|
1576
1566
|
canvas.strokeRect(row.x, row.y + decorationY, row.width, decorationHeight);
|
|
1577
1567
|
}
|
|
@@ -1624,12 +1614,10 @@ function stroke(stroke, ui, canvas) {
|
|
|
1624
1614
|
out.stroke();
|
|
1625
1615
|
options.windingRule ? out.clip(options.windingRule) : out.clip();
|
|
1626
1616
|
out.clearWorld(ui.__layout.renderBounds);
|
|
1627
|
-
if (ui.__worldFlipped)
|
|
1617
|
+
if (ui.__worldFlipped)
|
|
1628
1618
|
canvas.copyWorldByReset(out, ui.__nowWorld);
|
|
1629
|
-
|
|
1630
|
-
else {
|
|
1619
|
+
else
|
|
1631
1620
|
canvas.copyWorldToInner(out, ui.__nowWorld, ui.__layout.renderBounds);
|
|
1632
|
-
}
|
|
1633
1621
|
out.recycle(ui.__nowWorld);
|
|
1634
1622
|
break;
|
|
1635
1623
|
}
|
|
@@ -1664,12 +1652,10 @@ function strokes(strokes, ui, canvas) {
|
|
|
1664
1652
|
drawStrokesStyle(strokes, false, ui, out);
|
|
1665
1653
|
options.windingRule ? out.clip(options.windingRule) : out.clip();
|
|
1666
1654
|
out.clearWorld(renderBounds);
|
|
1667
|
-
if (ui.__worldFlipped)
|
|
1655
|
+
if (ui.__worldFlipped)
|
|
1668
1656
|
canvas.copyWorldByReset(out, ui.__nowWorld);
|
|
1669
|
-
|
|
1670
|
-
else {
|
|
1657
|
+
else
|
|
1671
1658
|
canvas.copyWorldToInner(out, ui.__nowWorld, renderBounds);
|
|
1672
|
-
}
|
|
1673
1659
|
out.recycle(ui.__nowWorld);
|
|
1674
1660
|
break;
|
|
1675
1661
|
}
|
|
@@ -1733,12 +1719,7 @@ function compute(attrName, ui) {
|
|
|
1733
1719
|
data['_' + attrName] = leafPaints.length ? leafPaints : undefined;
|
|
1734
1720
|
if (leafPaints.length && leafPaints[0].image)
|
|
1735
1721
|
hasOpacityPixel = leafPaints[0].image.hasOpacityPixel;
|
|
1736
|
-
|
|
1737
|
-
data.__pixelFill = hasOpacityPixel;
|
|
1738
|
-
}
|
|
1739
|
-
else {
|
|
1740
|
-
data.__pixelStroke = hasOpacityPixel;
|
|
1741
|
-
}
|
|
1722
|
+
attrName === 'fill' ? data.__pixelFill = hasOpacityPixel : data.__pixelStroke = hasOpacityPixel;
|
|
1742
1723
|
}
|
|
1743
1724
|
function getLeafPaint(attrName, paint, ui) {
|
|
1744
1725
|
if (typeof paint !== 'object' || paint.visible === false || paint.opacity === 0)
|
package/dist/web.esm.js
CHANGED
|
@@ -1479,14 +1479,10 @@ function fillText(ui, canvas) {
|
|
|
1479
1479
|
const { rows, decorationY, decorationHeight } = ui.__.__textDrawData;
|
|
1480
1480
|
for (let i = 0, len = rows.length; i < len; i++) {
|
|
1481
1481
|
row = rows[i];
|
|
1482
|
-
if (row.text)
|
|
1482
|
+
if (row.text)
|
|
1483
1483
|
canvas.fillText(row.text, row.x, row.y);
|
|
1484
|
-
|
|
1485
|
-
|
|
1486
|
-
row.data.forEach(charData => {
|
|
1487
|
-
canvas.fillText(charData.char, charData.x, row.y);
|
|
1488
|
-
});
|
|
1489
|
-
}
|
|
1484
|
+
else if (row.data)
|
|
1485
|
+
row.data.forEach(charData => { canvas.fillText(charData.char, charData.x, row.y); });
|
|
1490
1486
|
if (decorationY)
|
|
1491
1487
|
canvas.fillRect(row.x, row.y + decorationY, row.width, decorationHeight);
|
|
1492
1488
|
}
|
|
@@ -1552,12 +1548,10 @@ function drawAlignStroke(align, stroke, isStrokes, ui, canvas) {
|
|
|
1552
1548
|
out.blendMode = align === 'outside' ? 'destination-out' : 'destination-in';
|
|
1553
1549
|
fillText(ui, out);
|
|
1554
1550
|
out.blendMode = 'normal';
|
|
1555
|
-
if (ui.__worldFlipped)
|
|
1551
|
+
if (ui.__worldFlipped)
|
|
1556
1552
|
canvas.copyWorldByReset(out, ui.__nowWorld);
|
|
1557
|
-
|
|
1558
|
-
else {
|
|
1553
|
+
else
|
|
1559
1554
|
canvas.copyWorldToInner(out, ui.__nowWorld, ui.__layout.renderBounds);
|
|
1560
|
-
}
|
|
1561
1555
|
out.recycle(ui.__nowWorld);
|
|
1562
1556
|
}
|
|
1563
1557
|
function drawTextStroke(ui, canvas) {
|
|
@@ -1565,14 +1559,10 @@ function drawTextStroke(ui, canvas) {
|
|
|
1565
1559
|
const { rows, decorationY, decorationHeight } = ui.__.__textDrawData;
|
|
1566
1560
|
for (let i = 0, len = rows.length; i < len; i++) {
|
|
1567
1561
|
row = rows[i];
|
|
1568
|
-
if (row.text)
|
|
1562
|
+
if (row.text)
|
|
1569
1563
|
canvas.strokeText(row.text, row.x, row.y);
|
|
1570
|
-
|
|
1571
|
-
|
|
1572
|
-
row.data.forEach(charData => {
|
|
1573
|
-
canvas.strokeText(charData.char, charData.x, row.y);
|
|
1574
|
-
});
|
|
1575
|
-
}
|
|
1564
|
+
else if (row.data)
|
|
1565
|
+
row.data.forEach(charData => { canvas.strokeText(charData.char, charData.x, row.y); });
|
|
1576
1566
|
if (decorationY)
|
|
1577
1567
|
canvas.strokeRect(row.x, row.y + decorationY, row.width, decorationHeight);
|
|
1578
1568
|
}
|
|
@@ -1625,12 +1615,10 @@ function stroke(stroke, ui, canvas) {
|
|
|
1625
1615
|
out.stroke();
|
|
1626
1616
|
options.windingRule ? out.clip(options.windingRule) : out.clip();
|
|
1627
1617
|
out.clearWorld(ui.__layout.renderBounds);
|
|
1628
|
-
if (ui.__worldFlipped)
|
|
1618
|
+
if (ui.__worldFlipped)
|
|
1629
1619
|
canvas.copyWorldByReset(out, ui.__nowWorld);
|
|
1630
|
-
|
|
1631
|
-
else {
|
|
1620
|
+
else
|
|
1632
1621
|
canvas.copyWorldToInner(out, ui.__nowWorld, ui.__layout.renderBounds);
|
|
1633
|
-
}
|
|
1634
1622
|
out.recycle(ui.__nowWorld);
|
|
1635
1623
|
break;
|
|
1636
1624
|
}
|
|
@@ -1665,12 +1653,10 @@ function strokes(strokes, ui, canvas) {
|
|
|
1665
1653
|
drawStrokesStyle(strokes, false, ui, out);
|
|
1666
1654
|
options.windingRule ? out.clip(options.windingRule) : out.clip();
|
|
1667
1655
|
out.clearWorld(renderBounds);
|
|
1668
|
-
if (ui.__worldFlipped)
|
|
1656
|
+
if (ui.__worldFlipped)
|
|
1669
1657
|
canvas.copyWorldByReset(out, ui.__nowWorld);
|
|
1670
|
-
|
|
1671
|
-
else {
|
|
1658
|
+
else
|
|
1672
1659
|
canvas.copyWorldToInner(out, ui.__nowWorld, renderBounds);
|
|
1673
|
-
}
|
|
1674
1660
|
out.recycle(ui.__nowWorld);
|
|
1675
1661
|
break;
|
|
1676
1662
|
}
|
|
@@ -1734,12 +1720,7 @@ function compute(attrName, ui) {
|
|
|
1734
1720
|
data['_' + attrName] = leafPaints.length ? leafPaints : undefined;
|
|
1735
1721
|
if (leafPaints.length && leafPaints[0].image)
|
|
1736
1722
|
hasOpacityPixel = leafPaints[0].image.hasOpacityPixel;
|
|
1737
|
-
|
|
1738
|
-
data.__pixelFill = hasOpacityPixel;
|
|
1739
|
-
}
|
|
1740
|
-
else {
|
|
1741
|
-
data.__pixelStroke = hasOpacityPixel;
|
|
1742
|
-
}
|
|
1723
|
+
attrName === 'fill' ? data.__pixelFill = hasOpacityPixel : data.__pixelStroke = hasOpacityPixel;
|
|
1743
1724
|
}
|
|
1744
1725
|
function getLeafPaint(attrName, paint, ui) {
|
|
1745
1726
|
if (typeof paint !== 'object' || paint.visible === false || paint.opacity === 0)
|