pisouvigne
5 years ago
parent
8384278e4c
commit
f4c3ce4fc7
@ -1,145 +1,77 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" type="text/css" href="semantic/semantic.min.css">
|
||||
<script
|
||||
src="https://code.jquery.com/jquery-3.1.1.min.js"
|
||||
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
|
||||
crossorigin="anonymous"></script>
|
||||
<script src="semantic/semantic.min.js"></script>
|
||||
<script src="https://unpkg.com/konva@6.0.0/konva.min.js"></script>
|
||||
<script src="js/func.js"></script>
|
||||
<meta charset="utf-8" />
|
||||
<title>Custom Shape</title>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="ui menu">
|
||||
<div class="item">
|
||||
<div class="ui primary button">Jouer</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="ui button">Aide</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="ui button">Createur</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="ui button">Records</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="container" style="border:1px solid red;"></div>
|
||||
<script>
|
||||
|
||||
|
||||
|
||||
var stage = new Konva.Stage({
|
||||
container: 'container',
|
||||
width: window.innerWidth/2,
|
||||
height: window.innerHeight/2,
|
||||
});
|
||||
<head>
|
||||
<link rel="stylesheet" type="text/css" href="semantic/semantic.min.css">
|
||||
<script src="https://code.jquery.com/jquery-3.1.1.min.js"
|
||||
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
|
||||
<script src="semantic/semantic.min.js"></script>
|
||||
<script src="https://unpkg.com/konva@6.0.0/konva.min.js"></script>
|
||||
<script src="js/func.js"></script>
|
||||
<meta charset="utf-8" />
|
||||
<title>Custom Shape</title>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
var etlogique = {
|
||||
entre1 : createEtLogique(300,50, "pd"),
|
||||
entre2 : "200",
|
||||
sortie : "500",
|
||||
}
|
||||
<body>
|
||||
<div class="ui menu">
|
||||
<div class="item">
|
||||
<div class="ui primary button">Jouer</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="ui button">Aide</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="ui button">Createur</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="ui button">Records</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="container" style="border:1px solid red;"></div>
|
||||
<script>
|
||||
|
||||
|
||||
var layer = new Konva.Layer();
|
||||
var switchs = [], lines = [], logiques = [];
|
||||
|
||||
/*
|
||||
* create a triangle shape by defining a
|
||||
* drawing function which draws a triangle
|
||||
*/
|
||||
var logique = {
|
||||
idown : "logique1",
|
||||
id1 : "line1",
|
||||
id2 : "line2",
|
||||
id3 : "line3",
|
||||
}
|
||||
|
||||
// add the triangle shape to the layer
|
||||
logiques.push(logique);
|
||||
console.log(logiques);
|
||||
|
||||
|
||||
var layer = new Konva.Layer();
|
||||
|
||||
var imageObj2 = new Image();
|
||||
imageObj2.onload = function () {
|
||||
var yoda = new Konva.Image({
|
||||
x: 500,
|
||||
y: 50,
|
||||
image: imageObj2,
|
||||
width: 50,
|
||||
height: 50,
|
||||
id : "et",
|
||||
});
|
||||
var stage = new Konva.Stage({
|
||||
container: 'container',
|
||||
width: window.innerWidth / 2,
|
||||
height: window.innerHeight / 2,
|
||||
});
|
||||
|
||||
// add the shape to the layer
|
||||
layer.add(yoda);
|
||||
layer.batchDraw();
|
||||
};
|
||||
imageObj2.src = 'img/idea_white.png';
|
||||
|
||||
initLayer();
|
||||
|
||||
var rect1 = new Konva.Rect({
|
||||
x: 20,
|
||||
y: 20,
|
||||
width: 100,
|
||||
height: 50,
|
||||
stroke: 'black',
|
||||
strokeWidth: 4,
|
||||
id : "rect",
|
||||
});
|
||||
// add the shape to the layer
|
||||
layer.add(rect1);
|
||||
console.log(rect1);
|
||||
var simpleText = new Konva.Text({
|
||||
x: 20,
|
||||
y: 20,
|
||||
text: '0',
|
||||
fontSize: 30,
|
||||
fontFamily: 'Calibri',
|
||||
fill: 'black',
|
||||
id : "text",
|
||||
});
|
||||
layer.add(simpleText);
|
||||
var etlogique = {
|
||||
entre1: createEtLogique(300, 50, "logique1"),
|
||||
entre2: "200",
|
||||
sortie: "500",
|
||||
}
|
||||
|
||||
rect1.on('click', function () {
|
||||
var et = stage.findOne("#text");
|
||||
var line = stage.findOne("#line");
|
||||
var text = et.text() == '1' ? '0' : '1';
|
||||
var colorline = et.text() == '1' ? 'black' : 'blue';
|
||||
line.stroke(colorline);
|
||||
et.text(text);
|
||||
layer.draw();
|
||||
});
|
||||
var redLine = new Konva.Line({
|
||||
points: [120, 45, 300, 66],
|
||||
stroke: 'black',
|
||||
strokeWidth: 3,
|
||||
lineCap: 'round',
|
||||
lineJoin: 'round',
|
||||
id : "line",
|
||||
});
|
||||
layer.add(redLine);
|
||||
let line = createLine([120, 45, 300, 66], "line");
|
||||
layer.add(line);
|
||||
line = createLine([400, 75, 500, 75], "line");
|
||||
layer.add(line);
|
||||
|
||||
var lineFinal = new Konva.Line({
|
||||
points: [400, 75, 500, 75],
|
||||
stroke: 'black',
|
||||
strokeWidth: 3,
|
||||
lineCap: 'round',
|
||||
lineJoin: 'round',
|
||||
id : "lineFinal",
|
||||
});
|
||||
layer.add(lineFinal);
|
||||
|
||||
stage.add(layer);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
// add the layer to the stage
|
||||
stage.add(layer);
|
||||
console.log(layer);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,20 +1,84 @@
|
||||
function createEtLogique(x, y, id){
|
||||
var imageObj = new Image();
|
||||
imageObj.onload = function () {
|
||||
var yoda = new Konva.Image({
|
||||
x: x,
|
||||
y: y,
|
||||
image: imageObj,
|
||||
width: 100,
|
||||
height: 50,
|
||||
id : "pd",
|
||||
});
|
||||
|
||||
// add the shape to the layer
|
||||
layer.add(yoda);
|
||||
layer.batchDraw();
|
||||
};
|
||||
imageObj.src = 'img/logiqueet.png';
|
||||
|
||||
return imageObj;
|
||||
function createEtLogique(x, y, id) {
|
||||
var imageObj = new Image();
|
||||
imageObj.onload = function () {
|
||||
var yoda = new Konva.Image({
|
||||
x: x,
|
||||
y: y,
|
||||
image: imageObj,
|
||||
width: 100,
|
||||
height: 50,
|
||||
id: "pd",
|
||||
});
|
||||
|
||||
|
||||
layer.add(yoda);
|
||||
layer.batchDraw();
|
||||
};
|
||||
imageObj.src = 'img/logiqueet.png';
|
||||
|
||||
return imageObj;
|
||||
}
|
||||
|
||||
function createLine(points, id) {
|
||||
let line = new Konva.Line({
|
||||
points: points,
|
||||
stroke: 'black',
|
||||
strokeWidth: 3,
|
||||
lineCap: 'round',
|
||||
lineJoin: 'round',
|
||||
id: id,
|
||||
});
|
||||
return line
|
||||
}
|
||||
|
||||
function initLayer() {
|
||||
var imageObj2 = new Image();
|
||||
imageObj2.onload = function () {
|
||||
var yoda = new Konva.Image({
|
||||
x: 500,
|
||||
y: 50,
|
||||
image: imageObj2,
|
||||
width: 50,
|
||||
height: 50,
|
||||
id: "et",
|
||||
});
|
||||
|
||||
|
||||
layer.add(yoda);
|
||||
layer.batchDraw();
|
||||
};
|
||||
imageObj2.src = 'img/idea_white.png';
|
||||
|
||||
|
||||
var rect1 = new Konva.Rect({
|
||||
x: 20,
|
||||
y: 20,
|
||||
width: 100,
|
||||
height: 50,
|
||||
stroke: 'black',
|
||||
strokeWidth: 4,
|
||||
id: "rect",
|
||||
});
|
||||
|
||||
layer.add(rect1);
|
||||
var simpleText = new Konva.Text({
|
||||
x: 20,
|
||||
y: 20,
|
||||
text: '0',
|
||||
fontSize: 30,
|
||||
fontFamily: 'Calibri',
|
||||
fill: 'black',
|
||||
id: "text",
|
||||
});
|
||||
layer.add(simpleText);
|
||||
|
||||
rect1.on('click', function () {
|
||||
var et = stage.findOne("#text");
|
||||
var line = stage.findOne("#line");
|
||||
var text = et.text() == '1' ? '0' : '1';
|
||||
var colorline = et.text() == '1' ? 'black' : 'blue';
|
||||
line.stroke(colorline);
|
||||
et.text(text);
|
||||
layer.draw();
|
||||
});
|
||||
}
|
||||
Loading…
Reference in new issue