Skip to content

Instantly share code, notes, and snippets.

@zuzu

zuzu/touch_count_tag_sample.html

Last active September 27, 2017 04:29
Show Gist options
  • Save zuzu/ae034987c59677a451133a33ccb185a1 to your computer and use it in GitHub Desktop.
Save zuzu/ae034987c59677a451133a33ccb185a1 to your computer and use it in GitHub Desktop.
Download ZIP
画像をタップしてカウント用のタグ付けするサンプルスクリプト https://cdn.rawgit.com/zuzu/ae034987c59677a451133a33ccb185a1/raw/88664881550002dc4f8db494ebc9ce6b05655aa1/touch_count_tag_sample.html
Raw
touch_count_tag_sample.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.19/fabric.js">
</script>
<title>画像ファイルをタップしてカウントタグをつけるサンプル</title>
<script>
Object.defineProperty(Object.prototype, "forIn", {
value: function(fn, self) {
self = self || this;
Object.keys(this).forEach(function(key, index) {
var value = this[key];
fn.call(self, key, value, index);
}, this);
}
});
var canvas = new fabric.Canvas('cnvs', {
selection: false
});
var maxWidth = 600;
var rect, isDown, origX, origY;
var targetColor = "rgba(255,0,0,0.5)";
var targetGroupName = "redG";
canvas.on('mouse:down', function(o) {
console.log(o.target);
var pointer = canvas.getPointer(o.e);
if (o.target.name !== "background-image") {
delCounter(canvas, o.target.name);
} else {
addCounter(canvas, pointer, targetColor, targetGroupName);
}
});
$(function() {
// id="ufile"の変化でコールバック
$("#ufile").change(function() {
// Formからファイルを取得
var file = this.files[0];
var imageReader = new FileReader;
imageReader.onload = function(e) {
var image = new Image;
image.onload = function() {
var fabricImage = new fabric.Image(image);
var aspect = fabricImage.width / fabricImage.height;
var width = Math.min(image.width, maxWidth);
// Fabric.jsのImageオブジェクトを作成
fabricImage.set({
selectable: false, // マウスで動かせないようにする
width: width,
height: width / aspect,
});
// canvasのサイズを画像のサイズに合わせる
canvas.setWidth(fabricImage.width);
canvas.setHeight(fabricImage.height);
canvas.clear();
// ほかのオブジェクトと判別できるようにnameフィールドを作成する。
fabricImage.name = "background-image";
// 画像をcanvasに追加（描画）する
canvas.add(fabricImage);
};
image.src = e.target.result;
};
imageReader.readAsDataURL(file); // フォームで選択された画像をセット
})
})
function chenge_red() {
this.targetColor = "rgba(255,0,0,0.5)";
this.targetGroupName = "redG";
}
function chenge_blue() {
this.targetColor = "rgba(0,0,255,0.5)";
this.targetGroupName = "blueG";
}
function addCounter(canvas, pointer, colorString, groupName) {
origX = pointer.x;
origY = pointer.y;
rect = new fabric.Rect({
left: 0,
top: 0,
originX: 'left',
originY: 'top',
width: 20,
height: 20,
angle: 0,
fill: colorString,
transparentCorners: false,
selectable: false, // マウスで動かせないようにする
});
var newCountNumber = (getCurrentCountNumber(canvas, groupName) + 1);
// ほかのオブジェクトと判別できるようにnameフィールドを作成する。
rect.name = "rect_" + groupName + "_" + newCountNumber;
var text = new fabric.Text(String(newCountNumber), {
left: 5,
top: 20,
fontFamily: 'Arial',
fontSize: 12,
fontWeight: 'bold',
fill: "black",
selectable: false, // マウスで動かせないようにする
});
// ほかのオブジェクトと判別できるようにnameフィールドを作成する。
text.name = "text_" + groupName + "_" + newCountNumber;
var group = new fabric.Group([rect, text], {
left: origX,
top: origY,
selectable: false, // マウスで動かせないようにする
});
// ほかのオブジェクトと判別できるようにnameフィールドを作成する。
group.name = "group_" + groupName + "_" + newCountNumber;
canvas.add(group);
//canvas.add(rect);
//canvas.add(text);
}
function getCurrentCountNumber(canvas, groupName) {
var counter = 0;
canvas.getObjects().forIn(function(key, value, index) {
if (value.name != null && value.name.indexOf("_") > 0) {
if (value.name.split("_")[1] === groupName) counter++;
}
});
return counter;
}
function delCounter(canvas, targetName) {
var groupName = targetName.split("_")[1];
var targetObjectName = "rect" + targetName.substring((targetName.indexOf("_")));
var targetTextName = "text" + targetName.substring((targetName.indexOf("_")));
var removeObjects = [];
// 削除対象オブジェクト収集
canvas.getObjects().forIn(function(key, value, index) {
if (value.name != null && value.name.indexOf("_") > 0) {
if (value.name === targetName) {
value.forEachObject(function(o) {
//console.log(o);
removeObjects.push(o);
//canvas.remove(o);
});
removeObjects.push(value);
// 複数はありえないので即break;
return;
};
}
});
// 実削除処理
removeObjects.forIn(function(key, value, index) {
canvas.remove(value);
});
var counter = 1;
canvas.getObjects().forIn(function(key, value, index) {
if (value.name != null && value.name.indexOf("_") > 0) {
if (value.name.split("_")[1] === groupName) {
if (value.getObjects()[0].name.indexOf("text") == 0) {
value.remove(value.getObjects()[0]);
} else {
value.remove(value.getObjects()[1]);
}
var text = new fabric.Text(String(counter), {
left: -5,
top: 3,
originX: 'left',
originY: 'top',
fontFamily: 'Arial',
fontSize: 12,
fontWeight: 'bold',
fill: "black",
selectable: false, // マウスで動かせないようにする
});
// ほかのオブジェクトと判別できるようにnameフィールドを作成する。
text.name = "text_" + groupName + "_" + counter;
value.add(text);
value.name = "group_" + groupName + "_" + counter;
counter++;
};
}
});
// 再描画
canvas.renderAll();
}
</script>
</head>
<body>
<h1>画像を選択してください。</h1>
<form id="my_form" name="my_form">
<input accept="image/jpeg,image/png" id="ufile" name="ufile" type="file"><br>
</form>
<hr>
<div>
<h1>プレビュー</h1>
<canvas id="cnvs"></canvas><!-- canvas要素を配置 -->
</div>
<div>
<button onclick="chenge_red();" style="color:red" type="button">赤</button>　<button onclick="chenge_blue();" style="color:blue" type="button">青</button>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment