http://www.google.com/chromebook/#features
When you hover the logo, you can see a shiny animation.
I have looked into the source code but it doesn't look like done with :hover
any idea about how they do it?
Thank you very much
It's using the CHEDDAR Canvas Animation Framework by Eric Lee. Cheddar is based off of Cake.js by Ilmari Heikkinen http://code.google.com/p/cakejs/
This file : http://www.gstatic.com/chromebook/js/third_party/chromeicons-main.min.js
Look at the HTML source. It's done using a <canvas>.
<div id="header-logo">
<noscript>
<a data-g-label="MAIN-NAV-HOME" href="index.html" id="header-logo-noscript">
<img alt="Chrome" src="static/images/chromelogo-124x34.png">
</a>
</noscript>
<canvas height="40" id="canvas-logo" width="123">
<a data-g-label="MAIN-NAV-HOME" href="index.html">
<img alt="Chrome" src="static/images/chromelogo-124x34.png">
</a>
</canvas>
</div>
The relevant script appears to be chromeicons-main.min.js.
It's done with a canvas element.
Firebug says it's a canvas, which means HTML5.
The script http://www.gstatic.com/chromebook/js/third_party/chromeicons-main.min.js appears to contain a "canvas animation framework" that does the job.
If you look sources, you will see they use CHEDDAR Canvas Animation Framework to animate this logo.
looks like some canvas stuff to me. (nice beginner tutorial here)
This appears to be the relevant portion of chromeicons-main.min.js. for the chrome logo itself.
ChromeLogo = CClass(CanvasNode, {
center_gradient: new Gradient({
type: "radial",
startX: 7,
startY: -7,
endRadius: 14,
colorStops: [
[1, "#005791"],
[0.62, "#2284DC"],
[0, "#86B9E2"]
]
}),
center_back: new Gradient({
type: "radial",
endRadius: 14,
colorStops: [
[0, "#D2D2D2"],
[1, "#FFFFFF"]
]
}),
top_gradient: new Gradient({
type: "radial",
endRadius: 16,
colorStops: [
[0.15, "#F37C65"],
[1, [243, 124, 90, 0]]
]
}),
highlight_gradient3: new Gradient({
type: "radial",
startX: 0,
startY: 0,
endRadius: 40,
colorStops: [
[1, "rgba(255,255,255,0)"],
[0.4, "rgba(255,255,255,.4)"],
[0, "rgba(255,255,255,0)"]
]
}),
highlight_gradient4: new Gradient({
type: "radial",
startX: 0,
startY: 0,
endRadius: 8,
colorStops: [
[1, "rgba(255,255,255,0)"],
[0.4, "rgba(255,255,255,.5)"],
[0, "rgba(255,255,255,0)"]
]
}),
highlight_gradient5: new Gradient({
type: "radial",
startX: 0,
startY: 0,
endRadius: 8,
colorStops: [
[1, "rgba(255,255,255,0)"],
[0.5, "rgba(255,255,255,.9)"],
[0, "rgba(255,255,255,0)"]
]
}),
initialize: function () {
CanvasNode.initialize.call(this);
this.scale = 0.78;
this.catchMouse = false;
this.textGlow = new Circle(30, {
fill: this.highlight_gradient5,
x: 22,
y: 23,
zIndex: 2
});
this.append(this.textGlow);
this.center = new Circle(7.5, {
fill: this.center_gradient,
x: 22,
y: 23,
zIndex: 4,
clip: true
});
this.centerBack = new Circle(9, {
fill: this.center_back,
x: 22,
y: 23,
zIndex: 3
});
this.border = new CanvasNode({
zIndex: 2
});
this.mask = new CanvasNode({
x: 22,
y: 23
});
this.ch3 = new Circle(8, {
fill: this.highlight_gradient4,
scale: 0.1,
opacity: 0,
compositeOperation: "lighter"
});
this.center.append(this.ch3);
this.red = _iconController.asset("logo_red");
this.red.childNodes[0].clip = true;
this.red.setProps({
x: -17,
y: -20,
clip: true
});
this.redShadow = _iconController.asset("shadow_red");
this.redShadow.setProps({
x: -17,
y: -13,
zIndex: 2
});
this.rh3 = new Circle(40, {
fill: this.highlight_gradient3,
scale: 0.1,
opacity: 1,
compositeOperation: "lighter",
x: 17,
y: 20,
zIndex: 4
});
this.red.childNodes[0].append(this.rh3);
this.yellow = _iconController.asset("logo_yellow");
this.yellow.setProps({
x: -1.5,
y: -9
});
this.yellow.childNodes[0].clip = true;
this.yellowShadow = _iconController.asset("shadow_yellow");
this.yellowShadow.setProps({
zIndex: 2,
x: 1,
y: -9
});
this.yh3 = new Circle(40, {
fill: this.highlight_gradient3,
scale: 0.1,
opacity: 1,
compositeOperation: "lighter",
x: 1.5,
y: 9,
zIndex: 4
});
this.yellow.childNodes[0].append(this.yh3);
this.green = _iconController.asset("logo_green");
this.green.setProps({
x: -20,
y: -11
});
this.green.childNodes[0].clip = true;
this.greenShadow = _iconController.asset("shadow_green");
this.greenShadow.setProps({
x: -2,
y: 5,
zIndex: 2
});
this.gh3 = new Circle(40, {
fill: this.highlight_gradient3,
scale: 0.1,
opacity: 1,
compositeOperation: "lighter",
x: 20,
y: 11.5,
zIndex: 4
});
this.green.childNodes[0].append(this.gh3);
this.top = new Circle(19, {
fill: false,
clip: true,
x: 24,
y: 23,
zIndex: 5
});
this.topGrad = new Circle(19, {
fill: this.top_gradient,
x: -2,
y: -24
});
this.mask.append(this.red, this.redShadow, this.yellow, this.yellowShadow, this.green, this.greenShadow);
this.border.append(this.mask);
this.top.append(this.topGrad);
this.append(this.border, this.centerBack, this.center, this.top);
this.text = _iconController.asset("logo_text");
this.text.setProps({
x: 49,
y: 8
});
for (var a = 0; a < this.text.childNodes[0].childNodes.length; a++) {
this.text.childNodes[0].childNodes[a].opacity = 1
}
this.append(this.text)
},
mouseOver: function () {
this.canvas.play();
_tw.removeTweensOf([this.textGlow, this.rh3, this.yh3, this.gh3, this.ch3]);
this.textGlow.scale = this.ch3.scale = this.rh3.scale = this.gh3.scale = this.yh3.scale = 0.1;
this.textGlow.opacity = this.rh3.opacity = this.gh3.opacity = this.yh3.opacity = 1;
var a = new Array(0, 0.1, 0.2, 0.3);
var b = shuffle(a);
_tw.addTween(this.center, {
time: 0.1,
scale: 1.02,
transition: "easeOutQuad"
});
_tw.addTween(this.centerBack, {
time: 0.1,
scale: 1.02,
transition: "easeOutQuad"
});
_tw.addTween(this.mask, {
time: 0.1,
scale: 1.02,
transition: "easeOutQuad",
onComplete: function (c) {
_tw.addTween(c.center, {
time: 0.5,
scale: 1,
transition: "easeInOutBack"
});
_tw.addTween(c.centerBack, {
time: 0.55,
scale: 1,
transition: "easeInOutBack"
});
_tw.addTween(c.mask, {
time: 0.55,
scale: 1,
transition: "easeInOutBack"
})
},
onCompleteParams: [this]
});
_tw.addTween(this.rh3, {
time: 2,
delay: b[0],
scale: 4,
opacity: 0,
transition: "easeOutCubic"
});
_tw.addTween(this.yh3, {
time: 2,
delay: b[1],
scale: 4,
opacity: 0,
transition: "easeOutCubic"
});
_tw.addTween(this.gh3, {
time: 2,
delay: b[2],
scale: 4,
opacity: 0,
transition: "easeOutCubic"
});
_tw.addTween(this.ch3, {
time: 0.2,
delay: b[3],
scale: 10,
opacity: 1,
transition: "linear",
onComplete: function (c) {
_tw.addTween(c.ch3, {
time: 0.25,
opacity: 0
})
},
onCompleteParams: [this]
});
_tw.addTween(this.textGlow, {
time: 10,
delay: 0.5,
scale: 120,
opacity: 0.2,
onComplete: function (c) {
c.canvas.stop()
},
onCompleteParams: [this]
})
},
mouseOut: function () {}
});
_iconController.initializeIcon("canvas-logo", ChromeLogo);
Related
I'm using nivo charts to visualize some sick datasets.
The example is like this,
import { ResponsiveLine } from '#nivo/line'
const MyResponsiveLine = ({ data /* see data tab */ }) => (
<ResponsiveLine
data={data}
margin={{ top: 50, right: 110, bottom: 50, left: 60 }}
xScale={{ type: 'point' }}
yScale={{ type: 'linear', min: 'auto', max: 'auto', stacked: true, reverse: false }}
yFormat=" >-.2f"
axisTop={null}
axisRight={null}
axisBottom={{
orient: 'bottom',
tickSize: 5,
tickPadding: 5,
tickRotation: 0,
legend: 'transportation',
legendOffset: 36,
legendPosition: 'middle'
}}
axisLeft={{
orient: 'left',
tickSize: 5,
tickPadding: 5,
tickRotation: 0,
legend: 'count',
legendOffset: -40,
legendPosition: 'middle'
}}
pointSize={10}
pointColor={{ theme: 'background' }}
pointBorderWidth={2}
pointBorderColor={{ from: 'serieColor' }}
pointLabelYOffset={-12}
useMesh={true}
legends={[
{
anchor: 'bottom-right',
direction: 'column',
justify: false,
translateX: 100,
translateY: 0,
itemsSpacing: 0,
itemDirection: 'left-to-right',
itemWidth: 80,
itemHeight: 20,
itemOpacity: 0.75,
symbolSize: 12,
symbolShape: 'circle',
symbolBorderColor: 'rgba(0, 0, 0, .5)',
effects: [
{
on: 'hover',
style: {
itemBackground: 'rgba(0, 0, 0, .03)',
itemOpacity: 1
}
}
]
}
]}
/>
)
With the data simply like this,
0: 0
1: 0
2: 0
3: 0
4: 0
5: 0
6: 0
7: 0
8: 0
9: 0
10: 0
11: 0
12: 0
13: 0
14: 0
15: -4.1524
16: -2.1525
17: -3.12351
18: 5.123123
19: 3.123123
20: 0.6547929999999998
21: 0.414856
22: -1.1863169999999998
23: 0.7934469999999998
I want to really simply add in a at time 10, 14, 18 a line for when i exercise. Ideally, I'd like to be able to shade the area beneath that line for 4 hours afterwards, in a sort of parabola (or a specific shape really), having the shading finish at 4 hours after.
I'm quite lost on how to achieve this with Nivo Charts. I suppose this isn't a normal functionality but was wondering if there was something I was missing that I could work in?
A good example of what I'm trying to achieve is like this sandbox,
https://codesandbox.io/s/simple-composed-chart-forked-b0bfi
I'd be happy to use this sandboxes code if it could be a bit more visually appealing, ideally like to stick with nivo though!
Thanks!
You can do this using a custom area layer. https://nivo.rocks/storybook/?path=/story/line--custom-layers
Here is a working example based on your initial example. The added area layer parts are commented:
import { ResponsiveLine } from '#nivo/line'
/* Added these two imports */
import { Defs } from '#nivo/core'
import { area, curveMonotoneX } from 'd3-shape'
function App() {
let data = [{
id:"data",
data: [
{ x:0, y:0 },
{ x:1, y:0 },
{ x:2, y:0 },
{ x:3, y:0 },
{ x:4, y:0 },
{ x:5, y:0 },
{ x:6, y:0 },
{ x:7, y:0 },
{ x:8, y:0 },
{ x:9, y:0 },
{ x:10, y: 0 },
{ x:11, y: 0 },
{ x:12, y: 0 },
{ x:13, y: 0 },
{ x:14, y: 0 },
{ x:15, y: -4.1524 },
{ x:16, y: -2.1525 },
{ x:17, y: -3.12351 },
{ x:18, y: 5.123123 },
{ x:19, y: 3.123123 },
{ x:20, y: 0.6547929999999998 },
{ x:21, y: 0.414856 },
{ x:22, y: -1.1863169999999998 },
{ x:23, y: 0.7934469999999998 }]
}];
/* Added this AreaLayer function */
function createAreaLayer(startingXCoordinate) {
let areaData = [
{data: {x: startingXCoordinate, y: 5}},
{data: {x: startingXCoordinate + 0.5, y: repeatRoot(10, 1) - 1}},
{data: {x: startingXCoordinate + 1, y: repeatRoot(10, 2) - 1}},
{data: {x: startingXCoordinate + 1.5, y: repeatRoot(10, 3) - 1}},
{data: {x: startingXCoordinate + 2, y: repeatRoot(10, 4) - 1}},
{data: {x: startingXCoordinate + 2.5, y: repeatRoot(10, 5) - 1}},
{data: {x: startingXCoordinate + 3, y: repeatRoot(10, 6) - 1}},
{data: {x: startingXCoordinate + 3.5, y: repeatRoot(10, 7) - 1}},
{data: {x: startingXCoordinate + 4, y: 0}},
];
function repeatRoot(number, times) {
if (times === 1) {
return Math.sqrt(number);
} else {
return Math.sqrt(repeatRoot(number, times - 1));
}
}
function interpolatedXScale(xScale, x) {
const floorX = Math.floor(x);
const decimalPart = x - floorX;
return xScale(floorX) + (xScale(floorX + 1) - xScale(floorX)) * decimalPart;
}
return function({series, xScale, yScale, innerHeight}) {
const areaGenerator = area()
.x(d => interpolatedXScale(xScale, d.data.x))
.y0(yScale(0))
.y1(d => yScale(d.data.y))
.curve(curveMonotoneX);
return (
<>
<Defs
defs={[
{
id: 'pattern',
type: 'patternLines',
background: 'transparent',
color: '#3daff7',
lineWidth: 1,
spacing: 6,
rotation: -45,
},
]}
/>
<path
d={areaGenerator(areaData)}
fill="url(#pattern)"
fillOpacity={0.6}
stroke="#3daff7"
strokeWidth={2}
/>
</>
)
};
}
return (
<div style={{height:"500px"}}>
<ResponsiveLine
data={data}
margin={{
top: 0,
right: 50,
bottom: 50,
left: 50
}}
yScale={{
type: "linear",
stacked: false
}}
xScale={{ type: 'point' }}
yFormat=" >-.2f"
axisTop={null}
axisRight={null}
axisBottom={{
orient: 'bottom',
tickSize: 5,
tickPadding: 5,
tickRotation: 0,
legend: 'transportation',
legendOffset: 36,
legendPosition: 'middle'
}}
axisLeft={{
orient: 'left',
tickSize: 5,
tickPadding: 5,
tickRotation: 0,
legend: 'count',
legendOffset: -40,
legendPosition: 'middle'
}}
pointSize={10}
pointColor={{ theme: 'background' }}
pointBorderWidth={2}
pointBorderColor={{ from: 'serieColor' }}
pointLabelYOffset={-12}
useMesh={true}
legends={[
{
anchor: 'bottom-right',
direction: 'column',
justify: false,
translateX: 100,
translateY: 0,
itemsSpacing: 0,
itemDirection: 'left-to-right',
itemWidth: 80,
itemHeight: 20,
itemOpacity: 0.75,
symbolSize: 12,
symbolShape: 'circle',
symbolBorderColor: 'rgba(0, 0, 0, .5)',
effects: [
{
on: 'hover',
style: {
itemBackground: 'rgba(0, 0, 0, .03)',
itemOpacity: 1
}
}
]
},
]}
/* Added this layers attribute */
layers={[
'grid',
'markers',
'areas',
createAreaLayer(10),
createAreaLayer(14),
createAreaLayer(18),
'lines',
'slices',
'axes',
'points',
'legends',
]}
/>
</div>
);
}
export default App;
So I have triangles and getting Information of which triangles is on what Connection.
like so:
[
{id:3
connected:[2,1,null]}
{id:1
connected:[null,null,3]}
{id:2
connected:[4,3,null]}
{id:4
connected:[2,null,null]}
]
It would look like this:
I need some method to calculate the X- and Y-position and rotation
When i hard code it would look like this:
[
{
id: 3,
x: 200,
y: 200,
radius: 100,
rotation: 0,
},
{
id: 1,
x: 300,
y: 150,
radius: 100,
rotation: 180,
},
{
id: 2,
x: 200,
y: 310,
radius: 100,
rotation: 180,
},
{
id: 4,
x: 300,
y: 360,
radius: 100,
rotation: 0,
},
]
I've build this simple interactive scenario. Now everything seems working fine except that when start for loop as below. What can I do to fasten the script?
here the full code http://codepen.io/Angussimons/pen/oZmNer
Thanks in advance
for (let i = 0; i < manNumber; i++) {
// Definisco quale strada
if (i < (manNumber * leftStreet)) {
street[i] = document.getElementById('path-2');
} else {
street[i] = document.getElementById('path-1');
}
// genero una velocità per ognuno
_speed[i] = Math.floor((Math.random() * 400) + 1);
_speed[i] = (_speed[i]/1000);
let shiftTop = -1.5;
// genero una posizione su ognuno
let manPosition = shiftTop + Math.floor((Math.random() * 1000) - 500)/1000;
// vario la durata dei gesti
var _duration = Math.floor((Math.random() * 1000) + 500);
mansHead.push( new mojs.Shape({
parent: '.omini',
className: 'omino man-head-'+i,
shape: 'circle',
radius: 8,
fill: manColor,
top: manPosition+'%',
left: 0,
x: {0 : 5},
y: 10,
easing: 'linear.none',
duration: _duration,
}).then({
x: {5 : 0},
}));
mansBody.push(new mojs.Shape({
parent: '.man-head-'+i,
className: 'man-body-'+i,
shape: 'line',
fill: 'none',
stroke: manColor,
radius: 10,
strokeWidth: 13,
strokeLinecap: 'round',
angle: {85 : 95},
x: {5 : -2},
y: 30,
easing: 'linear.none',
duration: _duration,
}).then({
angle: {95 : 85},
x: {[-2] : 5},
y: 30,
}));
mansArmL.push(new mojs.Shape({
parent: '.man-body-'+i,
className: 'man-arm-'+i,
shape: 'line',
fill: 'none',
stroke: manColor,
radius: 10,
strokeWidth: 6,
strokeLinecap: 'round',
angle: {45 : -45},
x: -5,
y: {8 : -8},
duration: _duration,
}).then({
angle: {[-45] : 45},
y: {[-8] : 8},
}));
mansArmR.push(new mojs.Shape({
parent: '.man-body-'+i,
className: 'man-arm-'+i,
shape: 'line',
fill: 'none',
stroke: manColor,
radius: 10,
strokeWidth: 6,
strokeLinecap: 'round',
angle: {[-45] : 45},
x: -5,
y: {[-8] : 8},
duration: _duration,
}).then({
angle: {45 : -45},
y: {8 : -8},
}));
mansLegL.push(new mojs.Shape({
parent: '.man-body-'+i,
className: 'man-leg-'+i,
shape: 'line',
fill: 'none',
stroke: manColor,
radius: 12,
strokeWidth: 7,
strokeLinecap: 'round',
angle: {20 : -20},
x: 22,
y: {8 : -8},
duration: _duration,
}).then({
angle: {[-20] : 20},
x: 22,
y: {[-8] : 8},
}));
mansLegR.push(new mojs.Shape({
parent: '.man-body-'+i,
className: 'man-leg-'+i,
shape: 'line',
fill: 'none',
stroke: manColor,
radius: 12,
strokeWidth: 7,
strokeLinecap: 'round',
angle: {[-20] : 20},
x: 22,
y: {[-8] : 8},
duration: _duration,
}).then({
angle: {20 : -20},
x: 22,
y: {8 : -8},
}));
}
How can I animate fillLinearGradientColorStops of a KineticJS Rect? I tried using a tween but surely it doesn't work.
The rectangle:
var rect = new Kinetic.Rect({
x: 20,
y: 20,
width: 100,
height: 100,
fillLinearGradientStartPoint: { x: -50, y: -50 },
fillLinearGradientEndPoint: { x: 50, y: 50 },
fillLinearGradientColorStops: [0, 'red', 1, 'yellow']
});
The tween:
var tween = new Kinetic.Tween({
node: rect,
duration: 2,
easing: Kinetic.Easings.Linear,
fillLinearGradientColorStops: [0, 'black', 1, 'green']
});
tween.play();
Please see the fiddle http://jsfiddle.net/ZdCmS/. Is it not possible?
From there: https://github.com/ericdrowell/KineticJS/issues/901
You can use an external tweening library, like GreenSock (http://www.greensock.com/gsap-js/) with it's ColorProps plugin (http://api.greensock.com/js/com/greensock/plugins/ColorPropsPlugin.html) to tween colors and then apply them to the Kinetic shape on each frame update: http://jsfiddle.net/ZH2AS/2/
No plans for direct support of tweening color stops on a gradient fill.
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var linearGradPentagon = new Kinetic.RegularPolygon({
x: 150,
y: stage.height() / 2,
sides: 5,
radius: 70,
fillLinearGradientStartPoint: {
x: -50,
y: -50
},
fillLinearGradientEndPoint: {
x: 50,
y: 50
},
fillLinearGradientColorStops: [0, 'white', 1, 'black'],
stroke: 'black',
strokeWidth: 4,
draggable: true
});
layer.add(linearGradPentagon);
stage.add(layer);
//activate ColorPropsPlugin
TweenPlugin.activate([ColorPropsPlugin]);
//object to store color values
var tmpColors = {
color0: 'white',
color1: 'black'
};
//tween the color values in tmpColors
TweenMax.to(tmpColors, 5, {
colorProps: {
color0: 'black',
color1: 'red'
},
yoyo: true,
repeat: 5,
ease:Linear.easeNone,
onUpdate: applyProps
});
function applyProps() {
linearGradPentagon.setAttrs({
fillLinearGradientColorStops: [0, tmpColors.color0, 1, tmpColors.color1]
});
layer.batchDraw();
}
How can i restore an Kinetic.js event?
I programmed an Kinetic.js "shape-button", it listen to mouseover and mouseout events. when i click on it it changes the color and don't listen to mouseover/out anymore. I want it to listen to mouseover and mouseout again when i click it a second time. I tryed to remove one click event and restore the other in both events, but i cant restore one event with
circle.on("eventname")
i have to define a function like
circle.on("eventname", function(){//do stuff here});
but thad would end in an continous loop of define functions
Thank you for answering!
here is my code:
<head>
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.0.0.js"> </script>
<script>
var layer = new Kinetic.Layer();
var sfcolor = '#00ff00'
var nfcolor = '#0000ff'
var cfcolor = '#ff0000'
var smcolor = '#009a00'
var nmcolor = '#00009a'
var cmcolor = '#9a0000'
var slcolor = '#007000'
var nlcolor = '#000070'
var clcolor = '#700000'
function drawCircle(sx, sy, sradius, sstrokeWidth) {
var stage = new Kinetic.Stage({ container: "container", width: 578, height: 200 });
var circleLayer = new Kinetic.Layer();
//circle
var scircle = new Kinetic.Circle({
x: sx,
y: sy,
radius: sradius,
fill: {
start: {
x: 0,
y: 0,
radius: 0
},
end: {
x: 0,
y: 0,
radius: sradius
},
colorStops: [0, sfcolor, 0.5, smcolor, 1, slcolor]
},
stroke: slcolor,
strokeWidth: sstrokeWidth
});
scircle.on("mouseover.event1", function() {
this.setFill({
start: {
x: 0,
y: 0,
radius: 0
},
end: {
x: 0,
y: 0,
radius: sradius
},
colorStops: [0, nfcolor, 0.5, nmcolor, 1, nlcolor]
});
this.setStroke(nlcolor);
scircle.off("click.event2");
circleLayer.draw();
});
scircle.on("mouseout.event1", function() {
this.setFill({
start: {
x: 0,
y: 0,
radius: 0
},
end: {
x: 0,
y: 0,
radius: sradius
},
colorStops: [0, sfcolor, 0.5, smcolor, 1, slcolor]
});
this.setStroke(slcolor);
scircle.off("click.event2");
circleLayer.draw();
});
scircle.on("click.event1", function() {
this.setFill({
start: {
x: 0,
y: 0,
radius: 0
},
end: {
x: 0,
y: 0,
radius: sradius
},
colorStops: [0, cfcolor, 0.5, cmcolor, 1, clcolor]
});
this.setStroke(clcolor);
scircle.off("mouseout.event1");
scircle.off("mouseover.event1");
scircle.off("click.event1");
scircle.on("click.event2", function() {
this.setFill({
start: {
x: 0,
y: 0,
radius: 0
},
end: {
x: 0,
y: 0,
radius: sradius
},
colorStops: [0, nfcolor, 0.5, nmcolor, 1, nlcolor]
});
this.setStroke(clcolor);
scircle.on("mouseout.event1");
scircle.on("mouseover.event1");
scircle.on("click.event1");
scircle.off("click.event2");
circleLayer.draw();
});
circleLayer.draw();
});
circleLayer.add(scircle);
stage.add(circleLayer);
}
window.onload = function() {
drawCircle(200, 100, 50, 3);
};
</script>
</head>
<body>
<div id="container">
</div>
</body>
"On" function require two parameters. The first one is the event name. The second one is the handler.
You need to pass the handler to correctly restore the event.
I think you should try assign your events to handlers and pass them to scircle.on
See if the code below works
Cheers!
<head>
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.0.0.js"> </script>
<script>
var layer = new Kinetic.Layer();
var sfcolor = '#00ff00'
var nfcolor = '#0000ff'
var cfcolor = '#ff0000'
var smcolor = '#009a00'
var nmcolor = '#00009a'
var cmcolor = '#9a0000'
var slcolor = '#007000'
var nlcolor = '#000070'
var clcolor = '#700000'
function drawCircle(sx, sy, sradius, sstrokeWidth) {
var stage = new Kinetic.Stage({ container: "container", width: 578, height: 200 });
var circleLayer = new Kinetic.Layer();
//circle
var scircle = new Kinetic.Circle({
x: sx,
y: sy,
radius: sradius,
fill: {
start: {
x: 0,
y: 0,
radius: 0
},
end: {
x: 0,
y: 0,
radius: sradius
},
colorStops: [0, sfcolor, 0.5, smcolor, 1, slcolor]
},
stroke: slcolor,
strokeWidth: sstrokeWidth
});
mouseover_event1 = function() {
this.setFill({
start: {
x: 0,
y: 0,
radius: 0
},
end: {
x: 0,
y: 0,
radius: sradius
},
colorStops: [0, nfcolor, 0.5, nmcolor, 1, nlcolor]
});
this.setStroke(nlcolor);
scircle.off("click.event2");
circleLayer.draw();
};
scircle.on("mouseover.event1", mouseover_event1);
mouseout_event1 = function() {
this.setFill({
start: {
x: 0,
y: 0,
radius: 0
},
end: {
x: 0,
y: 0,
radius: sradius
},
colorStops: [0, sfcolor, 0.5, smcolor, 1, slcolor]
});
this.setStroke(slcolor);
scircle.off("click.event2");
circleLayer.draw();
}
scircle.on("mouseout.event1", mouseout_event1);
click_event1 = function() {
this.setFill({
start: {
x: 0,
y: 0,
radius: 0
},
end: {
x: 0,
y: 0,
radius: sradius
},
colorStops: [0, cfcolor, 0.5, cmcolor, 1, clcolor]
});
this.setStroke(clcolor);
scircle.off("mouseout.event1");
scircle.off("mouseover.event1");
scircle.off("click.event1");
scircle.on("click.event2", click_event2);
circleLayer.draw();
};
click_event2 = function() {
this.setFill({
start: {
x: 0,
y: 0,
radius: 0
},
end: {
x: 0,
y: 0,
radius: sradius
},
colorStops: [0, nfcolor, 0.5, nmcolor, 1, nlcolor]
});
this.setStroke(clcolor);
scircle.on("mouseout.event1", mouseout_event1);
scircle.on("mouseover.event1", mouseover_event1);
scircle.on("click.event1", click_event1);
scircle.off("click.event2");
circleLayer.draw();
};
scircle.on("click.event1", click_event1);
circleLayer.add(scircle);
stage.add(circleLayer);
}
window.onload = function() {
drawCircle(200, 100, 50, 3);
};
</script>
</head>
<body>
<div id="container">
</div>
</body>