3

キャンバスを使って形を作っています。これらの形状はドラッグ可能です。図形の場所を保存して、ページに戻ったときに図形をドラッグした場所と同じ場所に保存するにはどうすればよいですか?

4

4 に答える 4

2

ローカルストレージ

最も簡単な解決策は、Web Storage (localStorage / sessionStorage) を使用することです。

これを機能させるには、シリアル化可能なオブジェクトを使用して形状情報を格納します。次に例を示します。

var myShapeStack = []; //all objects here

function myShape(x, y, width, height) {
    this.type = 'rectangle';
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
    //...
    return this;
}

//...
//get the coords from drawing, then
var shape1 = new shape1(x, y, w, h);
myShapeStack.push(shape1);

これで、Web Storage を使用してスタック全体を保存できます。

localStorage.setItem('shapes', JSON.stringify(myShapeStack);

次回ロードして初期化するとき：

myShapeStack = localStorage.getItem('shapes');
myShapeStack = (myShapeStack !== null) ? JSON.parse(myShapeStack) : [];

後で削除する場合:

localStorage.removeItem('shapes');

または総当たり攻撃：

localStorage.clear();

ブラウザーがキャンバスをネイティブにサポートしている場合、Web Storage も備えている可能性が高くなります。

于 2013-06-21T20:35:24.757 に答える
0

ユースケースによっては、シェイプ メタデータをクライアント側の Cookie、サーバー側のセッション変数に保存できます。または、サーバー上のデータベースに永続化します。

于 2013-06-21T20:04:11.773 に答える
0

jCanvasとデータベース バックエンド。

@ K3N localStorage への保存について詳しく説明してくれました。

これは、ドラッグされたオブジェクトをデータベースに保存するために使用している簡単な例です。

いくつかのこと：

  1. jCanvasを使用して、 とのやり取りを抽象化し、クリーンアップしていcanvasます。それは信じられないです。より優れたインターフェイスを提供するだけでなく、 で得られるものにいくつかの優れた機能を追加しますcanvas。

    これは、 jQueryを使用していることも意味します。

  2. Rails バックエンドを使用して、位置をデータベースのレコードに保存しています。

これを機能させるための基本的なコードは次のとおりです。

$('canvas').drawRect({
  layer: true,
  name: 'myRect-1',
  draggable: true,
  fillStyle: '#6c1',
  x: 100, y: 100,
  width: 100, height: 100,
  
  dragstop: function(layer) {      
    var path = '/objects/1/';
    
    var payload = { id: 1, x: layer.x, y: layer.y };
    
    $.post( path, { _method: 'PUT', payload } );
  }
});

ドラッグ操作とコードのサンドボックスは次のとおりです。

サンボックス

このインタラクションを停止し、位置データを AJAX 経由でバックエンドに送信したら、バックエンドを更新して、送信されるデータを処理し、オブジェクトの位置を格納するレコードを更新する必要があります。

それが役立つことを願っています。

JP

于 2015-06-10T20:09:15.740 に答える