canvas（11/30）--------事件處理（滑鼠處理）精靈表座標檢視器

阿新 • • 發佈：2019-01-21

滑鼠處理

使用監聽器，可以通過onmousemove，onmouseup，onmouseout或者onmousedown來註冊監聽器。

使用onmousedown，onmousemove這樣的方式來註冊監聽器，比呼叫addEventListener（）要稍微簡單一點，如果滑鼠事件要註冊多個監聽器的時候，那就要使用addEventListener（）。

實現精靈表座標檢視器：

examp1.js

var canvas = document.getElementById('canvas'),
	readout = document.getElementById('readout'),
	context = canvas.getContext('2d'),
	spritesheet = new Image();


//Functions
//將滑鼠座標轉換成canvas座標
function windowToCanvas(canvas,x,y) {
	var bbox = canvas.getBoundingClientRect();
	return {
		x:x - bbox.left * (canvas.width / bbox.width),
		y:y - bbox.top * (canvas.height / bbox.height)
	};
}

function drawBackground(){
	var VERTICAL_LINE_SPACING = 12;
		i = context.canvas.height;
	//清屏
	context.clearRect(0,0,canvas.width,canvas.height);
	context.strokeStyle = 'lightgray';
	context.lineWidth = 0.5;

	while(i > VERTICAL_LINE_SPACING*4){
		context.beginPath();
		//繪畫從（0，i）繪製到（context.canvas.width,i）這條直線通過moveTo和lineTo函式進行繪畫的
		context.moveTo(0,i);
		context.lineTo(context.canvas.width,i);
		context.stroke();
		i -=VERTICAL_LINE_SPACING;

	}
}

//繪畫精靈表
function drawSpritesheet(){
	//drawImage(圖片，x，y)
	context.drawImage(spritesheet,0,0);
}

function drawGuidelines(x,y){
	context.strokeStyle = 'rgba(0,0,230,0.8)';
	context.lineWidth = 0.5;
	drawVerticalLine(x);
	drawHorizontalLine(y);
}

//座標的顯示
function updateReadout(x,y) {
	//toFixed() 方法可把 Number 四捨五入為指定小數位數的數字。
	readout.innerText = '(' + x.toFixed(0) + ',' +  y.toFixed(0) +')';
}

//繪製水平線
function drawHorizontalLine(y) {
	context.beginPath();
	context.moveTo(0,y+0.5);
	context.lineTo(context.canvas.width,y+0.5);
	context.stroke();
}

//繪製垂直線
function drawVerticalLine(x) {
	context.beginPath();
	context.moveTo(x+0.5,0);
	context.lineTo(x+0.5,context.canvas.height);
	context.stroke();
}
//滑鼠移動的位置
canvas.onmousemove = function (e) {
	var loc = windowToCanvas(canvas,e.clientX,e.clientY);

	drawBackground();
	drawSpritesheet();
	drawGuidelines(loc.x,loc.y);
	updateReadout(loc.x,loc.y);
}
//匯入圖片
spritesheet.src = 'a.png';
spritesheet.onload = function(e){
	drawSpritesheet();
}
//繪畫
drawBackground();

html：

<html>
<head>
<title>sprite sheets</title>
<style>
	body {
		background: #dddddd;
	}

	# canvas {
		position: absolute;
		left: 0px;
		top: 20px;
		margin: 20px;
		background: #ffffff;
		border: thin inset rgba(100,150,230,0.5);
		cursor:pointer;
	}

	#readout {
		margin-top: 10px;
		margin-left: 15px;
		color: blue;
	}
</style>
</head>

<body>
	<div id="readout"></div>
	<canvas id="canvas" width="500" height="250">canvas not supported</canvas>
	<script src='example1.js'></script>
</body>
</html>

還需要一張圖片：a.png

canvas（11/30）--------事件處理（滑鼠處理）精靈表座標檢視器

滑鼠處理使用監聽器，可以通過onmousemove，onmouseup，onmouseout或者onmousedown來註冊監聽器。使用onmousedown，onmousemove這樣的方式來註冊監聽器，比呼叫addEventListener（）要稍微簡單一點，如果滑

canvas（11/30）--------事件處理（區域性圖片放大）

example2.js var canvas = document.getElementById('canvas'); context = canvas.getContext('2d'); rubberbandDiv = document.getElementById

PSP&進度條（11/30）

