javascript - KineticJS:setFill 不起作用-6ren

javascript - KineticJS:setFill 不起作用

转载作者：行者123 更新时间：2023-11-28 09:27:35

25

4

要点如下:我有一个 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/

25

4

0

文章推荐： jquery - 圆形或圆形 Draggable/Droppables

文章推荐： CSS 图像不加载 404 页面

文章推荐： html - Angularjs 重复不显示空间

实例分析Try {} Catch{} 作用
今天有小伙伴给我留言问到，try{...}catch(){...}是什么意思？它用来干什么？简单的说他们是用来捕获异常的下面我们通过一个例子来详细讲解下
html - 列表社交媒体链接的 ARIA 作用
我正在努力提高网站的可访问性，但我不知道如何在页脚中标记社交媒体链接列表。这些链接指向我在 facecook、twitter 等上的帐户。我不想用 role="navigation" 标记这些链接，因
java.util.Timer SystemTime 作用？
说现在是 6 点，我有一个 Timer 并在 10 点安排了一个 TimerTask。之后，System DateTime 被其他服务(例如 ntp)调整为 9 点钟。我仍然希望我的 TimerTas
php - 什么是 Doctrine hydration 作用？
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
python入门:argparse浅析 nargs='+'作用
我就废话不多说了，大家还是直接看代码吧~ ? 1
Maven是什么?Maven的概念+作用+仓库的介绍+常用命令的详解
Maven系列1 1.什么是Maven？ Maven是一个项目管理工具，它包含了一个对象模型。一组标准集合，一个依赖管理系统。和用来运行定义在生命周期阶段中插件目标和逻辑。核心功能 Mav

首页

博学

6Ren·AI

商城

javascript - KineticJS:setFill 不起作用