Kineticjs fillAlpha不工作
有人能告诉我或让我正确地处理以下问题吗? 我想使用kineticjs在画布上创建文本框。我试图得到一个透明的填充和黑色笔划文本。 当我尝试以下两种方法时,canvas似乎什么都没有做:Kineticjs fillAlpha不工作,kineticjs,opacity,Kineticjs,Opacity,有人能告诉我或让我正确地处理以下问题吗? 我想使用kineticjs在画布上创建文本框。我试图得到一个透明的填充和黑色笔划文本。 当我尝试以下两种方法时,canvas似乎什么都没有做: obj.setAttr('fillAlpha',0.1)-什么也没发生 obj.fillAlpha(0.1)-在画布上抛出错误:未捕获的TypeError:Object#没有方法“fillAlpha” 要独立调整填充不透明度和笔划不透明度,需要创建一个包含笔划文本对象和填充文本对象的组 下面是示例代码和演示:
obj.setAttr('fillAlpha',0.1)代码>-什么也没发生
obj.fillAlpha(0.1)代码>-在画布上抛出错误:未捕获的TypeError:Object#没有方法“fillAlpha”
要独立调整填充不透明度和笔划不透明度,需要创建一个包含笔划文本对象和填充文本对象的组 下面是示例代码和演示:
原型
正文{padding:20px;}
#容器{
边框:实心1px#ccc;
边缘顶部:10px;
宽度:350px;
高度:350px;
}
$(函数(){
var阶段=新的动力学阶段({
容器:'容器',
宽度:350,
身高:350
});
var layer=新的动能层();
阶段。添加(层);
var textGroup=新的动力学组({
x:10,
y:30,
德拉格布尔:是的
});
添加(文本组);
var textFill=new dynamic.Text({
x:0,,
y:0,
文字:“你好”,
字体大小:108,
填充:“红色”
});
textGroup.add(textFill);
var textstrope=新的dynamic.Text({
x:0,,
y:0,
文字:“你好”,
字体大小:108,
笔画:“黑色”,
冲程宽度:3,
});
textGroup.add(textStroke);
layer.draw();
var strokeOpacity=1.00;
var fillOpacity=1.00;
var模式=1;
var不透明度=100;
var delta=-1
制作动画();
函数animate(){
请求动画帧(动画);
如果(不透明度100){
不透明度=100;
delta=-1;
模式=-模式;
}
否则{
不透明度+=增量;
如果(模式==1){
textStroke.setOpacity(不透明度/100);
}否则{
textFill.setOpacity(不透明度/100);
}
}
layer.draw();
}
}); // end$(函数(){});
谢谢markE,如果我想在填充上获得100%的透明度,这很好用。但是我希望能够分别设置笔划和填充的不透明度。有些情况下,我需要使用100%可见笔划进行50%透明填充。出于这个原因,KineticJS有fillAlpha和strokeAlpha,但我不知道为什么它们根本不起作用……我明白了……您想要独立控制填充和笔划不透明度。看我修改过的答案。太好了!!!非常感谢。在过去的两周里你帮了我很多!真的很感激!
<!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://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.1.min.js"></script>
<style>
body{padding:20px;}
#container{
border:solid 1px #ccc;
margin-top: 10px;
width:350px;
height:350px;
}
</style>
<script>
$(function(){
var stage = new Kinetic.Stage({
container: 'container',
width: 350,
height: 350
});
var layer = new Kinetic.Layer();
stage.add(layer);
var textGroup=new Kinetic.Group({
x:10,
y:30,
draggable: true
});
layer.add(textGroup);
var textFill = new Kinetic.Text({
x:0,
y:0,
text:"Hello",
fontSize:108,
fill: 'red'
});
textGroup.add(textFill);
var textStroke = new Kinetic.Text({
x:0,
y:0,
text:"Hello",
fontSize:108,
stroke: 'black',
strokeWidth: 3,
});
textGroup.add(textStroke);
layer.draw();
var strokeOpacity=1.00;
var fillOpacity=1.00;
var mode=1;
var opacity=100;
var delta=-1
animate();
function animate(){
requestAnimationFrame(animate);
if(opacity<1){
delta=1;
opacity=1;
}
else if(opacity>100){
opacity=100;
delta=-1;
mode=-mode;
}
else {
opacity+=delta;
if(mode==1){
textStroke.setOpacity(opacity/100);
}else{
textFill.setOpacity(opacity/100);
}
}
layer.draw();
}
}); // end $(function(){});
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>