動態js重用canvas代碼

我是JavaScript和KineticJS的新手，我正在開發GUI。我用帆布畫出了我需要的所有小工具，但是我不知道如何在運動的形狀中重用它。有沒有辦法將帆布的形狀變成動能的形狀？動態js重用canvas代碼

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的屬性。

來源

2013-09-23 ambra

您可以使用自定義Kinetic.Shape對象。

Shape對象將爲您提供一個可用於繪製所有常規畫布圖形的畫布上下文：drawImage，fillText等。

來源

2013-09-23 15:58:20 markE

動態js重用canvas代碼

回答

相關問題