webview上的xamarin表单标签（如水印）

---

如何在xamarin表单中的webview上添加水印（label.text）？

是否希望获得如下截图所示的效果

如果是这样，您应该通过自定义渲染器来实现它。当url加载完成后，我们应该添加一个JS来实现水印。我建议您使用

addWaterMarker（）

方法，它不会使webview失去焦点

[assembly: ExportRenderer(typeof(WebView), typeof(MyWebviewRenderer))]
namespace WebviewCoverDemo.Droid
{
    public class MyWebviewRenderer: WebViewRenderer
    {
        Context context;
        public MyWebviewRenderer(Context context):base(context)
        {
            this.context = context;
        }
        protected override void OnElementChanged(ElementChangedEventArgs<WebView> e)
        {
            base.OnElementChanged(e);
            Control.Settings.JavaScriptEnabled = true;
            Control.SetWebViewClient(new MyWebviewClient());
        }
    }

    internal class MyWebviewClient : Android.Webkit.WebViewClient
    {
        bool showDiv = false;

        public override void OnPageFinished(Android.Webkit.WebView view, string url)
        {
            base.OnPageFinished(view, url);
            view.LoadUrl("javascript:" + (showDiv ? addWaterMarkerDiv("ss")
                                    : addWaterMarker("body background")));
        }

        string addWaterMarker(string watermark)
        {
            string js = "var newscript = document.createElement(\"script\");";
            js += "var bbTextNode = document.createTextNode(\"";
            js += "var can = document.createElement('canvas');";
            js +=
                "var body = document.body;body.appendChild(can);can.width=400; can.height=400;can.style.display='none';"
                    + "var cans = can.getContext('2d');cans.rotate(-20*Math.PI/180);cans.font = '46px Microsoft JhengHei';"
                    + "cans.fillStyle = 'rgba(255, 0, 0, 0.50)';cans.textAlign = 'left';"
                    + "cans.textBaseline = 'Middle';cans.fillText('watermark',can.width/3,can.height/2);"
                    + "body.style.backgroundImage='url('+can.toDataURL('image/png')+')';"
            ;
            js += "\");";
            js += "newscript.appendChild(bbTextNode);";
            //js += "var t = document.createTextNode(\"alert('action');\");";
            //js += "newscript.appendChild(t);";
            //js += "newscript.onload=function(){xxx();};";  //xxx()代表js中某方法
            js += "document.body.appendChild(newscript);";

            return js;
        }

        string addWaterMarkerDiv(string watermark)
        {
            string js = "var newscript = document.createElement(\"script\");";

            js += "var waterMarkDiv = document.createTextNode(\""
                //+"if(document.getElementById('waterMark') != null) return;"
                + "var m = 'waterMark';"
                + "var newMark = document.createElement('div');"
                + "newMark.id = m;"
                + "newMark.style.position = 'absolute';"
                + "newMark.style.zIndex = '9527';"
                + "newMark.style.top = '0px';"
                + "newMark.style.left = '0px';"
                + "newMark.style.width = '800px';"
                + "newMark.style.height = '400px';"
                //+ "alert('newmark');"
                + "\");"
            ;

            js += "newscript.appendChild(waterMarkDiv);";
            js += "var bbTextNode = document.createTextNode(\"";
            js += "var can = document.createElement('canvas');";
            js +=
                "var body = document.body;body.appendChild(can);can.width=400; can.height=400;can.style.display='none';"
                    + "var cans = can.getContext('2d');cans.rotate(-20*Math.PI/180);cans.font = '46px Microsoft JhengHei';"
                    + "cans.fillStyle = 'rgba(17, 17, 17, 0.50)';cans.textAlign = 'left';"
                    + "cans.textBaseline = 'Middle';cans.fillText('watermark',can.width/3,can.height/2);"
                    + "newMark.style.backgroundImage='url('+can.toDataURL('image/png')+')';"
                    + "newMark.style.filter = 'alpha(opacity=50)';"
                    + "document.body.appendChild(newMark);"
            ;
            js += "\");";
            js += "newscript.appendChild(bbTextNode);";
            js += "document.body.appendChild(newscript);";

            return js;
        }
    }
}

