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

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

example2.js

var canvas = document.getElementById('canvas');
	context = canvas.getContext('2d');
	rubberbandDiv = document.getElementById('rubberbandDiv');
	resetButton = document.getElementById('resetButton');
	image = new Image();
	mousedown = {};
	rubberbandRectangle = {};
	dragging = false;
//將div元素的左上角移動到滑鼠按下的選點，並使div元素可見。
function rubberbandStart(x,y){
	mousedown.x = x;
	mousedown.y = y;

	rubberbandRectangle.left = mousedown.x;
	rubberbandRectangle.top = mousedown.y;

	moveRubberbandDiv();
	showRubberbandDiv();

	dragging = true;
}
//對代表橡皮筋式選礦的這個div元素進行移動與縮放操作
function rubberbandStretch(x,y) {
	rubberbandRectangle.left = x < mousedown.x ? x : mousedown.x;
	rubberbandRectangle.top = y < mousedown.y ? y : mousedown.y;

	rubberbandRectangle.width = Math.abs(x - mousedown.x);
	rubberbandRectangle.height = Math.abs(y - mousedown.y);

	moveRubberbandDiv();
	resizeRubberbandDiv();
}
//把選中的那部分影象方法，並繪製出來，同時將表示橡皮筋式選取框的那個div隱藏起來
function rubberbandEnd() {
	var bbox = canvas.getBoundingClientRect();

	try{
		context.drawImage(canvas,
						rubberbandRectangle.left - bbox.left,
						rubberbandRectangle.top = bbox.top,
						rubberbandRectangle.width,
						rubberbandRectangle.height,
						0,0,canvas.width,canvas.height);
	}
	catch(e){

	}

	resetBubberbandRectangle();

	rubberbandDiv.style.width = 0;
	rubberbandDiv.style.height = 0;

	hideRubberbandDiv();

	dragging = false;
}

function moveRubberbandDiv() {
	rubberbandDiv.style.top = rubberbandRectangle.top + 'px';
	rubberbandDiv.style.left = rubberbandRectangle.left + 'px';
}

function resizeRubberbandDiv() {
	rubberbandDiv.style.width = rubberbandRectangle.width + 'px';
	rubberbandDiv.style.height = rubberbandRectangle.height + 'px';
}

function showRubberbandDiv() {
	rubberbandDiv.style.display = 'inline';
}

function hideRubberbandDiv() {
	rubberbandDiv.style.display = 'none';
}

function resetBubberbandRectangle() {
	rubberbandRectangle = {top:0,left:0,width:0,height:0};
}

canvas.onmousedown = function(e) {
	var x = e.clientX;
		y = e.clientY;

	e.preventDefault();
	rubberbandStart(x,y);
};

window.onmousemove = function(e){
	var x = e.clientX;
		y = e.clientY;

	e.preventDefault();
	if (dragging) {
		rubberbandStretch(x,y);
	}
};

window.onmouseup = function(e){
	e.preventDefault();
	rubberbandEnd();
};

image.onload = function(){
	context.drawImage(image,0,0,canvas.width,canvas.height);
};

resetButton.onclick = function(e){
	context.clearRect(0,0,context.canvas.width,context.canvas.height);
	context,drawImage(image,0,0,canvas.width,canvas.height);
};

image.src = 'a.png'

html:

<html>
<head>
<title>Rubber handas with layered elements</title>
<style>
	body {
		background: rgba(100,145,250,0.3);
	}

	#canvas {
		margin-left: 20px;
		margin-right: 0;
		margin-bottom: 20px;
		border: thin solid #aaaaaa;
		cursor: crosshair;
		padding: 0;
	}

	#controls {
		margin: 20px 0px 20px 20px;
	}

	#rubberbandDiv {
		position: absolute;
		border: 3px solid blue;
		cursor: crosshair;
		display: none;
	}
</style>
</head>
<body>
	<div id="controls">
	<input type="button" id="resetButton" value="Reset"/>
	</div>

	<div id="rubberbandDiv"></div>

	<canvas id="canvas" width="800" height="520">canvas not supported</canvas>

	<script src='example2.js'></script>
</body>
</html>

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

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

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

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

事件處理（一）

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

PSP&進度條（11/30）

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

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

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

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 •取列表

vue點選、滑動和長按等事件處理（自定義指令）

