hanzi 笔顺

cfang
619 阅读1分钟 
<script src="https://cdn.jsdelivr.net/npm/hanzi-writer@3.0/dist/hanzi-writer.min.js"></script>

hanziwriter.org/cn/docs.htm…

image.png

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>生成笔顺</title>
		<script src="hanzi-writer.min.js"></script>
	</head>
	<body style="display: flex; flex-wrap: wrap">
		<div class="bishun_a"></div>

		<div id="character-1"></div>
		<div id="character-2"></div>
		<div id="character-3"></div>
		<div id="character-4"></div>
		<div id="character-5"></div>
		<div id="character-6"></div>
		<div id="character-7"></div>
		<div id="character-8"></div>
		<div id="character-9"></div>
		<div id="character-10"></div>
		<div id="character-11"></div>
		<div id="character-12"></div>
		<div id="character-13"></div>
		<div id="character-14"></div>
		<div id="character-15"></div>
		<button id="animate-button">动画</button>

		<div id="character-target-1"></div>
		<div id="character-target-2"></div>
		<div id="target-an"></div>
		<div id="target-shi"></div>

		<button id="animate-button-2">动画</button>

		<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" id="grid-background-target" style="margin: 20px">
			<line x1="0" y1="0" x2="100" y2="100" stroke="#DDD" />
			<line x1="100" y1="0" x2="0" y2="100" stroke="#DDD" />
			<line x1="50" y1="0" x2="50" y2="100" stroke="#DDD" />
			<line x1="0" y1="50" x2="100" y2="50" stroke="#DDD" />
		</svg>
	</body>
	<script>
		var writer = HanziWriter.create('character-1', '王', {
			width: 100,
			height: 100,
			padding: 5,
		})
		var writer = HanziWriter.create('character-2', '健', {
			width: 150,
			height: 150,
			padding: 20,
			strokeColor: '#EE00FF', // pink
		})
		var writer = HanziWriter.create('character-3', '康', {
			width: 150,
			height: 150,
			padding: 5,
			radicalColor: '#168F16', // green
		})
		document.getElementById('animate-button').addEventListener('click', function () {
			writer.animateCharacter()
		})

		var writer = HanziWriter.create('character-4', '激', {
			width: 100,
			height: 100,
			padding: 5,
			showOutline: false,
			strokeAnimationSpeed: 5, // 5x normal speed
			delayBetweenStrokes: 10, // milliseconds
			radicalColor: '#337ab7', // blue
		})
		document.getElementById('animate-button').addEventListener('click', function () {
			writer.animateCharacter()
		})
		writer.loopCharacterAnimation()

		var char1 = HanziWriter.create('character-target-1', '恒', {
			width: 100,
			height: 100,
			padding: 5,
			showCharacter: false,
		})
		var char2 = HanziWriter.create('character-target-2', '天', {
			width: 100,
			height: 100,
			padding: 5,
			showCharacter: false,
		})

		function chainAnimations() {
			var delayBetweenAnimations = 1000 // milliseconds
			char1.hideCharacter()
			char2.hideCharacter()

			char1.animateCharacter({
				onComplete: function () {
					setTimeout(function () {
						char2.animateCharacter()
					}, delayBetweenAnimations)
				},
			})
		}

		document.getElementById('animate-button-2').addEventListener('click', chainAnimations)

		var writer5 = HanziWriter.create('character-5', '测', {
			width: 150,
			height: 150,
			showCharacter: false,
			padding: 5,
		})
		writer5.quiz()

		var writer6 = HanziWriter.create('character-6', '鬼', {
			width: 150,
			height: 150,
			showCharacter: false,
			showOutline: false,
			showHintAfterMisses: 1,
			highlightOnComplete: false,
			padding: 5,
		})
		writer6.quiz()

		var writer7 = HanziWriter.create('character-7', '码', {
			width: 150,
			height: 150,
			showCharacter: false,
			padding: 5,
		})
		writer7.quiz({
			onMistake: function (strokeData) {
				console.log('Oh no! you made a mistake on stroke ' + strokeData.strokeNum)
				console.log("You've made " + strokeData.mistakesOnStroke + ' mistakes on this stroke so far')
				console.log("You've made " + strokeData.totalMistakes + ' total mistakes on this quiz')
				console.log('There are ' + strokeData.strokesRemaining + ' strokes remaining in this character')
			},
			onCorrectStroke: function (strokeData) {
				console.log('Yes!!! You got stroke ' + strokeData.strokeNum + ' correct!')
				console.log('You made ' + strokeData.mistakesOnStroke + ' mistakes on this stroke')
				console.log("You've made " + strokeData.totalMistakes + ' total mistakes on this quiz')
				console.log('There are ' + strokeData.strokesRemaining + ' strokes remaining in this character')
			},
			onComplete: function (summaryData) {
				console.log('You did it! You finished drawing ' + summaryData.character)
				console.log('You made ' + summaryData.totalMistakes + ' total mistakes on this quiz')
			},
		})

		let row = {
			characterName: '迪',
			characterId: 'a',
		}
		let preBh = '#cccdf5'
		let curBh = '#420f8e'
		HanziWriter.loadCharacterData(row.characterName).then(function (charData) {
			/**  每次添加清空原div中内容 */
			document.getElementsByClassName('bishun_' + row.characterId)[0].innerHTML = ''
			var target = document.getElementsByClassName('bishun_' + row.characterId)[0]
			for (var i = 0; i < charData.strokes.length; i++) {
				var strokes = charData.strokes.slice(0, i + 1)
				var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
				svg.style.width = '60px'
				svg.style.height = '60px'
				// svg.style.border = '1px solid #EEE'
				svg.style.marginRight = '3px'
				target.appendChild(svg)
				var group = document.createElementNS('http://www.w3.org/2000/svg', 'g')
				// set the transform property on the g element so the character renders at 75x75
				var transformData = HanziWriter.getScalingTransform(60, 60)
				group.setAttributeNS(null, 'transform', transformData.transform)
				svg.appendChild(group)
				strokes.forEach(function (strokePath, index) {
					var path = document.createElementNS('http://www.w3.org/2000/svg', 'path')
					path.setAttributeNS(null, 'd', strokePath)
					// style the character paths
					// path.style.fill = '#' + Math.random().toString(16).substr(2, 6).toUpperCase() //'#555'
					if (index == strokes.length - 1) {
						path.style.fill = curBh
					} else {
						path.style.fill = preBh
					}
					group.appendChild(path)
				})
			}
		})

		HanziWriter.loadCharacterData('安').then(function (charData) {
			var target = document.getElementById('target-an')
			var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
			svg.style.width = '150px'
			svg.style.height = '150px'
			target.appendChild(svg)
			var group = document.createElementNS('http://www.w3.org/2000/svg', 'g')

			// set the transform property on the g element so the character renders at 150x150
			var transformData = HanziWriter.getScalingTransform(150, 150)
			group.setAttributeNS(null, 'transform', transformData.transform)
			svg.appendChild(group)

			charData.strokes.forEach(function (strokePath) {
				var path = document.createElementNS('http://www.w3.org/2000/svg', 'path')
				path.setAttributeNS(null, 'd', strokePath)
				// style the character paths
				path.style.fill = curBh
				group.appendChild(path)
			})
		})

		//========
		function renderFanningStrokes(target, strokes) {
			var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
			svg.style.width = '75px'
			svg.style.height = '75px'
			svg.style.border = '1px solid #EEE'
			svg.style.marginRight = '3px'
			target.appendChild(svg)
			var group = document.createElementNS('http://www.w3.org/2000/svg', 'g')

			// set the transform property on the g element so the character renders at 75x75
			var transformData = HanziWriter.getScalingTransform(75, 75)
			group.setAttributeNS(null, 'transform', transformData.transform)
			svg.appendChild(group)

			strokes.forEach(function (strokePath) {
				var path = document.createElementNS('http://www.w3.org/2000/svg', 'path')
				path.setAttributeNS(null, 'd', strokePath)
				// style the character paths
				path.style.fill = '#555'
				group.appendChild(path)
			})
		}

		HanziWriter.loadCharacterData('是').then(function (charData) {
			var target = document.getElementById('target-shi')
			for (var i = 0; i < charData.strokes.length; i++) {
				var strokesPortion = charData.strokes.slice(0, i + 1)
				renderFanningStrokes(target, strokesPortion)
			}
		})

		var writer = HanziWriter.create('grid-background-target', '酷', {
			width: 100,
			height: 100,
			padding: 5,
		})
	</script>
</html>
avatar
文章
阅读
粉丝