發表更新Program8 分鐘讀完 (大約1208個字)

KineticJS 建立範圍選取功能

KineticJS 介紹

KineticJS 是一套針對 canvas 設計的函式庫，使得我們在操作使用 canvas 的時候相對簡單易懂。
這篇文章將會教您如何透過 KineticJS 在螢幕上（canvas）建立一些物件，然後可以透過拖拉選取範圍。

背景

如果您還不了解 HTML5 canvas 標簽，請先閱讀HTML5 Canvas Tutorials。如果您還不知道什麼是 KineticJS 請先至官網 閱讀基本教學。
這篇文章是針對 KineticJS v4.7.4。

程式碼說明

在這個範例中，將會在 canvas 建立三個方塊，然後可以選取它們。首先呢，您必須在 html 中有一個 container

1
<div id='container'></div>

接著建立 stage 和 layer ，這部分如果您不能理解請先參考基本教學。簡單的說明，透過 Kinetic 來操作 canvas
我們一般會建立一個 stage 和 layer ，透過 layer 包含各種圖形物件，stage 包含 layer 分層的方式來組織 canvas

1
2
3
4
5
6
var stage = new Kinetic.Stage({
  container: 'container',
  width: 100,
  height: 100
});
var layer = new Kinetic.Layer();

為了完成我們的功能，第一個技巧是在整個 layer 放入一張全滿透明的方形物件，這物件是用來判斷當使用者
點擊滑鼠的時候可以開始進行拖曳以及放開的時候做些對應的處理。

1
2
3
4
5
6
7
8
9
var rectBackground = new Kinetic.Rect({
  x: 0,
  y: 0,
  height: stage.attrs.height,
  width: stage.attrs.width,
  fill: 'transparent',
  draggable: false,
  name: 'rectBackground'
});

現在我們可以加入上面說的方形物件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
DrawBlocks();
function DrawBlocks() {
  var x, y, heigth;
  x = 90;
  y = 10;
  size = 40;
  CreateBlock(x, y, size, size, 'green');

  x = 150;
  y = 80;
  CreateBlock(x, y, size + 20, size + 60, 'red');

  x = 110;
  y = 170;
  CreateBlock(x, y, size, size, 'blue');
  layer.draw();
}

function CreateBlock(x, y, height, width, color) {
  var grpBlk = new Kinetic.Group({
  	x: x,
    y: y,
    height: height,
    width: width,
    name: color,
    draggable: true
  });
  var blk = new Kinetic.Rect({
    x: x,
    y: y,
    height: height,
    width: width,
    fill: color,
    name: color + ' block'  
  });
  grpBlk.add(blk);
  blk.setAbsolutePosition(x, y);
  grpBlk.setAbsolutePosition(x, y);
  layer.add(grpBlk);
  return grpBlk;
}

這個範例讓我們可以透過拖拉滑鼠建立一個選取方塊，為了做到這點我們需要一些變數的協助。

1
2
3
4
5
6
var arSelected = new Array(); // 陣列是用來保存被選取到的 block 的名稱。
var bDragging = false;	      // 當程式正在透過滑鼠拖拉計算方塊的大小時避免程式又從新執行。
var bHaveSelBox = false;      
var rectSel = null;           // 最終看到的選取方形
var initX = 0;                // 初始的 x, y 坐標。
var initY = 0;

現在我們需要介紹一些處理事件，第一件要做的事情是我們需要截取當滑鼠點擊的那一瞬間。

