如何通過傳遞名稱返回頭像圖標

我有一個要求，通過傳遞一個名稱，它應該返回一個頭像圖標包含該名稱中包含的單詞的第一個字母。例如，如果我通過約翰亞伯拉罕它應該返回一個圖標'JA'。我需要在sapui5控件中使用該圖標。我對此沒有任何想法。如何實現這一點？任何幫助表示讚賞。如何通過傳遞名稱返回頭像圖標

我需要像這樣的頭像圖標。你可以在這看到帶字母V的圖標。 avatar icon

謝謝你，

來源

2016-09-27 vijayalalitha

例子你需要'JB'或'JA'？ –

如果你想用jQuery生成圖片。請檢查'canvas' –

感謝您的答覆。我在畫布上沒有一個好主意。我知道只有我們可以使用畫布繪製任何類型的弧線和形狀。你能詳細告訴我如何使用畫布來做到這一點，以及如何返回一個包含字母的圖標？ – vijayalalitha

畫布answeres在正確的軌道上，但在你的情況下，你需要一個數據鏈接，你可以指定你的控制src或icon財產。

以下示例中的generateAvatar函數將名稱（字符串）轉換爲圖像數據url（包含url中base64 gif的圖像）。數據url可以分配給Buttons icon property或UI5控件上的任何其他圖像url屬性。你甚至可以像下面的例子那樣將它用作數據綁定的格式化函數。

var model = new sap.ui.model.json.JSONModel({ 
    name: "John Doe" 
}); 

new sap.m.Input({value:"{/name}", valueLiveUpdate:true}).setModel(model).placeAt("body"); 

new sap.m.Button({ 
    icon:{path: "/name", formatter: generateAvatar}, 
    text:"Hello" 
}).setModel(model).placeAt("body"); 


function generateAvatar(name){ 
    var initials = name.split(' ').map(function(str) { return str ? str[0].toUpperCase() : "";}).join(''); 
    var canvas = document.createElement('canvas'); 
    var radius = 30; 
    var margin = 5; 
    canvas.width = radius*2+margin*2; 
    canvas.height = radius*2+margin*2; 

    // Get the drawing context 
    var ctx = canvas.getContext('2d'); 
    ctx.beginPath(); 
    ctx.arc(radius+margin,radius+margin,radius, 0, 2 * Math.PI, false); 
    ctx.closePath(); 
    ctx.fillStyle = 'grey'; 
    ctx.fill(); 
    ctx.fillStyle = "white"; 
    ctx.font = "bold 30px Arial"; 
    ctx.textAlign = 'center'; 
    ctx.fillText(initials, radius+5,radius*4/3+margin); 
    return canvas.toDataURL(); 
    //The canvas will never be added to the document. 
}

上JSBin

來源

2016-09-29 19:55:17 schnoedel

非常感謝你的工作。 – vijayalalitha

你能否給我提供一些信息，比如我們有沒有方法將sapui5控件轉換爲dataURI格式，比如toDataURL。上面的工作很好，但我只是想知道。 – vijayalalitha

sapui5控件呈現爲html。數據url只支持所有瀏覽器中的圖片。所以簡單的答案是*否*。我甚至會建議反對過度使用數據網址。使用html在UI5等html框架中呈現您的內容。如果提供的控件不適合您的需要，請構建自定義控件。 – schnoedel

查看演示在這裏。

JS BIN

你可以閱讀更多關於帆布here

來源

2016-09-27 11:50:34

感謝您的答覆..它顯示我想要什麼。但問題是我如何能夠使用它作爲sap.m.Image或sap.ui.core.Icon的src，因爲它們支持URL格式， sap.ui.core.URI？ – vijayalalitha

歧路@Sathvik雕代碼，以滿足您的要求：

console.clear() 
 
var CVS = document.createElement('canvas'), 
 
    ctx = CVS.getContext('2d'); 
 

 
CVS.width = 500; 
 
CVS.height = 500; 
 
document.body.appendChild(CVS); // Add canvas to DOM 
 

 
// Transform input text 
 
function transformText(text) { 
 
    return text 
 
    .split(' ') 
 
    .map((str) => str ? str[0].toUpperCase() : "") 
 
    .join('') 
 
} 
 

 
// GRAPHICS TO CANVAS ///// 
 
