1

私は JavaScript と KineticJS が初めてで、GUI を開発しています。キャンバスで必要なすべてのウィジェットを描画しましたが、キネティックの形状で再利用する方法がわかりません。キャンバスの形状をキネティックの形状に変える方法はありますか?

RenderCore.drawButton = function( w ){
ctx.beginPath();
var oldAlpha = ctx.globalAlpha;
ctx.globalAlpha = ctx.globalAlpha * w["fill-opacity"];

if ( w["rc"] != "0" )
{
    var rc = parseInt( w["rc"] );
    RenderCore._roundRect( w["x_abs"], w["y_abs"], w["w"], w["h"], w["rc"] );
}
else
{
    ctx.rect(w["x_abs"], w["y_abs"], w["w"], w["h"]);       
}

var fill = parseBool(w["pressed"]) ? w["pressed-fill"] : w["unpressed-fill"];
ctx.fillStyle = RenderCore._instantiateFillStyle( fill, w );
ctx.closePath();
ctx.fill();

ctx.globalAlpha = oldAlpha;

if ( w["stroke-width"] != "0")
{   
    ctx.lineWidth = w["stroke-width"];
    ctx.strokeStyle = w["stroke"];
    ctx.stroke();
}

// draw text
if ( w["unpressed-img"] == "" )
{
    ctx.font      = RenderCore._getFontStyle( w );
    ctx.fillStyle = w["font-color"];

    var len = ctx.measureText(w["text"]).width;
    var offset = (w["w"] - len) / 2;
    var text_y = (w["h"] / 2);

    ctx.textBaseline = "middle";
    ctx.fillText(w["text"], w["x_abs"] + offset, w["y_abs"] + text_y);
}
// draw image
else
{
    if ( w["text"] == "" )
    {
        var img_file = parseBool(w["pressed"]) ? w["pressed-img"] : w["unpressed-img"] ;
        var offsetX = (w["w"] - w["h"] * 0.8) / 2;
        var offsetY = (w["h"] * 0.2) / 2;
        var img = RenderCore.imgCache[ img_file ];
        if ( isDef(img) )
            ctx.drawImage(img, w["x_abs"] + offsetX, w["y_abs"] + offsetY, w["h"] * 0.8, w["h"] * 0.8);
    }
    else
    {
        var img_file = parseBool(w["pressed"]) ? w["pressed-img"] : w["unpressed-img"] ;
        var img = RenderCore.imgCache[ img_file ];
        // draw icon
        var offsetX = (w["h"] * 0.2) / 2;
        var offsetY = (w["h"] * 0.2) / 2;
        ctx.drawImage(img, w["x_abs"] + offsetX, w["y_abs"] + offsetY, w["h"] * 0.8, w["h"] * 0.8);

        // draw text
        ctx.font      = RenderCore._getFontStyle( w );
        ctx.fillStyle = w["font-color"];

        var len = ctx.measureText(w["text"]).width;
        // center alignment
        var offset = (w["w"] - w["h"] - len) / 2  +  w["h"];
        // Right alignment
        //var offset = offsetX + w["h"];

        var text_y = (w["h"] / 2);
        ctx.textBaseline = "middle";
        ctx.fillText(w["text"], w["x_abs"] + offset, w["y_abs"] + text_y);
    }
}};

w は、幅、高さ、フォントの色、ecc など、ウィジェットに追加するすべてのプロパティを含む「Widget」クラスのオブジェクトです。

4

1 に答える 1

0

カスタムKinetic.Shapeオブジェクトを使用できます。

Shape オブジェクトは、すべての通常のキャンバス描画 (drawImage、fillText など) を描画するために使用できるキャンバス コンテキストを提供します。

于 2013-09-23T15:58:20.047 に答える