1
2
3
rectBackground.on('mousedown', function(evt) {
  bDragging = true;
}

接著，當滑鼠開始移動拖拉，我們需要重新產生選取方塊。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
stage.getContent().addEventListener('mousemove', function(e) {
	if (bDragging)
  {
  	SetSelRectPosition(e);
  }
});

var bInHere = false; // 防止事件重新被執行。
function SetSelRectPosition(e) {
  if (bDragging && !bInHere)
  {
  	bInHere = true;
    var canvas = layer.getCanvas();
    var mousepos = stage.getPointerPosition();
    var x = mousepos.x;
    var y = mousepos.y;

    if (!bHaveSelBox) {
    	initX = x;
      initY = y;
      rectSel = new Kinetic.Rect({
      	x: initX,
        y: initY,
        height: 1,
        width: 1,
        fill: 'transparent',
        stroke: 'black',
        strokeWidth: 1
      });
      layer.add(rectSel);
      layer.draw();
      bHaveSelBox = true;
    } else {
    	var height = 0;
      var width = 0;
      var newX = 0;
      var newY = 0;

      if (x > initX)
        newX = initX;
      else
        newX = x;
      if (y > initY)
        newY = initY;
      else
        newY = y;

      height = Math.abs(Math.abs(y) - Math.abs(initY));
      width = Math.abs(Math.abs(x) - Math.abs(initX));

      rectSel.setHeight(height);
      rectSel.setWidth(width);
      rectSel.setX(newX);
      rectSel.setY(newY);
      layer.draw()
    }
  }
  bInHere = false;
}

接著當使用者放掉滑鼠按鍵時，我們需要計算哪些物件被選取了然後把它們的名稱放到 arSelected 陣列。
稍後我們就可以拿這個清單去做高亮等處理。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
stage.getContent().addEventListener('mouseup', function(e) {
  if (bDragging) {
    bDragging = false;
    GetOverlapped();
    if (rectSel != null)
      rectSel.remove();

    rectSel = null;
    bHaveSelBox = false;
    layer.draw();
  }
});

function GetOverlapped()
{
  if (rectSel == null) {
    return ;
  }
  var iHeight = 0;
  var iWidth = -1000;
  arSelected.length = 0;
  initX = 10;
  initY = 10;
  var arGroups = layer.getChildren();
  for (var i=0; i<arGroups.length; i++) {
    var grp = arGroups[i];
    if (grp.attrs.name != rectSel.attrs.name && grp.attrs.name != rectBackground.attrs.name grp.attrs.name != 'btn' && grp.attrs.name != 'highlightBlock') {
      var pos = rectSel.getAbsolutePosition();
      var selRecXStart = parseInt(pos.x);
      var selRecXEnd = parseInt(pos.x) + parseInt(rectSel.attrs.width);
      var selRecYStart = parseInt(pos.y);
			var selRecYEnd = parseInt(pos.y) + parseInt(rectSel.attrs.height);
      var grpXStart = parseInt(grp.attrs.x);
			var grpXEnd = parseInt(grp.attrs.x) + parseInt(grp.attrs.width);
			var grpYStart = parseInt(grp.attrs.y);
			var grpYEnd = parseInt(grp.attrs.y) + parseInt(grp.attrs.height);

      if ((selRecXStart <= grpXStart && selRecXEnd >= grpXEnd) && (selRecYStart <= grpYStart && selRecYEnd >= grpYEnd))
			{
				if (arSelected.indexOf(grp.getName()) < 0)
				{
					arSelected.push(grp.getName());

					var tmpX = parseInt(grp.attrs.x);
					var tmpY = parseInt(grp.attrs.y);

					var rectHighlight = new Kinetic.Rect({
						x: tmpX,
						y: tmpY,
						height: grp.attrs.height,
						width: grp.attrs.width,
						fill: 'transparent',
						name: 'highlightBlock',
						stroke: '#41d6f3',
						strokeWidth: 3
					});

					layer.add(rectHighlight);
				}
			}
    }
  }
}

最後當使用者在背景點一下要取消選取，或者選取單一方塊

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
stage.getContent().addEventListener('mousedown', function(e) {
  if(arSelected.length > 0)
  {
    var name = '';
    if (e.shape != undefined)
      name = e.shape.attrs.name;
    if (e.targetNode != undefined)
      name = e.targetNode.attrs.name;
    if (name != 'btn')
      RemoveHighlights();
  }
});

function RemoveHighlights()
{
	var arHighlights = layer.get('.highlightBlock');
	while (arHighlights.length > 0)
	{
		arHighlights[0].remove();
		arHighlights = layer.get('.highlightBlock');
	}
	arSelected.length = 0;
}

在這個範例中我們會在增加一個按鈕可以用來取得關於被選取物件的資料

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
x = 85;
y = 250;
var grpGetSelectedButton = CreateButton(x, y, "Get Selected");
grpGetSelectedButton.on("click", function (evt) { ShowSelected(); });

function CreateButton(x, y, text)
{
	var grpButton = new Kinetic.Group({
		x: x,
		y: y,
		height: 30,
		width: 135,
		name: 'btn',
		draggable: true
	});

	var blkButton = new Kinetic.Rect({
		x: x,
		y: y,
		height: 30,
		width: 135,
		fill: 'Violet',
		name: 'btn'
	});

	var txtButton = new Kinetic.Text({
		x: x + 2,
		y: y + 2,
		fontFamily: 'Calibri',
		fontSize: 22,
		text: text,
		fill: 'black',
		name: 'btn'
	});

	grpButton.add(blkButton);
	grpButton.add(txtButton);
	grpButton.setAbsolutePosition(x, y);
	blkButton.setAbsolutePosition(x, y);
	txtButton.setAbsolutePosition(x + 2, y + 2);

	layer.add(grpButton);

	return grpButton;
}

function ShowSelected()
{
	var str = "";
	for (var i = 0; i < arSelected.length; i++)
	{
		str += arSelected[i] + ", ";
	}
	if (str != "")
		str = str.substring(0, str.length - 2);

	alert(str);
}

KineticJS 建立範圍選取功能

https://andyyou.github.io/2013/11/28/kineticjs-establish-a-range-selection-function/

作者

andyyou(YOU,ZONGYAN)

發表於

2013-11-28

更新於

2023-12-05

許可協議

#

喜歡這篇文章嗎? 贊助一下作者吧!

追蹤

分類

最新文章

彙整

標籤

.net mvc1
RoR15
api1
aws5
azure2
bot1
bundler2
cache1
carrier wave2
centos1
chrome2
cloudflare1
compass1
css19
cve1
devise1
dnd1
docker6
e-invoice1
entity framework1
envoy1
es63
facebook1
flux1
framework2
gcp4
gitlab2
go1
grunt4
gulp3
heroku6
html2
iisexpress1
ios3
javascript88
javascript express passport1
javascript nodejs1
jekyll2
jetstream1
jspm1
jwt1
k8s2
laravel10
letsencrypt1
linux1
mechanism1
mongodb2
nextjs2
nginx1
node1
nodejs7
oocss1
osx6
package manager6
php3
postgres1
postgresql2
python1
queue2
rabbitmq2
rack server1
rails6
rails webpack stimulus javascript bootstrap1
raspberry-pi1
react22
react native1
reactjs32
redux1
ruby18
sass2
selenium1
serial-port1
slim1
ssh1
ssl2
stimulus1
svg javascript3
task runner3
tmux1
tools1
ubuntu4
ux1
vm1
vue1
vuejs5
webpack4
windows3
wsl2
xml1
zoom1

廣告

×