技術進度 com 分享圖片 amp img image http 代碼行數一、PSP 二、PSP餅狀圖三、進度條四、代碼行數、博文字數累積表五、代碼行數、博文字數累積折線圖 PSP&進度條（11/30）

python筆記（11.30-2.0-2.4）

2.0-2.4 內建函式一個函式可以說是一個邏輯或者功能.使用ipython檢視python的內建函式builtin. 顯示一共有137個內建函式也可以登入https://docs.python.org/2/library 官網去查詢 •返回數字的絕對值abs() abs(-10) 返回的是10 •取列表

上週熱點回顧（11.30-12.6）

熱點隨筆： · 北漂碼農的我，把在大城市過成了屯子一樣舒服，哈哈哈哈哈！ (小傅哥)· 蹉跎了歲月，竟又是一年 (鄒瓊俊)· 《部落格園.NET歷險記》第2季 - 故障公告：高併發下全線崩潰 (部落格園團隊)

2017.11.30 Reat前後端數據交互之Button提交數據處理（ajax方法單獨封裝成API，不用Form）

logs 處理 mage mongoose 技術 module strong 輸入框 reat 1.按鈕定義： 2.引入外部js文件（封裝了ajax方法的文件）：註意目錄結構 3.調用ajax文件中的具體方法： 4.關於ajax文件中方法的編寫語法：寫

事件處理（一）

blog lis 監聽上下 strong 單擊長按 view 處理方法事件處理步驟: 1.註冊事件監聽器 2.根據指定的事件中編寫事件處理的代碼 3.在事件處理的代碼證完成對事件的處理事件處理方法 1.setOnClickListener(View.OnC

Qt事件機制（是動作發生後，一種通知對象的消息，是被動與主動的總和。先處理自己隊列中的消息，然後再處理系統消息隊列中的消息）

str 發送 filter 簡化後者 nts 類型 min() 鼠標滾輪 Qt事件機制 Qt程序是事件驅動的, 程序的每個動作都是由幕後某個事件所觸發.。 Qt事件的發生和處理成為程序運行的主線，存在於程序整個生命周期。 Qt事件的類型很多, 常見的qt的事件如下:

7-27 家譜處理（30 分）

tor lang -html 沒有初始實例至少 getc truct 人類學研究對於家族很感興趣，於是研究人員搜集了一些家族的家譜進行研究。實驗中，使用計算機處理家譜。為了實現這個目的，研究人員將家譜轉換為文本文件。下面為家譜文本文件的實例： John Rober

Netty事件監聽和處理（上）

事件處理多路復用 linu 自定義事件性能 cdn 處理請求 fancybox 客戶陪產假結束了，今天又開始正常上班了，正好趕上米粉節活動，又要忙上一陣了，米粉節活動時間為4.03 - 4.10，有不少優惠，感興趣的可以關註mi.com或小米商城app。今天

Netty事件監聽和處理（下）

關註 proto cte meta pro sse cti 讀取線程模型上一篇介紹了事件監聽、責任鏈模型、socket接口和IO模型、線程模型等基本概念，以及Netty的整體結構，這篇就來說下Netty三大核心模塊之一：事件監聽和處理。前面提到，Netty是一個N

Kafka設計解析（二十二）Flink + Kafka 0.11端到端精確一次處理語義的實現

pac 內部通知發生 ng- 設計解析位移 eas 轉載自 huxihx，原文鏈接【譯】Flink + Kafka 0.11端到端精確一次處理語義的實現本文是翻譯作品，作者是Piotr Nowojski和Michael Winters。前者是該方案的實現

Spring入門學習筆記（3）——事件處理類

aware super 不能 href his 應用 odi eap app 目錄 Spring中的事件處理 Spring內建事件監聽Context事件 Example 自定義Spring事件 Spring中的事件處理 ApplicationContext 是Spr

第六章樹和二叉樹--樹和森林-計算機17級 7-2 家譜處理（30 分）

7-2 家譜處理（30 分）人類學研究對於家族很感興趣，於是研究人員蒐集了一些家族的家譜進行研究。實驗中，使用計算機處理家譜。為了實現這個目的，研究人員將家譜轉換為文字檔案。下面為家譜文字檔案的例項： John Robert Frank And

Flask框架後端開發常見錯誤處理（2018/11/14）

Flask常見錯誤與解決方法（By Wdx） 1.ValueError: urls must start with a leading slash 這個錯誤原因可能發生在所有路由相關地方，少加了一個'/'造成的。 2.ImportError: cannot import name 'db' 這個錯誤原