Adding alpha to radial gradient stops
448 views
Skip to first unread message
Sycren
Aug 3, 2011, 5:53:28 AM8/3/11
to Paper.js
This is a modified version of circles in the examples/tools folder:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Circles</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../lib/paper.js"></script>
<script type="text/paperscript" canvas="canvas">
// All newly created items will receive
// these style properties:
project.currentStyle = {
fillColor: 'white',
strokeColor: 'black'
};
var path;
function onMouseDrag(event) {
// The radius is the distance between the position
// where the user clicked and the current position
// of the mouse.
var radius = (event.downPoint - event.point).length;
path = new Path.Circle(event.downPoint, radius);
path.removeOnDrag();
var gradient = new Gradient(['red', 'white'], 'radial');
gradient.stops[0].alpha =0.5;
// Fill the path with a gradient color that runs from its center,
// to the right center of its bounding rectangle:
var from = path.position;
var to = path.bounds.rightCenter;
var gradientColor = new GradientColor(gradient, from, to);
path.fillColor = gradientColor;
};
</script>
</head>
<body>
<canvas id="canvas" resize></canvas>
</body>
</html>
I thought this would add alpha to the red colour but it does not work:
gradient.stops[0].alpha =0.5;
Any ideas?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Circles</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../lib/paper.js"></script>
<script type="text/paperscript" canvas="canvas">
// All newly created items will receive
// these style properties:
project.currentStyle = {
fillColor: 'white',
strokeColor: 'black'
};
var path;
function onMouseDrag(event) {
// The radius is the distance between the position
// where the user clicked and the current position
// of the mouse.
var radius = (event.downPoint - event.point).length;
path = new Path.Circle(event.downPoint, radius);
path.removeOnDrag();
var gradient = new Gradient(['red', 'white'], 'radial');
gradient.stops[0].alpha =0.5;
// Fill the path with a gradient color that runs from its center,
// to the right center of its bounding rectangle:
var from = path.position;
var to = path.bounds.rightCenter;
var gradientColor = new GradientColor(gradient, from, to);
path.fillColor = gradientColor;
};
</script>
</head>
<body>
<canvas id="canvas" resize></canvas>
</body>
</html>
I thought this would add alpha to the red colour but it does not work:
gradient.stops[0].alpha =0.5;
Any ideas?
Sycren
Aug 3, 2011, 6:12:00 AM8/3/11
to Paper.js
Ok, this works:
a = new RGBColor(1,0,0,0.8);
b = new RGBColor(1,1,1,0.1);
var gradient = new Gradient([a,b], 'radial');
but is there a better way?
a = new RGBColor(1,0,0,0.8);
b = new RGBColor(1,1,1,0.1);
var gradient = new Gradient([a,b], 'radial');
but is there a better way?
Jonathan Puckey
Aug 3, 2011, 9:20:15 AM8/3/11
to pap...@googlegroups.com
Gradient#stops is an array of GradientStop objects:http://paperjs.org/reference/gradientstop
So this should work too: gradient.stops[0].color.alpha = 0.5;
Reply all
Reply to author
Forward
0 new messages