0

svg-editを ASP.NET MVC プロジェクトに統合しようとしています。始める方法についての推奨事項やチュートリアルを持っている人はいますか?

ありがとうございました。

4

3 に答える 3

0

次に、このモジュールに、sequal サーバーからデータを開くビュー モードを追加する予定です。モードが管理者の場合、ユーザーは既存のデータを編集できます。この投稿を更新し続けます。

1- 1 つの方法は、クライアント側からツールを削除することですが、css が a を調整しないという事実である特定の制限があります。

function RemoveTools() {

    var frame = document.getElementsByClassName("iFrameHtmlTag")[0];
    doc = frame.contentWindow.document;
   
    if (doc != null) {
        var Tools = [
            'tools_top', 'tools_left', 'tools_bottom', 'sidepanels', 'main_icon', 'rulers', 'sidepanels', 'canvashadow'];
        for (i=0; i<Tools.length;i++)
        {
        doc.getElementById(Tools[i]).style.display = "none";
        }
   } else
        alert("Doc was null");
};

$(document).ready(function () {
$("#hide").click(function () {
    RemoveTools();
});

});

これは効果的な方法ですが、ウィンドウのサイズを再調整するためのパラメーターをほとんど使用せずにオブジェクトを表示するためのより良い方法があるはずです。私もその話題を続けます。

于 2015-01-27T17:31:43.360 に答える
0

ここでは、モジュールの保存関数と読み込み関数の準備ができています。アルゴリズムを完成させるためにやるべきことはたくさんありますが、これはモジュールを環境に統合する可能性を理解するための単なるテスト プロジェクトだったので、コミュニティと知識を共有することを理解するための努力:

これが私のcshtmlファイルです：

@Scripts.Render("~/bundles/KSage")
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<header>
</header>
<input id="LoadSVG" type="button" value="LoadSVG"  />
<input id="CloseSVG" type="button" value="CloseSVG" />
<input id="save" type="button" value="save" onclick="save()">
<input id="Add" type="button" value="AddNewTag!" onclick="AddNewElemnt()" />
<input id="LoadExample" type="button" value ="LoadExample" onclick="LoadExample()"/>
<body id ="mainBody">
    <p id="svg"></p>
    <p id="DivData"></p>
    <p id="TestId"></p>
    <p id="SavedData"></p>
</body>
</html>

js ファイルは次のとおりです。

document.write("<script type='text/javascript' src='~/Scripts/svg-edit/embedapi.js'></script>");
document.write("<script src='~/Scripts/jquery-1.10.2.js'></script>");

$(document).ready(function () {
        // jquery selectro

    $("#LoadSVG").click(function () {
      
            $("#svg").append($('<iframe src="/Scripts/svg-edit/svg-editor.html" width="900px" height="600px" id="svgedit"></iframe>'));
        });

    });

$(document).ready(function () {
    // jquery selectro

    $("#save1").click(function () {
        $("#DivData").append("<b>Appended text</b>");
    });

});

$(document).ready(function(){
        $("#CloseSVG").click(function () {
            $("#svg").hide();
        });
    });

function HandleSvgData(data,error) {
    if (error) {
        alert('Error:' + error);
    } else {
        $('#DivData').append(data);
        alert(data);
    }
}

function handleSvgData(data, error) {
    alert("handling Data");
    if (error) {
        alert('error ' + error);
    } else {
        alert('Congratulations. Your SVG string is back in the host page, do with it what you will\n\n' + data);
    }
}




function save1() {
    alert("saving");
   // svgCanvas.getSvgString()(handleSvgData);
    $("#svgedit").append($('This is the test classed appended after DivDat'));
}

function AddNewElemnt()
{
    var newElement = document.createElement("Test");
    var newNode = document.createTextNode("This is my new node!");
    newElement.appendChild(newNode);

    var referenceElement = document.getElementById("mainBody");
 
    var tagInsert = document.getElementById("TestId");
    referenceElement.insertBefore(newElement, tagInsert);
   // alert("added");

}

function Postt(data) {
    

}

function Post(data) {
    var mainBody = document.getElementById("mainBody");
    var SvgDataId = prompt("give me primary id");
    var SvgUser = prompt("give me UserName");
    var form = document.createElement("form");
    form.setAttribute("id", "PostData");
    form.setAttribute("action", "/SvgDatas/Create");
    form.setAttribute("method", "post");
    mainBody.appendChild(form);
    var PostData = document.getElementById("PostData");
    var InputSvgDataId = document.createElement("input");
    InputSvgDataId.setAttribute("name", "SvgDataId");
    InputSvgDataId.setAttribute("value", SvgDataId);
    PostData.appendChild(InputSvgDataId);
    var InputSvgUser = document.createElement("input");
    InputSvgUser.setAttribute("name", "SvgUser");
    InputSvgUser.setAttribute("value", SvgUser);
    PostData.appendChild(InputSvgUser);
    var InputData = document.createElement("input");
    InputData.setAttribute("name", "Data");
    InputData.setAttribute("value", data);
    PostData.appendChild(InputData);
    form.submit();

}






