1

その要点は次のとおりです。getColorメソッドとsetColorメソッドがあります。

  1. getColorcolor_objは、現在のオブジェクトへのグローバルポインタを更新します。
  2. setColorは、そのポインタを使用してオブジェクトの色を変更します。

問題は、それが黒として描かれるだけだということです。

これがフィドルです：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

1 に答える 1

0

また、4.3.0の新機能

Kinetic.Textの形状に大きな変更が加えられました。APIを簡素化するために、長方形コンポーネントが削除されました。textFillが塗りつぶされ、textStrokeがストロークになり、textStrokeWidthがstrokeWidthになり、textShadowがシャドウになります。テキストの後ろに長方形を配置する場合は、テキストをKinetic.Rectシェイプでグループ化する必要があります。テキストのfontSize単位がピクセル単位になりました（以前はポイント単位でした）。lineHeight attrはデフォルトで1になりました（以前はデフォルトで1.2になりました）。

于 2013-01-07T22:22:50.570 に答える