mirror of
https://github.com/konvajs/konva.git
synced 2025-04-05 20:48:28 +08:00
181 lines
5.3 KiB
HTML
181 lines
5.3 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<title>KonvaJS Sandbox</title>
|
||
<meta
|
||
name="viewport"
|
||
content="width=device-width, initial-scale=1.0, user-scalable=1.0, minimum-scale=1.0, maximum-scale=1.0"
|
||
/>
|
||
<style>
|
||
body {
|
||
margin: 0;
|
||
}
|
||
</style>
|
||
<!-- <script src="https://cdn.rawgit.com/hammerjs/touchemulator/master/touch-emulator.js"></script> -->
|
||
<script>
|
||
// TouchEmulator();
|
||
</script>
|
||
<!-- <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>
|
||
<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';
|
||
|
||
//按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;
|
||
}
|
||
|
||
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}`
|
||
}
|
||
|
||
</script>
|
||
</body>
|
||
</html>
|