function save() {


    var doc, mainButton,
    frame = document.getElementById('svgedit');
    svgCanvas = new EmbeddedSVGEdit(frame);
    // Hide main button, as we will be controlling new, load, save, etc. from the host document
    doc = frame.contentDocument || frame.contentWindow.document;
    mainButton = doc.getElementById('main_button');
    mainButton.style.display = 'none';

// get data
    svgCanvas.getSvgString()(function handleSvgData(data, error) {
        if (error) {
            alert('error ' + error);
        } else {
            alert('Congratulations. Your SVG string is back in the host page, do with it what you will\n\n' + data);
            Post(data);
        }
    });
}

/*
function BuidUrl(SVGUser) {
    var uri = prompt("Give me url where the serach function lives, if empty then I will use Razor syntax to call within MVC architescture");
        if (uri)
            return uri;
        else {
            var urlHelper = ('http://localhost:53546/SvgDatas/Search?id='+SVGUser);
            return urlHelper;
        }
    }
*/


function returnedData_IntializeEditor(data, status) {

    if ((data != null) && (status == "success")) {
        var frame = document.getElementById('svgedit');
        svgCanvas = new EmbeddedSVGEdit(frame);
        doc = frame.contentDocument || frame.contentWindow.document;
        mainButton = doc.getElementById('main_button');
        tool_Bottum = doc.getElementById("#tool_button");
        
        mainButton.style.display = 'none';
        // Open Data into the frame
        // var svgexample = '<svg width="640" height="480" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><g><title>Layer 1<\/title><rect stroke-width="5" stroke="#000000" fill="#FF0000" id="svg_1" height="35" width="51" y="35" x="32"/><ellipse ry="15" rx="24" stroke-width="5" stroke="#000000" fill="#0000ff" id="svg_2" cy="60" cx="66"/><\/g><\/svg>';
        svgCanvas.setSvgString(data.Data);
    } else {
        $("#svg").append("<li>There is not such a data available in the database!</li>");

    }

}

function LoadExample() {
    var SVGUser = prompt("Enter the SVG ID");
    $.getJSON("http://localhost:53546/SvgDatas/Search?id=" + SVGUser, returnedData_IntializeEditor );
}

これはモデルです：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace IntegrationOfSVG.Models
{
    public class SvgData
    {
        public string SvgDataId { get; set; }
        public string SvgUser { get; set; }
        public string Data { get; set; }
    }

   }

すばらしいツールを提供してくれた SVG-EDIT コミュニティに感謝します。

于 2015-01-26T23:52:19.733 に答える
0

私は自分の質問に答えています。調査の結果、SVG-EDIT ライブラリ全体を mvc アーキテクチャにデプロイし、埋め込み API を次のように変更することをお勧めします。

これは、埋め込み API を呼び出して部分ビュー内の iframe に配置する部分ビューと JS ファイルです。

document.write("<script type='text/javascript' src='~/Scripts/svg-edit/embedapi.js'></script>");
// Make sure to add the embedapi into the html file, becuase the intialization function runs actually in that file, all this call does is basically to take the iframe from html and inialize the api within that tag. 

$(document).ready(function () {
        // jquery selectro

    $("#LoadSVG").click(function () {
      
            $("#svg").append($('<iframe src="/Scripts/svg-edit/svg-editor.html" width="900px" height="600px" id="svgedit"></iframe>'));
        });

    });
@Scripts.Render("~/bundles/KSage")
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<header>
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    
</header>
<input id="LoadSVG" type="button" value="LoadSVG"  />
<input id="CloseSVG" type="button" value="CloseSVG" />
<input id="save" type="button" value="save" onclick="save()">
<input id="Add" type="button" value="AddNewTag!" onclick="AddNewElemnt()" />
    <input id="LoadExample" type="button" value ="LoadExample" onclick="LoadExample()"/>
<body id ="mainBody">
    <p id="svg"></p>
    <p id="DivData"></p>
    <p id="TestId"></p>
    <p id="SavedData"></p>

</body>




</html>

于 2015-01-26T17:41:52.800 に答える