將以下程式碼封裝在一個js檔案裡，註釋很詳細，就不解釋了 import Vue from 'vue'; /** * @param el 繫結的DOM * @param binding 自定義指令中的binding物件 * @param type 繫結的事件型別 *

Android的事件分發（dispatchTouchEvent），攔截（onInterceptTouchEvent）與處理（onTouchEvent）

在Android中，View的結構是樹狀的，所以，當觸發觸控事件的時候，其事件傳遞也是從上之下一層層的傳遞。下面我們結合例子來一點點進行分析。首先，我們需要了解事件處理中的幾個方法： 1、在ViewGroup中，事件分為dispatchTouchEvent（事件的分發）

jQuery事件處理（一）

事件處理函式一.指定事件處理函式通過下面方法： jQuery選擇器.事件名(function()){ <函式體> }); 二.繫結到事件處理函式 1.bind()方法可以為每一個匹配元素的特定事件（

複雜事件處理（Complex Event Processing）

複雜事件處理複雜事件處理（CEP，Complex Event Processing）是一種基於動態環境中事件流的分析技術，事件在這裡通常是有意義的狀態變化，通過分析事件間的關係，利用過濾、關聯、聚合等技術，根據事件間的時序關係和聚合關係制定檢測規則，持續地從

QT事件處理（以按鈕為例子）

複雜事件處理（CEP）的理解（上）

隨著企業資訊化的進一步深入，企業產生大量的實時資料（比如證券市場的交易資料，電力行業的探測資料），用關係型資料庫處理這些大量的實時資料，已經力不從心了。更重要的是，企業需要從這些大量的實時資料裡面，及時發現、挖掘一些有意義的資料，比如證券市場那些交易有違規操作的嫌疑，如果

複雜事件處理（CEP）——事件模式，規則及約束

從大量執行中的事件裡找出感興趣的事件集合的能力是觀察和控制事件驅動系統的基礎。我們需要能夠描述我們感興趣事件的模式並能快速發現匹配這類模式的事件集合。1.事件模式事件模式是一個模板，用來匹配期望找出的特定事件的集合。它準確的描述了事件和事件之間的因果依賴，時間關係、資料引數和

複雜事件處理（Complex Event Processing）--3. 複雜事件處理引擎產品

3. 複雜事件處理引擎產品複雜事件處理的核心產品其實就是規則引擎，規則引擎的工作原理如下圖所示。（1）開發者使用規則語言或者狀態機定義一系列的規則，這些規則定義了系統中實體應對外界變化的反應規律。即一個實體物件當受到外部的作用，內部狀態發生了變化，

js實現對Android裝置物理返回鍵單擊／雙擊事件處理（Framework7框架）

單擊事件： //裝置返回鍵 document.addEventListener(“backbutton”, onBackKeyDown, false); function onBackKeyDown

JavaScript之事件處理（監聽）函式

JavaScript之事件處理(監聽)函式事件是使用者和瀏覽器自身進行的特定行為。這些事件都有自己的名字，如click,，load，mouseover。用於響應某個事件而呼叫的函式稱為事件處理函式，或者DOM稱之為事件監聽函式。事件處理函式有兩種分配方式：在JavaScri

Qt學習筆記（三）事件處理

事件處理 1、事件事件是由視窗或者Qt自身產生的，用以響應所發生的各類事情。當用戶按下或者鍵盤或者滑鼠按鈕時，就可以產生一個鍵盤或者滑鼠事件；當某個視窗第一次顯示的時候，就會產生一個繪製事件，用來告知視窗需要重新繪製它本身，從而使視窗可見。大多數事件是作為使用者動作的響應

Javascript高級編程學習筆記（58）—— 事件（2）事件處理程序

三個參數 ner load 對象高級方法條件只需要結果事件處理程序事件處理程序即響應某個事件的函數事件處理程序以 “on” 開頭如“onclick”，“onload” HTML事件處理程序某個元素支持的每種事件都可以使用一個與響應的事件處理程序同名的

WebDriver事件處理（滑鼠+按鍵）

我們在使用webdriver的clear方法時，我們需要注意其中selenium下webdriver的clear()方法，那我們首先看看官網上對clear()方法的描述： /** * If this element is a text entry element,

微信公眾平臺開發教程Java版(六) 事件處理（選單點選/關注/取消關注）

前言：事件處理是非常重要的，這一章講講常見的事件處理 1、關注/取消關注 2、選單點選事件型別介紹：在微信中有事件請求是訊息請求中的一種。請求型別為：event 而event事件型別又分多種事件型別，具體分關注：subscribe取消關注：unsubscribe自定義選單點選：CLICK 根

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

相關推薦