zuzu/touch_count_tag_sample.html

## 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>
	<!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>