lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-09-18 18:10:54 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

update CHANGELOG with new version

Browse Source
This commit is contained in:
Anton Lavrenov
2022-03-21 13:49:55 -05:00
parent f31d6f5a36
commit a863db9580
6 changed files with 205 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

168
test/sandbox.html
View File

@@ -19,34 +19,162 @@
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.7/hammer.js"></script> -->
<!-- <script src="https://cdn.rawgit.com/hammerjs/touchemulator/master/touch-emulator.js"></script> -->
<!-- <script src="./hammer.js"></script> -->
<script src="https://unpkg.com/fabric@5.2.1/dist/fabric.js"></script>
</head>
<body>
<div id="container"></div>
<table>
<tr>
<td >
Circle Radius <input type="range" style="width: 100%;" value="2" max="100" min="-100" />
</td>
<td> </td>
<td>
path: <span id="path"></span>
</td>
</tr>
<tr>
<td>
<span> konva</span>
<div id="container" style="background-color:bisque;"></div>
</td>
<td> </td>
<td>
<span>fabric</span>
<div style="background-color:bisque;">
<canvas id="canvas" width="600" height="600">
</div>
</div>
</td>
</tr>
</table>
<script type="module">
import Konva from '../src/index.ts';
const stage = new Konva.Stage({
container: 'container',
width: window.innerWidth,
height: window.innerHeight,
});
const layer = new Konva.Layer();
stage.add(layer);
//按textPath参数， 测量文本宽度
function getTextWidth(txtPath) {
let atxt = new Konva.Text();
atxt.fontFamily(txtPath.fontFamily());
atxt.letterSpacing(txtPath.letterSpacing());
atxt.fontSize(txtPath.fontSize());
atxt.fontStyle(txtPath.fontStyle());
atxt.fontVariant(txtPath.fontVariant());
let w = atxt.measureSize(txt.text()).width;
atxt.destroy();
return w + 5;
}
const rect = new Konva.Rect({
x: 90,
y: 90,
width: 100,
height: 100,
fill: 'red',
draggable: true,
});
layer.add(rect);
var s = '对象是在画布上基于每个'
var canvas = new fabric.Canvas('canvas');
var stage = new Konva.Stage({
container: document.getElementById('container'),
width: 600,
height: 600,
});
var layer = new Konva.Layer();
stage.add(layer);
var pat=getArcPath(300, 100, 0);
var fabricText = new fabric.Text(s, {
fontSize: 22,
fontFamily: 'Arial',
top: 100,
left: 200,
//textAlign: 'center',
pathAlign: 'center',
charSpacing: 50,
path: new fabric.Path(pat, {
strokeWidth: 2,
fill: null,
stroke: '#ff0000',
visible: true
})
});
canvas.add(fabricText);
var txt = new Konva.TextPath({
x: 100, y: 200,
draggable: true,
fill: '#333',
fontSize: 22,
fontFamily: 'Arial',
text: s,
//align: 'center',
//textBaseline: "top",
// letterSpacing: 5,
data: pat
});
layer.add(txt);
const path = new Konva.Path({
x: txt.x(),
y: txt.y(),
data: txt.data(),
stroke: 'red'
});
layer.add(path);
document.querySelector("#path").innerHTML=pat;
for (let e of document.querySelectorAll('input[type="range"]')) {
e.addEventListener('input', () => {
let r = 650 - Math.abs(parseFloat(e.value) * 6);
let l = getTextWidth(txt) + 50;
let d = getArcPath(l, r, parseFloat(e.value) > 0 ? 0 : 1)
document.querySelector("#path").innerHTML=d;
txt.data(d);
path.data(txt.data())
fabricText.set("path",
new fabric.Path(d, {
strokeWidth: 1,
stroke: '#ff0000',
fill: null,
visible: true
})
)
canvas.renderAll();
});
}
function getArcPath(l, r, sweepFlag) {
const upc = true;
const n = (l / (2 * Math.PI * r)) * (Math.PI * 2);
const n2 = n / 2;
const largeArcFlag = n > Math.PI ? 1 : 0;
//js math. sin /cos 用的是弧度不是角度
const ax = Math.abs(r * Math.sin(n2));
const ay = Math.abs(r * Math.cos(n2));
let x1, y1, x2, y2;
x1 = r - ax;
x2 = r + ax;
if (n > 180) {
if (upc)
y1 = y2 = r + ay;
else
y1 = y2 = r - ay;
} else if (n == 180) {
x1 = 0;
y1 = 0;
x2 = r * 2;
y2 = 0;
} else {
if (upc)
y1 = y2 = r - ay;
else
y1 = y2 = r + ay;
}
x2 -= x1, y2 -= y1, x1 = 0, y1 = 0;
return `M${x1},${y1} A${r},${r} 0 ${largeArcFlag},${sweepFlag} ${x2},${y2}`
}
rect.on('dbltap tap', (e) => {
console.log(e.type);
});
</script>
</body>
</html>