Using SVG with XBL in XUL

来自WordPress中文文档
跳转至: 导航搜索

The following example shows how to create an XBL component that uses SVG to render graphics. The code can be adapted as the basis of any number of vector-graphics based widgets.

The example consists of 4 files that are listed below. The first two files, svg_example.xul and svg_example.css, set up the example and consist of a simple XUL window and relevent CSS properties. The stylesheet svg_example.css also binds the XBL binding defined in svg-shape.xml to the svg-shape tag.

svg_example.xul

<?xml version="1.0"?>
<?xml-stylesheet href="svg_example.css" type="text/css"?>
<window title="Test"
	orient="horizontal"
	xmlns:html="http://www.w3.org/1999/xhtml" 
	xmlns:svg="http://www.w3.org/2000/svg" 
	xmlns:xlink="http://www.w3.org/1999/xlink"
	xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
>
	<stack flex="1">
		<vbox flex="1">
			<svg-shape id="background-circle" flex="1" type="circle" />
		</vbox>
		<vbox flex="1">
			<spacer flex="2"/>
			<svg-shape flex="1" id="svg-button" type="rect" radius="12" label="Box"/>
			<spacer flex="2"/>
			<hbox flex="4">
				<svg-shape flex="1" id="circ1" type="circle" label="1"/>
				<svg-shape flex="1" id="circ2" type="circle" label="2" />
				<svg-shape flex="1" id="circ3" type="circle" label="3" />
			</hbox>
			<spacer flex="1"/>
		</vbox>
	</stack>

</window>

svg_example.css

window {
	background: #0D0D5A;
}

svg-shape {
	-moz-binding: url("svg-shape.xml#shape");
	-moz-user-focus: normal;
	stroke-width: 4px;
	font-family: Lucida Grande,Geneva,Verdana,Arial,Helvetica,sans-serif;
	font-style: bold;
	font-variant: normal;
	line-height: normal;
        font-size: 32px;
}

svg-shape .svg-shape-text {
	fill: white;
}

svg-shape .svg-shape-rect {
	fill: red;
	stroke: white;
}

svg-shape:focus .svg-shape-rect {
	fill: green;
	stroke: white;
}

svg-shape .svg-shape-circle {
	fill-opacity: .20;
	stroke: white;
}

svg-shape:focus .svg-shape-circle {
	fill-opacity: 1;
	stroke: white;
}

#circ1 .svg-shape-circle {
	fill: yellow;
}

#circ2 .svg-shape-circle {
	fill: green;
}

#circ3 .svg-shape-circle {
	fill: blue;
}

#svg-button {
        min-width: 48px;
        min-height: 48px;
        max-height: 48px;
}

#background-circle .svg-shape-circle {
	fill: lightslategray;
}


svg-shape.xml

<?xml version="1.0"?>
<bindings
	xmlns="http://www.mozilla.org/xbl" 
	xmlns:xbl="http://www.mozilla.org/xbl" 
	xmlns:html="http://www.w3.org/1999/xhtml" 
	xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
	xmlns:svg="http://www.w3.org/2000/svg" 
	xmlns:xlink="http://www.w3.org/1999/xlink"