[程序集：ExportRenderer（typeof（WebView）、typeof（MyWebviewRenderer））]
命名空间WebviewCoverDemo.Droid
{
公共类MyWebviewRenderer:WebViewRenderer
{
语境；
公共MyWebviewRenderer（上下文）：基础（上下文）
{
this.context=上下文；
}
受保护的覆盖无效OnElementChanged（ElementChangedEventArgs e）
{
基础。一个要素发生变化（e）；
Control.Settings.JavaScriptEnabled=true；
Control.SetWebViewClient（新的MyWebviewClient（））；
}
}
内部类MyWebviewClient:Android.Webkit.WebViewClient
{
bool showDiv=false；
public override void OnPageFinished（Android.Webkit.WebView视图，字符串url）
{
base.OnPageFinished（视图、url）；
view.LoadUrl（“javascript:”+（showDiv？addWaterMarkerDiv（“ss”）
：addWaterMarker（“身体背景”）；
}
字符串添加水印（字符串水印）
{
string js=“var newscript=document.createElement（\“script\”）；”；
js+=“var bbTextNode=document.createTextNode（\”；
js+=“var can=document.createElement（'canvas'）；”；
js+=
“var body=document.body；body.appendChild（can）；can.width=400；can.height=400；can.style.display='none'；”
+“var cans=can.getContext（'2d'）；cans.rotate（-20*Math.PI/180）；cans.font='46px Microsoft JhengHei'；”
+“cans.fillStyle='rgba（255,0,0,0.50）'；cans.textAlign='left'
+“cans.textb基线='Middle'；cans.fillText（'watermark'，can.width/3，can.height/2）”
+“body.style.backgroundImage='url（'+can.toDataURL（'image/png'）+'）”；”
;
js+=“\”；“；
js+=“newscript.appendChild（bbTextNode）；”；
//js+=“var t=document.createTextNode（\”警报（'action'）；\”）；”；
//js+=“newscript.appendChild（t）；”；
//js+=“newscript.onload=function（）{xxx（）；}；”；//xxx（）代表js中某方法
js+=“document.body.appendChild（newscript）；”；
返回js；
}
字符串addWaterMarkerDiv（字符串水印）
{
string js=“var newscript=document.createElement（\“script\”）；”；
js+=“var waterMarkDiv=document.createTextNode（\”）
//+“如果（document.getElementById（'waterMark'）！=null）返回；”
+“var m=‘水印’；”
+“var newMark=document.createElement（'div'）；”
+“newMark.id=m；”
+“newMark.style.position=‘绝对’；”
+“newMark.style.zIndex='9527'
+“newMark.style.top='0px'
+“newMark.style.left='0px'
+“newMark.style.width='800px'
+“newMark.style.height='400px'
//+“警报（'newmark'）；”
+ "\");"
;
js+=“newscript.appendChild（waterMarkDiv）；”；
js+=“var bbTextNode=document.createTextNode（\”；
js+=“var can=document.createElement（'canvas'）；”；
js+=
“var body=document.body；body.appendChild（can）；can.width=400；can.height=400；can.style.display='none'；”
+“var cans=can.getContext（'2d'）；cans.rotate（-20*Math.PI/180）；cans.font='46px Microsoft JhengHei'；”
+“cans.fillStyle='rgba（17,17,17,0.50）'；cans.textAlign='left'
+“cans.textb基线='Middle'；cans.fillText（'watermark'，can.width/3，can.height/2）”
+“newMark.style.backgroundImage='url（'+can.toDataURL（'image/png'）+'）”；”
+“newMark.style.filter='alpha（不透明度=50）'”
+“document.body.appendChild（newMark）；”
;
js+=“\”；“；
js+=“newscript.appendChild（bbTextNode）；”；
js+=“document.body.appendChild（newscript）；”；
返回js；
}
}
}

使用包含网络视图和水标签的绝对布局mark@DursunÜmitDur如果回答有帮助。请接受它作为答案（单击“✔” 在这个答案的左上角），它将帮助其他有类似问题的人issue@DursunÜmit是否有任何更新？如果回复有帮助，请接受它作为答案（单击“✔” 在这个答案的左上角），它将帮助其他有类似问题的人-