pascal.lafourcade
/
makeittrue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

continuation du commit precedent

Browse Source
master
pisouvigne 5 years ago
parent 8384278e4c
commit f4c3ce4fc7
2 changed files with 145 additions and 149 deletions
Show Stats Download Patch File Download Diff File

192
index.html
Unescape View File

@ -1,145 +1,77 @@
<!DOCTYPE html> <!DOCTYPE html>
<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> <head>
<div class="ui menu"> <link rel="stylesheet" type="text/css" href="semantic/semantic.min.css">
<div class="item"> <script src="https://code.jquery.com/jquery-3.1.1.min.js"
<div class="ui primary button">Jouer</div> integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
</div> <script src="semantic/semantic.min.js"></script>
<div class="item"> <script src="https://unpkg.com/konva@6.0.0/konva.min.js"></script>
<div class="ui button">Aide</div> <script src="js/func.js"></script>
</div> <meta charset="utf-8" />
<div class="item"> <title>Custom Shape</title>
<div class="ui button">Createur</div> <style>
</div> body {
<div class="item"> margin: 0;
<div class="ui button">Records</div> padding: 0;
</div> overflow: hidden;
}
</style>
</head>
<body>
<div class="ui menu">
<div class="item">
<div class="ui primary button">Jouer</div>
</div> </div>
<div id="container" style="border:1px solid red;"></div> <div class="item">
<script> <div class="ui button">Aide</div>
</div>
<div class="item">
<div class="ui button">Createur</div>
var stage = new Konva.Stage({ </div>
container: 'container', <div class="item">
width: window.innerWidth/2, <div class="ui button">Records</div>
height: window.innerHeight/2, </div>
}); </div>
<div id="container" style="border:1px solid red;"></div>
var etlogique = { <script>
entre1 : createEtLogique(300,50, "pd"),
entre2 : "200",
sortie : "500",
}
var layer = new Konva.Layer();
/*
* create a triangle shape by defining a
* drawing function which draws a triangle
*/
// add the triangle shape to the layer
var switchs = [], lines = [], logiques = [];
var logique = {
idown : "logique1",
id1 : "line1",
id2 : "line2",
id3 : "line3",
}
var imageObj2 = new Image(); logiques.push(logique);
imageObj2.onload = function () { console.log(logiques);
var yoda = new Konva.Image({
x: 500,
y: 50,
image: imageObj2,
width: 50,
height: 50,
id : "et",
});
// add the shape to the layer var layer = new Konva.Layer();
layer.add(yoda);
layer.batchDraw();
};
imageObj2.src = 'img/idea_white.png';
var stage = new Konva.Stage({
container: 'container',
width: window.innerWidth / 2,
height: window.innerHeight / 2,
});
var rect1 = new Konva.Rect({ initLayer();
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);
rect1.on('click', function () { var etlogique = {
var et = stage.findOne("#text"); entre1: createEtLogique(300, 50, "logique1"),
var line = stage.findOne("#line"); entre2: "200",
var text = et.text() == '1' ? '0' : '1'; sortie: "500",
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);
var lineFinal = new Konva.Line({ let line = createLine([120, 45, 300, 66], "line");
points: [400, 75, 500, 75], layer.add(line);
stroke: 'black', line = createLine([400, 75, 500, 75], "line");
strokeWidth: 3, layer.add(line);
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> </html>

102
js/func.js
Unescape View File

@ -1,20 +1,84 @@
function createEtLogique(x, y, id){ function createEtLogique(x, y, id) {
var imageObj = new Image(); var imageObj = new Image();
imageObj.onload = function () { imageObj.onload = function () {
var yoda = new Konva.Image({ var yoda = new Konva.Image({
x: x, x: x,
y: y, y: y,
image: imageObj, image: imageObj,
width: 100, width: 100,
height: 50, height: 50,
id : "pd", id: "pd",
}); });
// add the shape to the layer
layer.add(yoda); layer.add(yoda);
layer.batchDraw(); layer.batchDraw();
}; };
imageObj.src = 'img/logiqueet.png'; imageObj.src = 'img/logiqueet.png';
return imageObj; 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();
});
} }
Write Preview
Loading…
Cancel
Save