Hey iemand een idee hoe ik het volgende kan oplossen?
Zodra ik text er in zet dan verplaatst hij naar binnen. Maar ik heb geen idee hoe ik dit kan oplossen iemand enig idee? Ik zal mijn code hier zetten.
Iemand die me hiermee kan helpen? Of een alternatief weet?
Dit is het stukje waar de transformatie gebeurd.
index.php compleet
Style.css
Index.js
Zodra ik text er in zet dan verplaatst hij naar binnen. Maar ik heb geen idee hoe ik dit kan oplossen iemand enig idee? Ik zal mijn code hier zetten.
Iemand die me hiermee kan helpen? Of een alternatief weet?
Dit is het stukje waar de transformatie gebeurd.
Code:
</script>
<span id="itm7" onclick="exchange(this);">Vraag 7</span><input ondblclick="exchange(this);" id="itm7b" class="replace" type="text" value="">
<span id="itm6" onclick="exchange(this);">Vraag 6</span><input ondblclick="exchange(this);" id="itm6b" class="replace" type="text" value="">
<span id="itm5" onclick="exchange(this);">Vraag 5</span><input ondblclick="exchange(this);" id="itm5b" class="replace" type="text" value="">
<span id="itm4" onclick="exchange(this);">Vraag 4</span><input ondblclick="exchange(this);" id="itm4b" class="replace" type="text" value="">
<span id="itm2" onclick="exchange(this);">Vraag 2</span><input ondblclick="exchange(this);" id="itm2b" class="replace" type="text" value="">
<span id="itm1" onclick="exchange(this);">Vraag 1</span><input ondblclick="exchange(this);" id="itm1b" class="replace" type="text" value="">
<script type="text/javascript">
function exchange(el){
var ie=document.all&&!document.getElementById? document.all : 0;
var toObjId=/b$/.test(el.id)? el.id.replace(/b$/,'') : el.id+'b';
var toObj=ie? ie[toObjId] : document.getElementById(toObjId);
if(/b$/.test(el.id))
toObj.innerHTML=el.value;
else{
toObj.style.width=el.offsetWidth+20+'px';
toObj.value=el.innerHTML;
}
el.style.display='none';
toObj.style.display='inline';
}
</script>index.php compleet
Code:
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
</head>
<script src='http://codepen.io/assets/libs/fullpage/jquery.js'></script>
<script src='http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.5.min.js'></script>
<script src="js/index.js"></script>
<body>
<div id="TestZ">
<form name="bgcolorForm">Welke kleur wil je
<select onChange="if(this.selectedIndex!=0)
Color=this.options[this.selectedIndex].value">
<option value="choose">set background color
<option value="Red">Red
<option value="Blue">Blue
<option value="Green">Green
<option value="Yellow">Yellow
<option value="Purple">Purple
<option value="Pink">Pink
</select>
</form>
</div>
<div id="OuterCirkel">
</div>
<div id="canvas-4">
</div>
<div id="Cirkel">
<span id="itm3" onclick="exchange(this);">Naam</span><input ondblclick="exchange(this);" id="itm3b" class="replace" type="text" value="">
</div>
<!-- <a href='test.html' id='mylink'>click me</a> -->
<input id="mylink" type="button" value="Kleur">
<script type="text/javascript">
var myLink = document.getElementById('mylink');
myLink.onclick = function(){
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "js/index.js.";
document.getElementsByTagName("head")[0].appendChild(script);
return false;
}
</script>
<span id="itm7" onclick="exchange(this);">Vraag 7</span><input ondblclick="exchange(this);" id="itm7b" class="replace" type="text" value="">
<span id="itm6" onclick="exchange(this);">Vraag 6</span><input ondblclick="exchange(this);" id="itm6b" class="replace" type="text" value="">
<span id="itm5" onclick="exchange(this);">Vraag 5</span><input ondblclick="exchange(this);" id="itm5b" class="replace" type="text" value="">
<span id="itm4" onclick="exchange(this);">Vraag 4</span><input ondblclick="exchange(this);" id="itm4b" class="replace" type="text" value="">
<span id="itm2" onclick="exchange(this);">Vraag 2</span><input ondblclick="exchange(this);" id="itm2b" class="replace" type="text" value="">
<span id="itm1" onclick="exchange(this);">Vraag 1</span><input ondblclick="exchange(this);" id="itm1b" class="replace" type="text" value="">
<script type="text/javascript">
function exchange(el){
var ie=document.all&&!document.getElementById? document.all : 0;
var toObjId=/b$/.test(el.id)? el.id.replace(/b$/,'') : el.id+'b';
var toObj=ie? ie[toObjId] : document.getElementById(toObjId);
if(/b$/.test(el.id))
toObj.innerHTML=el.value;
else{
toObj.style.width=el.offsetWidth+20+'px';
toObj.value=el.innerHTML;
}
el.style.display='none';
toObj.style.display='inline';
}
</script>
<!-- <form method="POST">
<input type="text" name="txtfield" />
<input type="submit" name="submit" value="Verzend"/>
</form> -->
</body>
</html>Style.css
Code:
#OuterCirkel
{
/* width:1000px;
height: 1000px;
-webkit-border-radius: 500px;
-moz-border-radius: 500px;
border-radius: 500px;
border:2px;
border-style: groove;*/
position: absolute;
border-color: black;
z-index: -1;
}
#canvas-4
{
margin-left:100px;
margin-top: 100px;
position: absolute;
}
#Cirkel
{
width: 200px;
height: 200px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
border:2px;
border-style: groove;
background-color: white;
position: absolute;
margin-top: 400px;
margin-left:400px;
border-color: black;
}
.replace {
display:none;
}
#itm3, #itm3b{
margin-left: 100px;
text-align: center;
margin-top: 100px;
position: absolute;
}
#itm1, #itm1b{
margin-left:325px;
margin-top: 65px;
z-index: 1;
position: absolute;
}
#itm2{
margin-left: 740px;
position: absolute;
margin-top:160px;
/* -ms-transform: rotate(40deg); /* IE 9 */
-webkit-transform: rotate(40deg); /* Chrome, Safari, Opera */
transform: rotate(40deg);
}
#itm2b
{
margin-left: 740px;
position: absolute;
margin-top:160px;
-ms-transform: rotate(40deg); /* IE 9 */
-webkit-transform: rotate(40deg); /* Chrome, Safari, Opera */
transform: rotate(40deg);
}
#itm4, #itm4b{
margin-left: 750px;
position: absolute;
margin-top:800px;
}
#itm5, #itm5b{
margin-left: 350px;
position: absolute;
margin-top:930px;
-ms-transform: rotate(10deg); /* IE 9 */
-webkit-transform: rotate(10deg); /* Chrome, Safari, Opera */
transform: rotate(10deg);
}
#itm6, #itm6b{
margin-left: 0px;
position: absolute;
margin-top:580px;
-ms-transform: rotate(75deg); /* IE 9 */
-webkit-transform: rotate(75deg); /* Chrome, Safari, Opera */
transform: rotate(75deg);
}
#itm7, #itm7b{
margin-left:0px;
position: absolute;
margin-top:400px;
-ms-transform: rotate(-80deg); /* IE 9 */
-webkit-transform: rotate(-80deg); /* Chrome, Safari, Opera */
transform: rotate(-80deg);
}
#TestZ{
z-index: 1;
}Index.js
Code:
$(document).ready(function() {
var segmentsMin = 5;
var segmentsMax = 40;
var Color;
var $canvasContainer = $('#canvas-4');
var canvasSettings = {
segments: 30,
segmentsMin: segmentsMin,
segmentsMax: segmentsMax,
dimension: 800,
fillColorDefault: 'white',
fillColorInteract: Color,
strokeColor: 'black',
strokeWidth: 2,
interactColoring: true,
interactSegmenting: true,
buttonsHeight: 21,
buttonsWidth: 80,
buttonsMarginY: 20,
buttonsFillColor: '#FFF',
buttonsStrokeColor: '#000',
};
var stage = new Kinetic.Stage({
container: $canvasContainer.attr('id'),
height: canvasSettings.dimension + canvasSettings.buttonsHeight + canvasSettings.buttonsMarginY,
width: canvasSettings.dimension
});
var coloredCircle = new coloredCirc(canvasSettings);
stage.add(coloredCircle);
$canvasContainer
.data('settings',canvasSettings)
/* END - Canvas - 4 */
});
function coloredCirc(settings) {
settings.centerPoint = {x: settings.dimension / 2, y: settings.dimension / 2};
settings.radius = settings.dimension / 2 - settings.strokeWidth;
var layer = new Kinetic.Layer();
if (settings.segments > 1) {
var wedgeAngleDegrees = Math.ceil(360 / settings.segments);
for (j=0; j < settings.segments; j++) {
var wedge = new Kinetic.Wedge({
x: settings.centerPoint.x,
y: settings.centerPoint.y,
radius: settings.radius,
angleDeg: wedgeAngleDegrees,
fill: settings.fillColorDefault,
stroke: settings.strokeColor,
strokeWidth: settings.strokeWidth,
rotationDeg: j * wedgeAngleDegrees
});
if (settings.interactColoring) {
wedge.on('click', function() {
this.setFill(this.attrs.fill == settings.fillColorDefault ? Color : settings.fillColorDefault);
layer.draw();
});
}
layer.add(wedge);
}
} else {
var circle = new Kinetic.Circle({
x: settings.centerPoint.x,
y: settings.centerPoint.y,
radius: settings.radius,
fill: settings.fillColorDefault,
stroke: settings.strokeColor,
strokeWidth: settings.strokeWidth,
});
if (settings.interactColoring) {
circle.on('click', function() {
this.setFill(this.attrs.fill == settings.fillColorDefault ? Color : settings.fillColorDefault);
layer.draw();
});
}
layer.add(circle);
}
if (settings.interactSegmenting) {
var buttonWidth = settings.buttonsWidth / 2;
var buttonMoreGroup = new Kinetic.Group({
x: 1,
y: settings.radius * 2 + settings.buttonsMarginY
})
.on('click', function() {
var layer = this.parent;
var stage = layer.parent;
var container = $(stage.attrs.container);
var canvasSettings = container.data('settings');
canvasSettings.segments = Math.min(canvasSettings.segments+5 , canvasSettings.segmentsMax);
//console.log(canvasSettings.segments);
var coloredCircle = new coloredCirc(canvasSettings);
layer.remove();
stage.add(coloredCircle);
})
.on('mousedown', function() {
var shape = this.get('Shape')[0];
var text = this.get('Text')[0];
var layer = this.parent;
shape.setFill('#666');
text.setStroke('#FFF');
layer.draw();
});
var buttonMoreRect = new Kinetic.Shape({
drawFunc: function(canvas) {
var radius = 5;
var width = 40;
var height = 21;
context = canvas.getContext('2d');
context.beginPath();
context.moveTo(radius, 0);
context.arcTo(0, 0, 0, radius, radius);
context.arcTo(0, height, radius, height, radius);
context.lineTo(width, height);
context.lineTo(width, 0);
context.closePath();
canvas.fillStroke(this);
},
fill: settings.buttonsFillColor,
stroke: settings.buttonsStrokeColor,
strokeWidth: 2,
cornerRadius: 5
});
/* var buttonMoreText = new Kinetic.Text({
x: 0,
y: 1,
text: '+',
width: buttonWidth,
align: 'center',
fontFamily: 'arial',
fontSize: 18,
stroke: '#000'
});
buttonMoreGroup.add(buttonMoreRect);
buttonMoreGroup.add(buttonMoreText);
layer.add(buttonMoreGroup);
var buttonLessGroup = new Kinetic.Group({
x: settings.buttonsWidth / 2,
y: settings.radius * 2 + settings.buttonsMarginY
})
.on('click', function() {
var layer = this.parent;
var stage = layer.parent;
var container = $(stage.attrs.container);
var canvasSettings = container.data('settings');
canvasSettings.segments = Math.max(canvasSettings.segments-5, canvasSettings.segmentsMin);
//console.log(canvasSettings.segments);
var coloredCircle = new coloredCirc(canvasSettings);
layer.remove();
stage.add(coloredCircle);
})
.on('mousedown', function() {
var shape = this.get('Shape')[0];
var text = this.get('Text')[0];
var layer = this.parent;
shape.setFill('#666');
text.setStroke('#FFF');
layer.draw();
});*/
// var buttonLessRect = new Kinetic.Shape({
// drawFunc: function(canvas) {
// var radius = 5;
// var width = 40;
// var height = 21;
// context = canvas.getContext('2d');
// context.beginPath();
// context.moveTo(0, 0);
// context.lineTo(0, height);
// context.arcTo(width, height, width, height - radius, radius);
// context.arcTo(width, 0, width -radius, 0, radius);
// context.closePath();
// canvas.fillStroke(this);
// },
// fill: settings.buttonsFillColor,
// stroke: settings.buttonsStrokeColor,
// strokeWidth: 2,
// cornerRadius: 5
// });
// var buttonLessText = new Kinetic.Text({
// x: 0,
// y: 0,
// text: '--',
// width: buttonWidth,
// align: 'center',
// fontFamily: 'arial',
// fontSize: 18,
// stroke: '#000'
// });
// buttonLessGroup.add(buttonLessRect);
// buttonLessGroup.add(buttonLessText);
// layer.add(buttonLessGroup);
//get a reference to the canvas
}
return layer;
}
$(document).ready(function() {
var segmentsMin = 5;
var segmentsMax = 40;
var Color;
var $canvasContainer = $('#OuterCirkel');
var canvasSettings = {
segments: 6,
segmentsMin: segmentsMin,
segmentsMax: segmentsMax,
dimension: 1000,
fillColorDefault: 'white',
fillColorInteract: Color,
strokeColor: 'black',
strokeWidth: 2,
interactColoring: true,
interactSegmenting: true,
buttonsHeight: 21,
buttonsWidth: 80,
buttonsMarginY: 20,
buttonsFillColor: '#FFF',
buttonsStrokeColor: '#000',
};
var stage = new Kinetic.Stage({
container: $canvasContainer.attr('id'),
height: canvasSettings.dimension + canvasSettings.buttonsHeight + canvasSettings.buttonsMarginY,
width: canvasSettings.dimension
});
var coloredCircle = new coloredCirc(canvasSettings);
stage.add(coloredCircle);
$canvasContainer
.data('settings',canvasSettings)
/* END - Canvas - 4 */
});
function coloredCirc(settings) {
settings.centerPoint = {x: settings.dimension / 2, y: settings.dimension / 2};
settings.radius = settings.dimension / 2 - settings.strokeWidth;
var layer = new Kinetic.Layer();
if (settings.segments > 1) {
var wedgeAngleDegrees = Math.ceil(360 / settings.segments);
for (j=0; j < settings.segments; j++) {
var wedge = new Kinetic.Wedge({
x: settings.centerPoint.x,
y: settings.centerPoint.y,
radius: settings.radius,
angleDeg: wedgeAngleDegrees,
fill: settings.fillColorDefault,
stroke: settings.strokeColor,
strokeWidth: settings.strokeWidth,
rotationDeg: j * wedgeAngleDegrees
});
if (settings.interactColoring) {
wedge.on('click', function() {
this.setFill(this.attrs.fill == settings.fillColorDefault ? Color : settings.fillColorDefault);
layer.draw();
});
}
layer.add(wedge);
}
} else {
var circle = new Kinetic.Circle({
x: settings.centerPoint.x,
y: settings.centerPoint.y,
radius: settings.radius,
fill: settings.fillColorDefault,
stroke: settings.strokeColor,
strokeWidth: settings.strokeWidth,
});
if (settings.interactColoring) {
circle.on('click', function() {
this.setFill(this.attrs.fill == settings.fillColorDefault ? Color : settings.fillColorDefault);
layer.draw();
});
}
layer.add(circle);
}
if (settings.interactSegmenting) {
var buttonWidth = settings.buttonsWidth / 2;
var buttonMoreGroup = new Kinetic.Group({
x: 1,
y: settings.radius * 2 + settings.buttonsMarginY
})
.on('click', function() {
var layer = this.parent;
var stage = layer.parent;
var container = $(stage.attrs.container);
var canvasSettings = container.data('settings');
canvasSettings.segments = Math.min(canvasSettings.segments+5 , canvasSettings.segmentsMax);
//console.log(canvasSettings.segments);
var coloredCircle = new coloredCirc(canvasSettings);
layer.remove();
stage.add(coloredCircle);
})
.on('mousedown', function() {
var shape = this.get('Shape')[0];
var text = this.get('Text')[0];
var layer = this.parent;
shape.setFill('#666');
text.setStroke('#FFF');
layer.draw();
});
var buttonMoreRect = new Kinetic.Shape({
drawFunc: function(canvas) {
var radius = 5;
var width = 40;
var height = 21;
context = canvas.getContext('2d');
context.beginPath();
context.moveTo(radius, 0);
context.arcTo(0, 0, 0, radius, radius);
context.arcTo(0, height, radius, height, radius);
context.lineTo(width, height);
context.lineTo(width, 0);
context.closePath();
canvas.fillStroke(this);
},
fill: settings.buttonsFillColor,
stroke: settings.buttonsStrokeColor,
strokeWidth: 2,
cornerRadius: 5
});
/* var buttonMoreText = new Kinetic.Text({
x: 0,
y: 1,
text: '+',
width: buttonWidth,
align: 'center',
fontFamily: 'arial',
fontSize: 18,
stroke: '#000'
});
buttonMoreGroup.add(buttonMoreRect);
buttonMoreGroup.add(buttonMoreText);
layer.add(buttonMoreGroup);
var buttonLessGroup = new Kinetic.Group({
x: settings.buttonsWidth / 2,
y: settings.radius * 2 + settings.buttonsMarginY
})
.on('click', function() {
var layer = this.parent;
var stage = layer.parent;
var container = $(stage.attrs.container);
var canvasSettings = container.data('settings');
canvasSettings.segments = Math.max(canvasSettings.segments-5, canvasSettings.segmentsMin);
//console.log(canvasSettings.segments);
var coloredCircle = new coloredCirc(canvasSettings);
layer.remove();
stage.add(coloredCircle);
})
.on('mousedown', function() {
var shape = this.get('Shape')[0];
var text = this.get('Text')[0];
var layer = this.parent;
shape.setFill('#666');
text.setStroke('#FFF');
layer.draw();
});*/
// var buttonLessRect = new Kinetic.Shape({
// drawFunc: function(canvas) {
// var radius = 5;
// var width = 40;
// var height = 21;
// context = canvas.getContext('2d');
// context.beginPath();
// context.moveTo(0, 0);
// context.lineTo(0, height);
// context.arcTo(width, height, width, height - radius, radius);
// context.arcTo(width, 0, width -radius, 0, radius);
// context.closePath();
// canvas.fillStroke(this);
// },
// fill: settings.buttonsFillColor,
// stroke: settings.buttonsStrokeColor,
// strokeWidth: 2,
// cornerRadius: 5
// });
// var buttonLessText = new Kinetic.Text({
// x: 0,
// y: 0,
// text: '--',
// width: buttonWidth,
// align: 'center',
// fontFamily: 'arial',
// fontSize: 18,
// stroke: '#000'
// });
// buttonLessGroup.add(buttonLessRect);
// buttonLessGroup.add(buttonLessText);
// layer.add(buttonLessGroup);
//get a reference to the canvas
}
return layer;
}
