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 是“Widget”类的一个对象，它包含我想要添加到我的小部件的所有属性，如宽度、高度、字体颜色、ecc。

4

1 回答 1

0

您可以使用自定义Kinetic.Shape对象。

Shape 对象将为您提供一个画布上下文，您可以使用它来绘制所有正常的画布绘图：drawImage、fillText 等。

于 2013-09-23T15:58:20.047 回答