DIR : /home/kozerus/public_html/go/konva20.html
/home/kozerus/public_html/go
<!DOCTYPE html>
<html>
<head>
<!-- <script src="https://unpkg.com/konva@4.2.0/konva.min.js"></script> -->
<script src="/go/js/konva_min.js"></script>
<!-- <link rel="stylesheet" href="./konva.css" /> -->
<meta charset="utf-8" />
<style id=style_konva20>
body {
padding: 0;
font-size: 16px;
overflow: hidden;
margin: 8px;
}
.main-div {
height: 98vh;
border: 1px solid wheat;
}
.track-container {
background-color: yellow;
}
.prop-container {
background-color: black;
}
</style>
<script id=script_startup_konva20>
function startup_konva20(args){
alert("BUGS_101 startup_konva20 args="+args);
draw();
alert("BUGS_102 startup_konva20 args="+args);
}
</script>
<script id=script_konva20>>
var stage = new Konva.Stage({
container: 'container', // id of container <div>
width: 500,
height: 500
});
// Call draw method to draw konva shapes
// then create layer
var layer = new Konva.Layer();
// create our shape
var circle = new Konva.Circle({
x: stage.width() / 2,
y: stage.height() / 2,
radius: 70,
fill: 'red',
stroke: 'black',
strokeWidth: 4
});
// add the shape to the layer
layer.add(circle);
// add the layer to the stage
stage.add(layer);
alert( "BUGS_111 draw" );
layer.draw();
alert( "BUGS_112 draw" );
var finalShapes = [];
// Create stage with using params stageConfig and add click event.
// If disableEvent is true for a stage - don't bind listener on that stage
function createStage(stageConfig) {
alert( "BUGS_50 stageConfig="+stageConfig );
let stage = new Konva.Stage(stageConfig);
if (!stageConfig.disableEvent) {
addEventOnKonvaStage(stage);
}
return stage;
}
// Bind Event Listener on stage
function addEventOnKonvaStage(stage) {
alert( "BUGS_60 stage="+stage );
stage.on('click', ($event) => {
finalShapes = [];
console.clear()
const evt = $event.evt;
console.log(evt.offsetX, evt.offsetY, $event.target.attrs);
if ($event.target.getClassName() === 'Stage') {return;}
readAllLayersOfStage(stage, evt);
if (finalShapes) {
if (finalShapes.length) {
alert(finalShapes.map((item) => item.id).join(', '));
}
console.log('Clicked Shapes: ', finalShapes.map((item) => item))
}
});
}
// Based on passed stage in param we read all layer of that stage.
// Get all shapes for each layer whose disableEvent is not set
function readAllLayersOfStage(stage, evt) {
alert( "BUGS_80 stage="+stage );
var layers = stage.getLayers();
layers.forEach(element => {
if (!element.attrs.disableEvent) {
element.children.each((item) => {
getOverlappedShapes(item, evt);
});
}
});
}
// Where user clicked - get all shapes on that particular points
function getOverlappedShapes(item, evt) {
alert( "BUGS_90 item="+item );
const attrs = item.attrs;
if (attrs.data) {
const hitStrokeWidth = attrs.hitStrokeWidth / 2;
let x, y;
switch (item.getClassName()) {
case 'Line':
if (Math.abs(attrs.points[1] - evt.offsetY) <= hitStrokeWidth) {
finalShapes.push(attrs)
}
break;
case 'Circle':
x = evt.offsetX >= (attrs.x - hitStrokeWidth - attrs.radius) && evt.offsetX <= (attrs.x + hitStrokeWidth + attrs.radius);
y = evt.offsetY >= (attrs.y - hitStrokeWidth - attrs.radius) && evt.offsetY <= (attrs.y + hitStrokeWidth + attrs.radius);
if (x && y) {finalShapes.push(attrs);}
break;
default:
x = evt.offsetX >= (attrs.x - hitStrokeWidth) && evt.offsetX <= (attrs.x + hitStrokeWidth + attrs.width);
y = evt.offsetY >= (attrs.y - hitStrokeWidth) && evt.offsetY <= (attrs.y + hitStrokeWidth + attrs.height);
if (x && y) {finalShapes.push(attrs);}
break;
}
}
}
// Draw layer and shapes
function draw() {
alert( "BUGS_120 draw" );
var container = document.getElementById('maincontainer');
var trackStage = createStage({
name: 'trackStage',
container: 'container',
width: container.offsetWidth,
height: container.offsetHeight * 80 / 100
});
var propStage = createStage({
name: 'propStage',
container: 'propContainer',
width: container.offsetWidth,
height: container.offsetHeight * 20 / 100,
disableEvent: true
});
var assetLayer = new Konva.Layer({name: 'assetLayer'});
var lineLayer = new Konva.Layer({name: 'lineLayer'});
var geoPositionLayer = new Konva.Layer({name: 'geoLayer', disableEvent: true});
var propLayer = new Konva.Layer({name: 'propLayer'});
var line1 = new Konva.Line({
id: 'line1',
points: [10, 80, 100, 80, 900, 80],
stroke: 'black',
strokeWidth: 1,
hitStrokeWidth: 6,
data: {
id: 'line1',
text: 'this is line1'
}
})
var line2 = new Konva.Line({
id: 'line2',
points: [280, 130, 700, 130],
stroke: 'black',
strokeWidth: 1,
hitStrokeWidth: 6,
data: {
id: 'line2',
text: 'this is line2'
}
})
var circle1 = new Konva.Circle({
id: 'circle1',
x: 90,
y: 70,
radius: 24,
fill: 'green',
stroke: 'black',
strokeWidth: 1,
hitStrokeWidth: 6,
data: {
text: 'this is circle',
a: 123,
b: 34223
},
opacity: 1
});
var rect1 = new Konva.Rect({
id: 'rect1',
x: 90,
y: 60,
width: 400,
height: 50,
fill: 'orange',
stroke: 'black',
strokeWidth: 1,
hitStrokeWidth: 6,
opacity: 0.5,
data: {
r: 123,
b: 34223
},
});
var rect2 = new Konva.Rect({
id: 'rect2',
x: 440,
y: 70,
width: 120,
height: 30,
fill: 'red',
stroke: 'black',
strokeWidth: 1,
opacity: 0.5,
hitStrokeWidth: 6,
data: {
id: 'rect2',
a: 234,
b: 2343244
}
});
var rect3 = new Konva.Rect({
id: 'rect3',
x: 620,
y: 70,
width: 40,
height: 50,
fill: 'pink',
stroke: 'black',
strokeWidth: 1,
opacity: 1,
hitStrokeWidth: 6,
data: {
id: 'rect2',
a: 234,
b: 2343244
}
});
var text1 = new Konva.Text({
x: 10,
y: 200,
text: 'This is Text Shape of Geo Layer which is not clickable',
fontSize: 15,
fill: 'green'
});
var text2 = new Konva.Text({
x: 200,
y: 30,
text: 'This is Text Shape of Asset Layer. (Cannot click on this shape because it does not have data property)',
fontSize: 13,
fill: 'blue'
});
var text3 = new Konva.Text({
x: 10,
y: 20,
text: 'This is Text Shape of Prop Stage (We have disabled click on this stage)',
fontSize: 15,
fill: 'white'
});
// add the shape to the assetLayer
lineLayer.add(line1);
lineLayer.add(line2);
assetLayer.add(circle1);
assetLayer.add(rect2);
assetLayer.add(rect1);
assetLayer.add(rect3);
assetLayer.add(text2);
geoPositionLayer.add(text1);
propLayer.add(text3);
trackStage.add(assetLayer);
trackStage.add(lineLayer);
trackStage.add(geoPositionLayer);
propStage.add(propLayer);
}
</script>
</head>
<body bgcolor=linen onload="startup_konva20('startup');return false;">
<h1>konva20 202112092300</h1>
<img src=/imgs/btn/koeye.png onclick="startup_konva20('click'); return false;" height=25>
start
<div id="maincontainer" class="main-div">
<div id="container" class="track-container"></div>
<div id="propContainer" class="prop-container"></div>
</div>
</body>
<!-- <script src="konva-service.js"></script> -->
</html>
//
koh5_pano
Drag mouse to navigate.
Navigation
- Left/Right Mouse drag: Changes camera heading.
- Up/Sown Mouse drag: Changes camera pitch.
- Scroll wheel: Changes camera field of view.
- I-Key: Displays Info panel with canvas size, image size and FPS.
17.Aug.2010, Martin Wengenmayer