いくつかの入力をキャプチャするためにHTML5キャンバスを作成する必要があります。線画（白地に黒の線）をレンダリングして、ユーザーがのセクションに色を付けられるようにしたいと思います。
次に、このデータを最後に取得してサーバー側で処理し、後日再度レンダリングできるようにしたいと思います。
画像をレンダリングするためのデータをデータベースに保存して、潜在的に任意の画像を描画できるようにしたいと思います。
HTML5とcanvasタグを調べました。Kineticjsライブラリにもあります。必要なものの簡単なデモを作成することができました。
私がデモしたところから、このアプローチは、イベントを追加できるように各セクションを作成して描画する必要があるため、最初から画像を維持するのもセットアップするのも非常に困難です。
私の質問は-このようなものや、提案する多くのフレームワークのいずれかを使った経験はありますか？
Kinectic Js ライブラリを使用して、データ (キャンバス状態) をロードおよび取得するという同様の状況に陥りました。
現在、ファブリック js ライブラリを使用しています。https://github.com/kangax/fabric.js/
オブジェクトのプロパティまたは状態をcanvas.toJSON()メソッドで保存してから、 canvas.loadFromJSON( )メソッドでキャンバスをリロードします。
一部のブラウザ、特にモバイルブラウザでは、Svgを表示できませんが、RaphaelJsの画像は表示できます。非常に優れたライブラリであるRaphaelを使用し、svgで画像を描画し、プリミティブパスを使用し、Raphael描画関数にそのデータを追加すると、キャンバスに画像が表示されます。私はflexとfxgを使用しており、ベクター画像の場合、インターフェイスを構築する必要がある場合、fxgとflashよりも高速なものはありませんが、最近では、90年代に戻ったようにhtml5と厄介なjavascriptに制限されています:)
私はそれをいじってみましたが、この例は非常に基本的なものであり、本番用ではありません。http://xisse.net/shapes.phpで例を表示し、 http: //xisse.net/shapes.zip でソースをダウンロードできます 。php を実行する Web サーバーと mysql データベースが必要です。.zip ファイルには sql ファイルが含まれています。shape.php ファイルの db 接続を編集するだけで、すぐに使用できます。また、以下のコードを投稿します。
形状.php
<html>
<head>
<?php
//connect to db
mysql_connect('localhost','user','password');
mysql_select_db('shapes');
?>
<style>
canvas
{
border: 1px solid #9C9898;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v3.1.0.js"></script>
<script type="text/javascript" src="shapes.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var stage;
var canvas;
var context;
var cursor;
var item = [];
var rectX;
var rectY
prepareCanvas();
function prepareCanvas() {
stage = new Kinetic.Stage("container", 578, 200);
canvas = stage.getCanvas();
rectX = canvas.width / 2 - 50;
rectY = canvas.height / 2 - 25;
cursor = setupCursor();
setupColours();
setupItem();
$('input[name=type]').change(setupItem);
}
/* Functions */
function setupCursor() {
return new Kinetic.Shape(function () {
var context = this.getContext();
context.beginPath();
context.lineWidth = 1;
context.strokeStyle = "black";
context.fillStyle = cursor.color;
context.arc(0, 0, 10, 0, Math.PI * 2, true);
context.closePath();
context.fill();
context.stroke();
});
}
function setupColours() {
var cBlack = createColour(20, 20, 20, 'black');
var cWhite = createColour(20, 50, 20, 'white');
var cRed = createColour(20, 20, 50, 'red');
var cBlue = createColour(20, 50, 50, 'blue');
}
function createColour(size, x, y, colour) {
var rectangle = new Kinetic.Shape(function () {
var context = this.getContext();
context.beginPath();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.fillStyle = colour;
context.moveTo(x, y);
context.lineTo(x, y + size);
context.lineTo(x + size, y + size);
context.lineTo(x + size, y);
context.closePath();
context.fill();
context.stroke();
});
rectangle.addEventListener("click", function () {
cursor.color = colour;
addCursor();
});
stage.add(rectangle);
return rectangle;
}
function moveCursor() {
var mousePos = stage.getMousePos();
cursor.x = mousePos.x + 10;
cursor.y = mousePos.y + 10;
stage.draw();
}
function addCursor() {
stage.add(cursor);
moveCursor();
stage.addEventListener("mousemove", moveCursor, false);
}
function setupItem() {
if (item) {
if (item.length > 0) {
for (var n = 0; n < item.length; n++) {
stage.remove(item[n]);
}
}
}
/* set shape attributes */
<?php
//get shape info
$qShapeDetails = "SELECT * FROM shapeDefinitions ORDER BY shapeID ASC";
$rShapeDetails = mysql_query($qShapeDetails) or die('mysql has thrown an error: \n' . mysql_error());
while($shape = mysql_fetch_assoc($rShapeDetails))
{
?>
var shape<?php echo $shape['shapeID']; ?> = new Kinetic.Shape(function () {
var context = this.getContext();
context.beginPath();
context.lineWidth = <?php echo $shape['lineWidth']; ?>;
context.strokeStyle = '<?php echo $shape['strokeColour']; ?>';
context.fillStyle = shape<?php echo $shape['shapeID']; ?>.color;
<?php
$qLines = "SELECT * FROM linePos WHERE shapeID = '" . $shape['shapeID'] . "' ORDER BY lineID ASC";
$rLines = mysql_query($qLines) or die('mysql has thrown an error: \n' . mysql_error());
while($line = mysql_fetch_assoc($rLines))
{
if($line['lineID'] == 1)
{
?>
context.moveTo(<?php echo $line['posX']; ?>, <?php echo $line['posY']; ?>);
<?php
} else {
?>
context.lineTo(<?php echo $line['posX']; ?>, <?php echo $line['posY']; ?>);
<?php
}
}
?>
context.closePath();
context.fill();
context.stroke();
});
shape<?php echo $shape['shapeID']; ?>.color = 'white';
shape<?php echo $shape['shapeID']; ?>.addEventListener("click", function () {
shape<?php echo $shape['shapeID']; ?>.color = cursor.color;
stage.draw();
});
item.push(shape<?php echo $shape['shapeID']; ?>);
<?php
}
?>
for (var n = 0; n < item.length; n++) {
stage.add(item[n]);
}
stage.draw();
}
});</script>
</head>
<body onmousedown="return false;">
<div id="container" style="cursor:crosshair;">
</div>
</body>
</html>
SQL
SET FOREIGN_KEY_CHECKS=0;
-- ----------------------------
-- Table structure for `linepos`
-- ----------------------------
DROP TABLE IF EXISTS `linepos`;
CREATE TABLE `linepos` (
`lineID` int(11) NOT NULL AUTO_INCREMENT,
`shapeID` int(11) DEFAULT NULL,
`posX` float DEFAULT NULL,
`posY` float DEFAULT NULL,
PRIMARY KEY (`lineID`)
) ENGINE=InnoDB AUTO_INCREMENT=13 DEFAULT CHARSET=latin1;
-- ----------------------------
-- Records of linepos
-- ----------------------------
INSERT INTO `linepos` VALUES ('1', '1', '100', '10');
INSERT INTO `linepos` VALUES ('2', '1', '100', '30');
INSERT INTO `linepos` VALUES ('3', '1', '200', '30');
INSERT INTO `linepos` VALUES ('4', '1', '200', '10');
INSERT INTO `linepos` VALUES ('5', '2', '100', '30');
INSERT INTO `linepos` VALUES ('6', '2', '100', '60');
INSERT INTO `linepos` VALUES ('7', '2', '200', '60');
INSERT INTO `linepos` VALUES ('8', '2', '200', '30');
INSERT INTO `linepos` VALUES ('9', '3', '200', '20');
INSERT INTO `linepos` VALUES ('10', '3', '200', '60');
INSERT INTO `linepos` VALUES ('11', '3', '400', '60');
INSERT INTO `linepos` VALUES ('12', '3', '400', '20');
-- ----------------------------
-- Table structure for `shapedefinitions`
-- ----------------------------
DROP TABLE IF EXISTS `shapedefinitions`;
CREATE TABLE `shapedefinitions` (
`shapeID` int(11) NOT NULL AUTO_INCREMENT,
`lineWidth` float DEFAULT NULL,
`strokeColour` varchar(255) DEFAULT NULL,
`backGroundColour` varchar(255) DEFAULT NULL,
PRIMARY KEY (`shapeID`)
) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=latin1;
-- ----------------------------
-- Records of shapedefinitions
-- ----------------------------
INSERT INTO `shapedefinitions` VALUES ('1', '2', '#000', '#FFF');
INSERT INTO `shapedefinitions` VALUES ('2', '2', '#000', '#FFF');
INSERT INTO `shapedefinitions` VALUES ('3', '2', '#000', '#FFF');
それはあなたの方法であなたを取得する必要があります:)
wheresrhys に同意します。SVG は、あなたが望むものに対するより良いアプローチのようです。世の中にある SVG ライブラリの中でも、raphael は多くのことを可能にします。
ラファエルは、javascript/canvas インタラクションのデファクト スタンダードのようです (少なくとも私が働いているところです) 。
線/ポリゴンを描画/保存するための単純な構文（SVGパス文字列を使用）がありますhttp://raphaeljs.com/reference.html#Paper.path、それらを着色するためhttp://raphaeljs.com/reference.html#Element .attrおよびイベント処理http://raphaeljs.com/reference.html#Element.click。これにより、図面を SVG パスのカンマ区切りのリストとして保存し、カラーリングをコンマ区切りの値のリスト (画像を表示/色付けするときに配列に入れる) として保存し、各値が対応するようにすることができます。あなたの道の一つ」
ラパヘルのドキュメントは、API が最近大幅に成長したため、少し気が遠くなるようなものです (古い API をよく知っていたとしても) どこで何を探すべきかについての指示はあまりありませんが、ホームページのデモは非常に便利ですAPI を理解するため。