要点如下:我有一个 getColor 方法和一个 setColor 方法。
- getColor 将全局指针
color_obj更新为当前对象。 - setColor 使用该指针来更改对象的颜色。
问题是，它只将其绘制为黑色。
这是 fiddle :http://jsfiddle.net/EbvH7/3/
和来源 - html:
<html>
<!--- Click the square box to get its color.
Then change the color and hit set.
For some reason it draws the color black only.... -->
<head>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/v4.2.0/kinetic-v4.2.0.min.js"></script>
<script src="http://jscolor.com/jscolor/jscolor.js"></script>
<script>
var stage; //canvas
var layer_frame = new Kinetic.Layer(); //Blue frame holder
var color_obj; //global pointer to object to be colored.
function getColor(obj) {
color_obj = obj; //set global pointer
var fill = '"'+color_obj.getFill()+'"';
var name = color_obj.getName();
document.getElementById('color_pick').color.fromString(fill);
document.getElementById('colorname_obj').innerHTML = name;
}
function setColor(){
//Use global pointer
var fill = document.getElementById('color_pick').color;
var name = document.getElementById('colorname_obj').innerHTML;
color_obj.setFill('"'+fill+'"');
color_obj.setName(name);
stage.draw()
}
function setup() {
stage = new Kinetic.Stage({
container: 'container',
width: 400, height: 400
});
var frame_area = new Kinetic.Rect({
x: 100, y: 100, opacity: 1,
width: 30, height: 30,
fill: 'a7cccb', stroke: 'black', strokeWidth: 2,
name: 'blue_box'
});
frame_area.on('click', function() {
getColor(this)
});
// add the layer to the stage
layer_frame.add(frame_area);
stage.add(layer_frame);
stage.draw();
};
</script>
</head>
<body onload="setup()">
<!--Canvas--->
<div id="container"></div>
<!--Panels-->
<div id="panel_left">
<!--- C O L O R B O X -->
<div id="colorbox">
<h7 id="colorname_obj" >None</h7><br/>
<input class="color" id="color_pick" style="width:50%" value="000000" >
<input type="button" id="color_set" value="Set" onclick="setColor()" >
</div>
</div>
</body>
</html>
和CSS:
#panel_left {
position:absolute;
top:30px; left:30px;
width:100px; background-color:red;
}
#container {
position:absolute;
top:30px; left:130px;
background-color:blue;
width:50%; height:50%;
}
最佳答案
此外，4.3.0 中的新增功能
Kinetic.Text 形状发生重大变化。矩形组件已被删除以简化 API。 textFill 现在是填充，textStroke 现在是描边，textStrokeWidth 现在是描边宽度，textShadow 现在是阴影。如果您想在文本后面有一个矩形，则需要使用 Kinetic.Rect 形状对文本进行分组。文本 fontSize 单位现在以像素为单位(以前以点为单位)。 lineHeight attr 现在默认为 1(过去默认为 1.2)。
关于javascript - KineticJS:setFill 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14144630/