I’m having a problem with the rendering of the radial gradient; in fact only last colour of the gradient list of colours is rendered. The first three circles are animated. Is there any conflict between gradient and up-dating loop to render the animation?
Thanks
This is my code:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Disc and Animated-Circle</title>
<style>
#canvasOne {
position: absolute;
border: dotted 2px black;
left: 50%;
margin-left: -450px;
top: 50%;
margin-top: -250px;
}
</style>
<script type="text/javascript">
window.addEventListener("load", eventWindowLoaded, false);
function eventWindowLoaded() {
canvasApp();
}
function canvasApp() {
var theCanvas = document.getElementById("canvasOne");
var context = theCanvas.getContext("2d");
drawScreen();
function drawScreen() {
//translation to centre canvas
context.setTransform(1, 0, 0, 1, 0, 0);
var x = canvasOne.width/2;
var y = canvasOne.height/2;
var circleWidth = 100;
var circleHeight = 100;
context.translate(x+.5*circleWidth, y+.5*circleHeight);
context.save();
//speed
r += speed;
//canvas
context.fillStyle = "blue";
context.fillRect(-(canvasOne.width/2+circleWidth/2), -(canvasOne.height/2+circleHeight/2), canvasOne.width, canvasOne.height);
//circle 1
context.strokeStyle = "#66f";
context.lineWidth = 4;
context.beginPath();
context.arc(-circleWidth/2, -circleHeight/2, r,(Math.PI/180)*0,(Math.PI/180)*360, false);
context.closePath();
//call circle 1
context.stroke();
context.restore();
//circle 2
context.strokeStyle = "#69f";
context.lineWidth = 4;
context.beginPath();
context.arc(-circleWidth/2, -circleHeight/2, r+4,(Math.PI/180)*0,(Math.PI/180)*360, false);
context.closePath();
//call circle 2
context.stroke();
context.restore();
//circle 3
context.strokeStyle = "#6cf";
context.lineWidth = 4;
context.beginPath();
context.arc(-circleWidth/2, -circleHeight/2, r+8,(Math.PI/180)*0,(Math.PI/180)*360, false);
context.closePath();
//call circle 3
context.stroke();
context.restore();
//disc gradient
var grad = context.createRadialGradient(100, 100, 0, 100, 100, 100);
grad.addColorStop(0, 'white');
grad.addColorStop(.5, 'grey');
grad.addColorStop(1, 'black');
context.fillStyle = grad;
//disc
context.beginPath();
context.arc(-circleWidth/2, -circleHeight/2, 100, (Math.PI/180)*0,(Math.PI/180)*360, false);
context.closePath();
//call disc
context.fill();
} //end drawScreen
var speed = 20;
var r = 100;
setInterval(drawScreen, 200);
} //end canvasApp
</script>
</head>
<body>
<canvas id="canvasOne" width="900" height="500">
Canvas is not supported.
</canvas>
</body>
</html>
You have the centre of the gradient at (100,100) which is not the centre of the circle.
Change the line
var grad = context.createRadialGradient(100, 100, 0, 100, 100, 100);
to
var grad = context.createRadialGradient(-circleWidth/2, -circleHeight/2, 0, -circleWidth/2, -circleHeight/2, 100);
Related
Why this clipTo method doesn't work on the latest fabricjs version, which you could resize the object container and the image inside it. Also you able to move the container object and image object.
var imgInstance = new fabric.Image(img, {
width: instanceWidth,
height: instanceHeight,
top: (canvas.getHeight() / 2 - instanceHeight / 2),
left: (canvas.getWidth() / 2 - instanceWidth / 2),
originX: 'left',
originY: 'top'
});
canvas.add(imgInstance);
imgInstance.clipTo = function(ctx) {
/* image clipping method doesn't work on latest fabricjs version*/
ctx.save();
ctx.setTransform(1, 0, 0, 1, 0, 0);
clippingRect.render(ctx);
ctx.restore();
};
http://jsfiddle.net/efmbrm4v/2/
Or is their another approach shape object inside is the image object.
There is some caching issue with the latest version of FabricJS. To get around that, you need to set objectCaching property to false for the rectangle object.
$(document).ready(function() {
var imageLoader = document.getElementById('imageLoader');
imageLoader.addEventListener('change', handleImage, false);
});
var canvas = new fabric.Canvas('myCanvas');
var clippingRect = new fabric.Rect({
left: 100,
top: 100,
width: 100,
height: 100,
fill: 'transparent',
opacity: 1,
objectCaching: false //<-- set this
});
canvas.add(clippingRect);
function handleImage(e) {
var reader = new FileReader();
reader.onload = function(event) {
var img = new Image();
img.onload = function() {
var instanceWidth, instanceHeight;
instanceWidth = img.width;
instanceHeight = img.height;
var imgInstance = new fabric.Image(img, {
width: instanceWidth,
height: instanceHeight,
top: (canvas.getHeight() / 2 - instanceHeight / 2),
left: (canvas.getWidth() / 2 - instanceWidth / 2),
originX: 'left',
originY: 'top'
});
canvas.add(imgInstance);
imgInstance.clipTo = function(ctx) {
ctx.save();
ctx.setTransform(1, 0, 0, 1, 0, 0);
clippingRect.render(ctx);
ctx.restore();
};
canvas.renderAll();
};
img.src = event.target.result;
};
reader.readAsDataURL(e.target.files[0]);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.13/fabric.min.js"></script>
<canvas id="myCanvas" width="400" height="300" style="border: 1px solid black"></canvas>
<br />
<label>Choose a File:</label>
<br/>
<br />
<input type="file" id="imageLoader" name="imageLoader" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
hi there I am having problems getting my function (which is a circle) to repeat. The code is for a house with smoke coming out from the top. the smoke is supposed to be a set of several circles, which will blow out of the chimney. These circles are controlled by the setTimeout method, which is connected to a slider in the html script which controls the speed at which the smoke is blowing out of the chimney.
my problem is that i can get the circle to animate once but it does not return back to it's original position and continue the loop. What am I doing wrong? any help would be appreaciated. here is the code:
javascript:
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.lineWidth = 4;
ctx.strokeLinecap = 'round';
var a = 1;
var speed = 100;
var posY = 100;
var posX = 200;
function foundation() {
//grass
ctx.fillStyle = "green";
ctx.strokeStyle = "#000000";
ctx.beginPath();
ctx.moveTo(25, 375);
ctx.lineTo(125, 325);
ctx.lineTo(471, 325);
ctx.lineTo(400, 375);
ctx.lineTo(25, 375);
ctx.fill();
ctx.stroke();
//front face ground
ctx.fillStyle = "#873600";
ctx.strokeStyle = "#000000";
ctx.beginPath();
ctx.moveTo(25, 375); //top left
ctx.lineTo(25, 425); //bottom left
ctx.lineTo(400, 425); //bottom right
ctx.lineTo(400, 375); //top right
ctx.lineTo(25, 375); //top line
ctx.fill();
ctx.stroke();
//east face ground
ctx.fillStyle = "#872000";
ctx.strokeStyle = "#000000";
ctx.beginPath();
ctx.moveTo(475, 325); //top right
ctx.lineTo(475, 375); //bottom right
ctx.lineTo(400, 425); //bottom line
ctx.lineTo(400, 375); //top left
ctx.lineTo(475, 325); //top right
ctx.fill();
ctx.stroke();
}
function house() {
//front face
ctx.fillStyle = "#2980B9";
ctx.strokeStyle = "#000000";
ctx.beginPath();
ctx.moveTo(110, 365);
ctx.lineTo(110, 200);
ctx.lineTo(375, 200);
ctx.lineTo(375, 365);
ctx.lineTo(110, 365);
ctx.fill();
ctx.stroke();
//east face
ctx.fillStyle = "#1760B4";
ctx.strokeStyle = "#000000";
ctx.beginPath();
ctx.moveTo(375, 200); //lower left
ctx.lineTo(415, 180); //
ctx.lineTo(415, 340);
ctx.lineTo(375, 365);
ctx.lineTo(375, 200);
ctx.fill();
ctx.stroke();
//roof front face
ctx.fillStyle = "#B41717";
ctx.strokeStyle = "#000000";
ctx.beginPath();
ctx.moveTo(95, 210);
ctx.lineTo(160, 140);
ctx.lineTo(395, 140);
ctx.lineTo(365, 210);
ctx.lineTo(365, 210);
ctx.lineTo(95, 210);
ctx.fill();
ctx.stroke();
//roof east face
ctx.fillStyle = "darkred";
ctx.strokeStyle = "#000000";
ctx.beginPath();
ctx.moveTo(365, 210);
ctx.lineTo(425, 190);
ctx.lineTo(395, 140);
ctx.lineTo(365, 210);
ctx.fill();
ctx.stroke();
//door
ctx.fillStyle = "darkred";
ctx.strokeStyle = "#000000";
ctx.beginPath();
ctx.moveTo(300, 365);
ctx.lineTo(300, 295);
ctx.lineTo(250, 295);
ctx.lineTo(250, 365);
ctx.lineTo(300, 365);
ctx.fill();
ctx.stroke();
//doorknob
ctx.fillStyle = "yellow";
ctx.strokeStyle = "#000000";
ctx.beginPath();
ctx.arc(290, 335, 5, 0, 2 * Math.PI, false);
ctx.fill();
ctx.stroke();
//walkway
ctx.fillStyle = "gray";
ctx.strokeStyle = "#000000";
ctx.beginPath();
ctx.moveTo(250, 365); //left point
ctx.lineTo(240, 375); //left side
ctx.lineTo(290, 375);
ctx.lineTo(300, 365);
ctx.fill();
ctx.stroke();
//window living room
ctx.fillStyle = "blue";
ctx.strokeStyle = "#000000";
ctx.beginPath();
ctx.moveTo(143, 347);
ctx.lineTo(143, 295);
ctx.lineTo(212, 295);
ctx.lineTo(212, 347);
ctx.lineTo(143, 347);
ctx.fill();
ctx.stroke();
//window top left
ctx.fillStyle = "blue";
ctx.strokeStyle = "#000000";
ctx.beginPath();
ctx.moveTo(143, 275);
ctx.lineTo(143, 225);
ctx.lineTo(212, 225);
ctx.lineTo(212, 275);
ctx.lineTo(143, 275);
ctx.fill();
ctx.stroke();
//window top right
ctx.fillStyle = "blue";
ctx.strokeStyle = "#000000";
ctx.beginPath();
ctx.moveTo(263, 275);
ctx.lineTo(263, 225);
ctx.lineTo(332, 225);
ctx.lineTo(332, 275);
ctx.lineTo(263, 275);
ctx.fill();
ctx.stroke();
//chimney front
ctx.fillStyle = "#B41717";
ctx.strokeStyle = "#000000";
ctx.beginPath();
ctx.moveTo(170, 130); //top left
ctx.lineTo(170, 180); //left side line
ctx.lineTo(200, 180); //bottom line
ctx.lineTo(200, 130); //right side line
ctx.lineTo(170, 130); //top side line
ctx.fill();
ctx.stroke();
//chimney east
ctx.fillStyle = "darkred";
ctx.strokeStyle = "#000000";
ctx.beginPath();
ctx.moveTo(200, 130); //top left
ctx.lineTo(215, 123); //top side line
ctx.lineTo(215, 170); //right side line
ctx.lineTo(200, 180); //
ctx.fill();
ctx.stroke();
//chimney top
ctx.fillStyle = "black";
ctx.strokeStyle = "#000000";
ctx.beginPath();
ctx.moveTo(170, 130); //top left
ctx.lineTo(185, 122); //left side
ctx.lineTo(210, 122); //top side
ctx.lineTo(200, 130);
ctx.fill();
ctx.stroke();
}
function smokeMed() {
ctx.beginPath();
ctx.arc(190, 90, 11, 0, Math.PI*2, true);
ctx.closePath();
ctx.lineWidth = 5;
ctx.fillStyle = 'lightgrey';
ctx.fill();
ctx.strokeStyle = 'gray';
ctx.stroke();
}
function smokeBig() {
ctx.beginPath();
ctx.arc(210, 70, 15, 0, Math.PI*2, true);
ctx.closePath();
ctx.lineWidth = 5;
ctx.fillStyle = 'lightgrey';
ctx.fill();
ctx.strokeStyle = 'gray';
ctx.stroke();
}
function animate2() {
var speed = document.getElementById('speedCont').value;
posY += -1;
posX +- 1;
ctx.fillStyle = "aqua";
ctx.fillRect(0,0, 220, 120);
ctx.fillStyle = "rgba(0,0,0,0.5)";
ctx.beginPath();
ctx.arc(posX, posY, 15, 0, Math.PI*2, true);
ctx.fill();
window.setTimeout(animate2, speed);
}
/** if (a == 1) {
ctx.clearRect(0, 0, 260, 105);
smoke();
a++;
} else if (a == 2) {
ctx.clearRect(0, 0, 260, 105);
smokeMed();
a++;
} else if (a == 3) {
ctx.clearRect(0, 0, 260, 105);
smokeBig();
a = 1;
} else {
ctx.clearRect(0, 0, 260, 105);
}
window.setTimeout(animate2, speed);
}
**/
window.onload = function all() {
foundation();
house();
animate2();
}
window.addEventListener("load", all, false);
//window.setInterval(animate2, 1000);
//window.setTimeout(animate2, speed);
html:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<canvas id="canvas" width="500" height="500">Get a new Browser!</canvas>
<script src="script.js" ></script>
<form>
<input type="range" min="10" max="250" value="100" id="speedCont"/>
</form>
</body>
</html>
css:
#canvas {
background-color: aqua;
border: 1px solid black;
margin-bottom: 10px ;
}
body {
background-color: gray;
}
input[type=range] {
-webkit-appearance: none;
border: 3px solid black;
width: 500px;
border-radius: 20px;
}
input[type=range]::-webkit-slider-runnable-track {
width: 500px;
height: 10px;
background: #ddd;
border: none;
border-radius: 20px;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: 3px solid black;
height: 30px;
width: 30px;
border-radius: 50%;
background: red;
margin-top: -8px;
}
input[type=range]:focus {
outline: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #ccc;
}
If you add the following line to the animate2 function:
if (posY < -13) posY = 100;
then when the smoke has left the canvas at the top it will restart again from its original location.
I'm having a hard time trying to get a cylinder aligned to a particular vector. I've seen and tried a number of possible solutions, but to no avail. My understanding is that all I should need to do is to position the cylinder at the center of the vector and use LookAt() to align it. Below I've attached a simple example of this where I add a line, then am attempting to align the cylinder to this line. Would anyone be able to tell me what I'm doing wrong? TIA
Roy
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
font-family: Monospace;
background-color: #000000;
margin: 0px;
overflow: hidden;
}
#info {
color: #fff;
position: absolute;
top: 10px;
width: 100%;
text-align: center;
z-index: 100;
display: block;
}
a {
color: skyblue;
}
.button {
background: #999;
color: #eee;
padding: 0.2em 0.5em;
cursor: pointer;
}
.highlight {
background: orange;
color: #fff;
}
span {
display: inline-block;
width: 60px;
float: left;
text-align: center;
}
.left-panel{
position: absolute;
top:0px;
left: 0px;
height:100%;
width:220px;
background-color:white;
}
.right-panel{
position: absolute;
top:0px;
right: 0px;
height:100%;
width:220px;
background-color:white;
}
</style>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/threejs/r76/three.min.js"></script>
<script src="http://threejs.org/examples/js/Detector.js"></script>
<script src="http://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var camera, scene, raycaster, renderer, model, cylinder;
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
var reader;
init();
function init() {
scene = new THREE.Scene();
scene.add(new THREE.AmbientLight(0x999999));
addLine();
addCylinder();
camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, 500 );
// Z is up for objects intended to be 3D printed.
camera.up.set(0, 0, 1);
camera.position.set(8, -72, 20);
camera.rotateOnAxis('X', 25);
camera.rotateOnAxis('Z', 0.0025);
camera.add(new THREE.PointLight(0xffffff, 0.8));
scene.add(camera);
var grid = new THREE.GridHelper(200, 100, 0x229922, 0x222222);//grid
grid.rotateOnAxis(new THREE.Vector3(1, 0, 0), 90 * (Math.PI / 180));
grid.receiveShadow = true;
scene.add(grid);
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setClearColor( 0x333399 );// scene background color
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild(renderer.domElement);
raycaster = new THREE.Raycaster();
raycaster.linePrecision = .05;
var controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.addEventListener( 'change', render );
controls.target.set( 0, 1.2, 2 );
controls.update();
window.addEventListener('resize', onWindowResize, false);
document.addEventListener('mousemove', onDocumentMouseMove, false);
render();
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
render();
}
function render() {
raycaster.setFromCamera(mouse, camera);
// calculate objects intersecting the picking ray
var intersects = raycaster.intersectObjects(scene.children);
renderer.render( scene, camera );
}
function addCylinder() {
//Mesh to align
var material = new THREE.MeshLambertMaterial({ color: 0x666666 });
cylinder = new THREE.Mesh(new THREE.CylinderGeometry(.2, .2, 7.5,8), material);
var vector = new THREE.Vector3(10, 0, 10);
cylinder.position.set(5, 0, 5);
//create a point to lookAt
var focalPoint = new THREE.Vector3(
cylinder.position.x + vector.x,
cylinder.position.y + vector.y,
cylinder.position.z + vector.z
);
//all that remains is setting the up vector (if needed) and use lookAt
//cylinder.up = new THREE.Vector3(0, 0, 1);//Z axis up
cylinder.lookAt(focalPoint);
scene.add(cylinder);
}
function addLine() {
var material = material = new THREE.LineBasicMaterial({ color: 0xff0000, linewidth: 1, fog: false });
var geometry = new THREE.Geometry();
geometry.vertices.push(
new THREE.Vector3(0,0,0),
new THREE.Vector3(10,0,10)
);
var line = new THREE.Line(geometry, material);
line.castShadow = true;
scene.add(line);
}
function onDocumentMouseMove(event) {
event.preventDefault();
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
render();
}
</script>
</body>
</html>
All you need to do is rotate the cylinder so it aligns with the z-axis instead of the y-axis.
cylinder = new THREE.Mesh( new THREE.CylinderGeometry( .2, .2, 7.5, 8 ), material );
cylinder.geometry.rotateX( Math.PI / 2 );
cylinder.geometry.translate( 0, 0, - 7.5 / 2 ); // optional
When you call object.lookAt( target ), the oject's local positive z-axis is oriented toward the target.
three.js r.82
I am trying to animate a donut using SNAP.svg. I am using the SNAP.animate function to calculate the path values. The problem is path is drawn from endAngle to startAngle, but I want the reverse of it.
Here is the codepen link http://codepen.io/junedchhipa/pen/qaeePP
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#chart {
text-align: center;
width: 100%;
margin-top: 60px;
margin-bottom: 60px;
margin-left: auto;
margin-right: auto;
padding: 0 0 0 25%;
height: 600px;
}
</style>
</head>
<body>
<svg id="chart"></svg>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js"></script>
<script>
var s = Snap("#chart");
var centerX = 279.6666666666667,
centerY = 279.6666666666667,
colors = ["#2b908f", "#f9a3a4", "#90ee7e", "#fa4443", "#69d2e7"],
x1 = [398.2520587792069, 418.9678919498291, 162.3925655822982, 227.28417802067494, 279.6666666666667],
y1 = [ 205.56628955139018, 291.8539446942142, 355.825358396268, 150.01545766974425, 139.83333333333334],
endAngle = [58, 95, 237, 338, 360],
startAngle = [0, 58, 95, 237, 338],
percent = [ 16.11111111111111, 10.277777777777777, 39.44444444444444, 28.055555555555557, 6.111111111111111],
begin = [0,1280,2560,3840,5120],
dur = 1280;
for(var i=0; i<5; i++) {
var el = s.path("");
el.node.id = "w" + i;
animateDonut(el, x1[i], y1[i], centerX, centerY, endAngle[i], startAngle[i], 139.833, percent[i], begin[i], dur, colors[i])
}
function animateDonut(el, x1, y1, centerX, centerY, endAngle, startAngle, size, percent, begin, dur, color ) {
window.setTimeout(function() {
var endpoint = (percent/100)*360;
Snap.animate(0, endpoint, function (val) {
var d = endAngle - val,
dr = d-90,
radians = Math.PI*dr/180,
x2 = centerX + size*Math.cos(radians),
y2 = centerY + size*Math.sin(radians),
largeArc = val>180 ? 1 : 0,
path = "M"+x1+","+y1+" A"+size+","+size+" 0 "+largeArc+",0 "+x2+","+y2;
el.attr({
d: path,
stroke: color,
fill: 'none',
strokeWidth: 40
});
console.log(el.node.getAttribute('id'),d)
},dur, mina.easeinout);
}, begin)
}
</script>
</html>
Nevermind, played with the StartAngle values and got it working.
Updated codepen http://codepen.io/junedchhipa/pen/qaeePP
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#chart {
text-align: center;
width: 100%;
margin-top: 60px;
margin-bottom: 60px;
margin-left: auto;
margin-right: auto;
padding: 0 0 0 25%;
height: 600px;
}
</style>
</head>
<body>
<svg id="chart"></svg>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js"></script>
<script>
var s = Snap("#chart");
var centerX = 279.6666666666667,
centerY = 279.6666666666667,
colors = ["#2b908f", "#f9a3a4", "#90ee7e", "#fa4443", "#69d2e7"],
x1 = [398.2520587792069, 418.9678919498291, 162.3925655822982, 227.28417802067494, 279.6666666666667],
y1 = [ 205.56628955139018, 291.8539446942142, 355.825358396268, 150.01545766974425, 139.83333333333334],
endAngle = [58, 95, 237, 338, 360],
startAngle = [0, 58, 95, 237, 338],
percent = [ 16.11111111111111, 10.277777777777777, 39.44444444444444, 28.055555555555557, 6.111111111111111],
begin = [0,500,1000,1500,2000],
dur = 500;
for(var i=0; i<5; i++) {
var el = s.path("");
el.node.id = "w" + i;
animateDonut(el, x1[i], y1[i], centerX, centerY, endAngle[i], startAngle[i], 139.833, percent[i], begin[i], dur, colors[i])
}
function animateDonut(el, x1, y1, centerX, centerY, endAngle, startAngle, size, percent, begin, dur, color ) {
window.setTimeout(function() {
var endpoint = (percent/100)*360;
Snap.animate(0, endpoint, function (val) {
var startDeg = startAngle,
startRadians = Math.PI*(startDeg-90)/180,
endDeg = startDeg + val,
endRadians = Math.PI*(endDeg-90)/180,
x1 = centerX + size*Math.cos(startRadians),
y1 = centerY + size*Math.sin(startRadians),
x2 = centerX + size*Math.cos(endRadians),
y2 = centerY + size*Math.sin(endRadians),
largeArc = val>180 ? 1 : 0,
path = "M"+x1+","+y1+" A"+size+","+size+" 0 "+largeArc+",1 "+x2+","+y2;
el.attr({
d: path,
stroke: color,
fill: 'none',
strokeWidth: 40
});
console.log(el.node.getAttribute('id'),"startDeg",startDeg)
console.log(el.node.getAttribute('id'),"endDeg",endDeg)
},dur, mina.easeinout);
}, begin)
}
</script>
</html>
I am trying to place an image inside a circle using:
var gArrow2 = new Image();
gArrow2.src = '../../Content/images/green_s.png';
var circle2 = new Kinetic.Circle({
drawFunc: function(canvas) {
var context = canvas.getContext();
context.drawImage(gArrow2, 256, 256, 11, 23);
context.beginPath();
context.arc(256, 256, this.getRadius(), 0, 2 * Math.PI, false);
context.lineWidth = this.getStrokeWidth();
context.strokeStyle = this.getStroke();
context.stroke();
},
x: 256,
y: 256,
radius: 70,
stroke: '#00ffff',
strokeWidth: 4,
opacity: 0.5
});
layer2.add(circle2);
It does not work! I would appreciate your suggestions, thanks in advance.
You have to give gArrow2 time to load. You do this through gArrow2.onload.
Always put gArrow2.src after it's onload.
Then put any code that uses gArrow2 inside the onload function.
[Edit to add layer2.draw()]
I plugged your code in and got it working.
Looks like all that was needed was layer2.draw();
Here is code and a Fiddle: http://jsfiddle.net/m1erickson/Qgnkx/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Prototype</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.3.3-beta.js"></script>
<style>
#container{
border:solid 1px #ccc;
margin-top: 10px;
}
</style>
<script>
$(function(){
var stage = new Kinetic.Stage({
container: 'container',
width: 600,
height: 600
});
var layer2 = new Kinetic.Layer();
stage.add(layer2);
var gArrow2 = new Image();
gArrow2.onload=function(){
var circle2 = new Kinetic.Circle({
drawFunc: function(canvas) {
var context = canvas.getContext();
context.drawImage(gArrow2, 256, 256, 11, 23);
context.beginPath();
context.arc(256, 256, this.getRadius(), 0, 2 * Math.PI, false);
context.lineWidth = this.getStrokeWidth();
context.strokeStyle = this.getStroke();
context.stroke();
},
x: 256,
y: 256,
radius: 70,
stroke: '#00ffff',
strokeWidth: 4,
opacity: 0.5
});
layer2.add(circle2);
layer2.draw();
}
gArrow2.src = 'http://dl.dropbox.com/u/139992952/stackoverflow/house1.jpg';
}); // end $(function(){});
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>