>
	<binding id="shape">
		<implementation>
			<field name="svg_shape_box"/>
			<field name="svg_shape_type"/>
			<field name="svg_shape_rect"/>
			<field name="svg_shape_circle"/>
			<field name="svg_shape_ellipse"/>
			<field name="svg_shape_text"/>
			<field name="svg_shape_stroke"/>
			<field name="svg_shape_corner"/>
			<field name="svg_shape_loaded"/>
			<property name="disabled">
				<getter>
	<![CDATA[
	return this.getAttribute('disabled') == 'true';
	]]>
				</getter>
				<setter>
	<![CDATA[
  	if (val) {
	  	this.setAttribute('disabled', 'true');
  	}
  	else {
  		this.removeAttribute('disabled');
  	}
	return val;
	]]>
				</setter>
			</property>
			<property name="label">
				<setter>
	<![CDATA[
	this.setText(val);
	this.setAttribute("label", val);
	return val;
	]]>
				</setter>
			</property>
			<constructor>
	<![CDATA[
	
	const STROKE_WIDTH = 4;
	const CORNER_RADIUS = 0;
	
	this.svg_shape_type = this.getAttribute("type");
	if (!this.svg_shape_type) this.svg_shape_type = "rect";
	
	this.svg_shape_corner = parseInt(this.getAttribute("radius"));
	if (isNaN(this.svg_shape_corner)) this.svg_shape_corner = CORNER_RADIUS;
	
	//This should not be necessary, but unfortunately getting the value
	//from the stylesheet programmatically is not possible in current builds
	
	this.svg_shape_stroke = parseInt(this.getAttribute("stroke-width"));
	if (isNaN(this.svg_shape_stroke)) this.svg_shape_stroke = STROKE_WIDTH;

	var my_this = this;
	
	this.svg_shape_loaded = false;

	this.svg_shape_box = document.getAnonymousElementByAttribute(this, "anonid", "svg-shape-box");
	this.svg_shape_rect = document.getAnonymousElementByAttribute(this, "anonid", "svg-shape-rect");
	this.svg_shape_circle = document.getAnonymousElementByAttribute(this, "anonid", "svg-shape-circle");
	this.svg_shape_ellipse = document.getAnonymousElementByAttribute(this, "anonid", "svg-shape-ellipse");
	this.svg_shape_text = document.getAnonymousElementByAttribute(this, "anonid", "svg-shape-text");
	
	my_func = function myFunction(event){ window.setTimeout(function(xbl){ xbl.click(); }, 10, my_this); }
	this.svg_shape_box.addEventListener("click", my_func, true);

	my_func = function myFunction(){ my_this.doLayout();}
	window.addEventListener("load", my_func, true);

	]]>
			</constructor>
			<method name="doLayout">
				<body>
	<![CDATA[
	
	if (this.svg_shape_loaded) return;
	
	this.svg_shape_loaded = true;
	
	var box_w = this.boxObject.width;
	var box_h = this.boxObject.height;
	var cx = box_w / 2;
	var cy = box_h / 2;
			
	var stroke_w = this.svg_shape_stroke;
	
	//Either of the following should work, but don't
  	//var stroke_w = document.defaultView.getComputedStyle(this.svg_shape_rect, "").getPropertyCSSValue("stroke-width").getFloatValue(CSSPrimitiveValue.CSS_PX);
  	//var stroke_w = this.svg_shape_rect.getPresentationAttribute("stroke-width").getFloatValue(CSSPrimitiveValue.CSS_PX);
	
	this.svg_shape_box.setAttribute("width", box_w);
	this.svg_shape_box.setAttribute("height", box_h);
		
	if (this.svg_shape_type == "circle") {
		var r = Math.min(cx, cy);
		
		this.svg_shape_circle.setAttribute("cx", cx);
		this.svg_shape_circle.setAttribute("cy", cy);
		this.svg_shape_circle.setAttribute("r", r - stroke_w);
	
		this.svg_shape_rect.setAttribute("style", "display: none");
		this.svg_shape_ellipse.setAttribute("style", "display: none");
	}
	else if (this.svg_shape_type == "ellipse") {
		
		this.svg_shape_ellipse.setAttribute("cx", cx);
		this.svg_shape_ellipse.setAttribute("cy", cy);
		this.svg_shape_ellipse.setAttribute("rx", cx);
		this.svg_shape_ellipse.setAttribute("ry", cy);
	
		this.svg_shape_circle.setAttribute("style", "display: none");
		this.svg_shape_rect.setAttribute("style", "display: none");
	}
	else {
		this.svg_shape_rect.setAttribute("x", stroke_w / 2);
		this.svg_shape_rect.setAttribute("y", stroke_w / 2);
		this.svg_shape_rect.setAttribute("width", box_w - ((stroke_w / 2) + stroke_w));
		this.svg_shape_rect.setAttribute("height", box_h - ((stroke_w / 2) + stroke_w));
		this.svg_shape_rect.setAttribute("rx", this.svg_shape_corner);
		this.svg_shape_rect.setAttribute("ry", this.svg_shape_corner);

		this.svg_shape_circle.setAttribute("style", "display: none");
		this.svg_shape_ellipse.setAttribute("style", "display: none");
	}
	  	
	
	this.svg_shape_text.setAttribute("x", cx);
	this.svg_shape_text.setAttribute("y", cy - stroke_w);
		
  	this.setText(this.getAttribute("label"));

	//Not used but useful to know
	//var text_w = this.svg_shape_text.getComputedTextLength();	
  	//var text_h = document.defaultView.getComputedStyle(this.svg_shape_text, "").getPropertyCSSValue("font-size").getFloatValue(CSSPrimitiveValue.CSS_PX);

	]]>
				</body>
			</method>
			<method name="setText">
				<parameter name="text" /> 
				<body>
	<![CDATA[
	
	if (!text) text = "";
	this.svg_shape_text.firstChild.nodeValue = text;

	]]>
				</body>
			</method>
		</implementation>
		<resources>
			<stylesheet src="svg-shape.css" />
		</resources>
		<content>
			<xul:hbox class="box-inherit" xbl:inherits="align,dir,pack,orient" align="center" pack="center" flex="1">
				<svg:svg anonid="svg-shape-box" width="10px" height="10px">
					<svg:g>
						<svg:rect anonid="svg-shape-rect" class="svg-shape-rect" x="2" y="2" width="10" height="10" rx="8" ry="8"/>
						<svg:circle anonid="svg-shape-circle" class="svg-shape-circle" cx="2" cy="2" r="10"/>
						<svg:ellipse anonid="svg-shape-ellipse" class="svg-shape-ellipse" cx="2" cy="2" rx="10" ry="10"/>
						<svg:text anonid="svg-shape-text" x="16" y="0" class="svg-shape-text">Text</svg:text>
					</svg:g>
				</svg:svg>
			</xul:hbox>
		</content>
	</binding>
</bindings>


svg-shape.css

.box-inherit {
	-moz-box-orient: inherit;
	-moz-box-pack: inherit;
	-moz-box-align: inherit;
	-moz-box-direction: inherit;
}

/* Text shape */

.svg-shape-text {
	font-weight: inherit;
	font-style: inherit;
	font-size: inherit;
	font-family: inherit;
	dominant-baseline: middle;
	text-anchor: middle;
}

/* Rect shape */

.svg-shape-rect {
	stroke-width: inherit;
}

/* Circle shape */

.svg-shape-circle {
	stroke-width: inherit;
}

/* Ellipse shape */

.svg-shape-ellipse {
	stroke-width: inherit;
}