28

現在、私は友人のために小さなアプリケーションを作成しています。友人は博士号を取得し始めており、ネットワークグラフを作成する必要があります。これまでのところ、力指向グラフを使用するとすべてが正常に機能します。グラフノードを移動して、レイアウトのスタイルを設定できます。

私が頭を動かすことができないのは：

»キャンバスからデータを抽出してSVGファイルに保存する方法«。

私が試したこと：

私はすでにコンソールから画像データにアクセスしようとしました

var app.canvas = document.getElementById( 'graph-canvas' )
    .getContext( '2d' )
        .getImageData( 0, 0, 200, 200 );

(object) ImageDataそして見返りを得た。これで、↑表示されたキャンバスデータに。でアクセスできますapp.canvas.data。（値を調べすぎると、ブラウザーがハングし始め、スクリプトを停止するかどうかを尋ねられます-ChromeとFFが最新です）。

ここからSVGを描画し、ボタンをクリックして保存するにはどうすればよいですか？

編集：

image/pngこれまでのところ、SVGを描画して要素を追加する方法を見つけました。ただし、表示されません。

// Add the test SVG el:
var svg = document.createElementNS( "http://www.w3.org/2000/svg", "svg" );
svg.setAttribute( 'style', 'border: 1px solid black;' )
        .setAttribute( 'width', '600' )
        .setAttribute( 'height', '400' )
        .setAttributeNS(
            'http://www.w3.org/2000/xmlns/',
            'xmlns:xlink',
            'http://www.w3.org/1999/xlink'
        );

// Call
importCanvas( document.getElementById( 'infovis-canvas' ), svg ); 

// Function: Add data to SVG
function importCanvas( sourceCanvas, targetSVG ) 
{
    // get base64 encoded png data url from Canvas
    var img_dataurl = sourceCanvas.toDataURL( "image/png" );

    var svg_img = document.createElementNS(
        "http://www.w3.org/2000/svg",
        "image"
    );

    svg_img.setAttributeNS(
        'http://www.w3.org/1999/xlink',
        'xlink:href',
        img_dataurl
    );
    jQuery( targetSVG.appendChild( svg_img ) )
        .appendTo( '#graph-container' );

    console.log( 'done' ); // Log & confirm
}

そして最後に...

// ...resulting SVG element containing the image element
<svg style="border: 1px solid black;" width="600" height="400" xlink="http://www.w3.org/1999/xlink"><image href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABQAAA(...)

UIはjQueryUI、jQuery、およびJit / InfoVIZライブラリと連携するため、これらを使用できます。

4

2 に答える 2

14

ラスターではなくベクター グラフィックとして保存する場合は、canvas API 操作を svg に変換するライブラリのいずれかを試すことができます。

SVGKitの場合:

var svgkitContext = new SVGCanvas(150,150);

function draw(ctx) {
   // ... normal canvas drawing commands go here ...
}

// draw to SVGKit canvas (svg) instead of canvasElement.getContext("2d")
draw(svgkitContext);

上記の完全な実行例。

canvas-svg の場合:

var canvasSVGContext = new CanvasSVG.Deferred();
canvasSVGContext.wrapCanvas(document.querySelector("canvas"));
var canvasContext = document.querySelector("canvas").getContext("2d");

function draw(ctx) {
    // ... normal canvas drawing commands go here ...
}

// draw to html5 canvas and record as svg at the same time
draw(canvasContext);

// append the svg result
var svg = document.appendChild(canvasContext.getSVG());

上記の完全な実行例。

代わりに svg を生成するには:

別のオプションはもちろん、最初にグラフを svg として作成することです。d3.jsは、これを簡単に実行できるようにする JavaScript ライブラリです。たとえば、この強制有向グラフの例を参照してください。

于 2012-04-23T06:37:40.017 に答える
8

運が悪いことに制限されている場合ImageData、それは単なるピクセル配列であるためです（リファレンスを参照）。そこから意味のあるSVG画像を取得することはできません。あなたはおそらく表現をやってのけることができ.pngます...しかしそれは相互作用のない静止画像です。

ある種のキャンバスをSVGにエクスポートする場合は、キャンバスの描画をどのように行うかが重要です。最良のアプローチは、キャ​​ンバスシーングラフを維持するライブラリを使用することです。

Fabric.jsは良い選択のようです。キャンバスを使用して描画を行ってから、呼び出しcanvas.toSVG()てsvgイメージを取得できます。

于 2012-04-23T15:42:49.797 に答える