function sendToCanvas(ob) { 
 
    var img = new Image(); 
 
    img.onload = function() { 
 
     ctx.drawImage(img, 0, 0); 
 
     ctx.font = ob.fontWeight + ' ' + ob.fontSize + ' ' + ob.fontFamily; 
 
     ctx.textAlign = 'center'; 
 
     ctx.fillStyle = ob.color; 
 
     ctx.fillText(transformText(ob.text), CVS.width - 350, CVS.height/3); 
 
    }; 
 
    img.src = ob.image; 
 
    } 
 
    /////////////////////////// 
 

 
// DO IT! ///////////////// 
 

 
var cvsObj = { 
 
    image: "http://www.polyvore.com/cgi/img-thing?.out=jpg&size=l&tid=31228042", 
 
    text: "john doe", 
 
    fontFamily: "Arial", 
 
    fontWeight: "bold", 
 
    fontSize: "30px", 
 
    color: "rgba(0, 0, 0, 0.7)" 
 
}; 
 
sendToCanvas(cvsObj); 
 

 

 

 
document.getElementById('input').addEventListener('input', function() { 
 
    cvsObj.text = this.value; 
 
    sendToCanvas(cvsObj); 
 
}, false);

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 

 
    <meta charset=utf-8 /> 
 
    <title>JS Bin</title> 
 
</head> 
 

 
<body> 
 

 
    Text: 
 
    <input id="input" type="text" value="John Doe"> 
 

 
</body> 
 

 
</html>

來源

2016-09-27 12:03:51 notgiorgi

你可以創建一個自定義UI5-控制。它支持數據綁定太:)

例如在JSBin：

var NameIcon = sap.ui.core.Control.extend("NameIcon", { // call the new Control type "NameIcon" and let it inherit 
            // from sap.ui.core.Control 

    // the Control API: 
    metadata : { 
     properties : {   // setter and getter are created behind the scenes, 
           // incl. data binding and type validation 
      "name" : "string", // in simple cases, just define the type 
      "size" : {type: "sap.ui.core.CSSSize", defaultValue: "40px"} 
           // you can also give a default value and more 
     } 
    }, 


    // the part creating the HTML: 
    renderer : function(oRm, oControl) { // static function, so use the given "oControl" instance 
             // instead of "this" in the renderer function 

     oRm.write("<div"); 
     oRm.writeControlData(oControl); // writes the Control ID and enables event handling - important! 
     oRm.addStyle("width", oControl.getSize()); // write the Control property size; the Control has validated it 
                // to be a CSS size 
     oRm.addStyle("height", oControl.getSize()); 
     oRm.addStyle("border-radius", "50%"); 

     oRm.addStyle("text-align","center"); //Center text 
     oRm.addStyle("vertical-align","middle"); 
     oRm.addStyle("line-height", oControl.getSize()); 

     oRm.addStyle("font-family","Arial,Helvetica,sans-serif;") 
     oRm.addStyle("background-color", "steelblue"); 
     oRm.addStyle("color","white") 

     oRm.writeStyles(); 
     //oRm.addClass("sapMTitle");  // add a CSS class for styles common to all Control instances 
     oRm.writeClasses();    // this call writes the above class plus enables support 
             // for Square.addStyleClass(...) 

     oRm.write(">"); 
     oRm.writeEscaped(oControl.getInitials()); // write another Control property, with protection 
              // against cross-site-scripting 
     oRm.write("</div>"); 
    }, 
    getInitials:function(){ 
    var name = this.getName(); 
    if (!name) return ""; 
    var parts = name.split(" "); 
    var result = parts.map(function(p){return p.charAt(0).toLocaleUpperCase();}).join(""); 
    return result; 
    }, 
    // an event handler: 
    onclick : function(evt) { // is called when the Control's area is clicked - no event registration required 
     alert("Control clicked! Text of the Control is:\n" + this.getText()); 
    } 
});

來源

2016-09-27 12:21:21 schnoedel

謝謝你的答覆。它返回我想要的東西，但你可以建議我如何使用它作爲圖標？像怎樣才能將它作爲sap.ui.core.Icon控件的src或sap.suite.ui.commons.process流控制或sap.m.Image？ – vijayalalitha

，因爲它們支持URL格式，即sap.ui.core.URI？ – vijayalalitha

那麼我可能會誤解你的問題。這是一個自定義控件，可以在任何可以放置控件的地方使用。但是，您不能將其用作UI5控件的'sap-icon：//圖標屬性或圖像源屬性。但是，你可以擴展它，例如做更多的事情（可點擊等），或者你可以使用像HorizontalLayout這樣的東西把它與其他控件一起... – schnoedel

如何通過傳遞名稱返回頭像圖標

回答

相關問題