算法
Shuffle an Array
// 以数字集合 1, 2 和 3 初始化数组。
int[] nums = {1,2,3};
Solution solution = new Solution(nums);
// 打乱数组 [1,2,3] 并返回结果。任何 [1,2,3]的排列返回的概率应该相同。
solution.shuffle();
// 重设数组到它的初始状态[1,2,3]。
solution.reset();
// 随机返回数组[1,2,3]打乱后的结果。
solution.shuffle();
/**
* @param {number[]} nums
*/
var Solution = function(nums) {
this._nums = nums;
};
/**
* Resets the array to its original configuration and return it.
* @return {number[]}
*/
Solution.prototype.reset = function() {
return this._nums;
};
/**
* Returns a random shuffling of the array.
* @return {number[]}
*/
Solution.prototype.shuffle = function() {
var nums = this._nums.slice(0);
var rdIdx, swap;
function rd(n, m){
var c = m-n+1;
return Math.floor(Math.random() * c + n);
}
for(var i = nums.length; i--;){
rdIdx = Math.floor(Math.random() * (i + 1));
swap = nums[i];
nums[i] = nums[rdIdx];
nums[rdIdx] = swap;
}
return nums;
};
SVG
SVG marker
<defs>
<marker id="markerSquare" markerWidth="7" markerHeight="7" refX="4" refY="4" orient="auto">
<rect x="1" y="1" width="5" height="5" style="stroke: none; fill:#000000;" />
</marker>
<marker id="markerArrow" markerWidth="13" markerHeight="13" refX="2" refY="7" orient="auto">
<path d="M2,2 L2,13 L8,7 L2,2" style="fill: #000000;" />
</marker>
</defs>
<path d="M100,20 l50,0 l0,50 l0,50 l50,0" style="stroke: #0000cc; stroke-width: 1px; fill: none;
marker-start: url(#markerSquare);
marker-mid: url(#markerArrow);
marker-end: url(#markerArrow);
" />
SVG marker被用来标记线段或路径的开始、中间和结束。例如，你可以使用圆形或正方形标记作为路径的开始，并使用一个箭头标记路径的结束。
这个例子定义了一个宽度（markerWidth=”8”）和高度（markerHeight=”8”）都为8的标记。宽度和高度需要显示设置，因为标记是一个独立的图形元素。
SVG text
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<text x="20" y="40">Example SVG text 1</text>
<line x1="10" y1="40" x2="150" y2="40" style="stroke: #000000"/>
</svg>
属性
- text-anchor start，middle和end，居左居右居中三种属性。
- fill: none; stroke: #000000; 字体边框和实体部分颜色
- letter-spacing和kerning可以控制字母间距和字距（字形间距）
- text-decoration 下划线
- textLength=”140” lengthAdjust=”spacing” 文本宽度自适应
- writing-mode 文本方向
SVG tspan
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<text x="10" y="20">
Here is a text with
<tspan style="baseline-shift:super;">superscript</tspan>
and
<tspan style="baseline-shift:sub;">subscript</tspan> mixed with normal text.</text>
</svg>
根据前一行文字进行定位
SVG textpath
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path id="myTextPath2" d="M75,20 l100,0 l100,30 q0,100 150,100" />
</defs>
<text x="10" y="100" style="stroke: #000000;">
<textPath xlink:href="#myTextPath2">
Text along a more advanced path with lines and curves.
</textPath>
</text>
</svg>
元素用于沿着路径（例如圆上）布局文本。这看起来非常的酷。不同浏览器沿着路径呈现文本的方式有一点区别，因此请务必检查你的文本在你计划支持的所有浏览器中的效果。
SVG switch
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<switch>
<g systemLanguage="en-UK">
<text x="10" y="20">UK English</text>
</g>
<g systemLanguage="en">
<text x="10" y="20">English</text>
</g>
<g systemLanguage="zh-cn">
<text x="10" y="20">中文</text>
</g>
</switch>
</svg>