Question

我有一个网络设计工具，可以单击并拖动图像到div，也可以在div上绘制线条。我使用raphael.js库来绘制div。

绘图时：

当我点击下载按钮时：

如您所见，这些线未被保存。

代码：

HTML

<!--The button-->
<div id="menu2">
    <span style="color:white; margin-bottom:-20px; z-index:3; font-family:Montserrat; font-size:11px; margin-top: 5px; position:absolute; margin-left:5px;">Download</span>

    <div id="menu_button2" class="btnSave" onClick="btn()"
         style="margin-left:5px; width:65%; height:8%; margin-top:20px; border-radius:7px;">
        <img style="margin-left:12px; margin-top:9px;" src="image/save-file.png" title="Save" width="55%"/>
    </div>
</div>

<!--The div-->
<div class="col" id="droppable" style="background-color: white;">
</div>

JQuery功能

function btn() {
            html2canvas($("#droppable"), {
                onrendered: function (div) {
                    // canvas is the final rendered <canvas> element
                    var myImage = div.toDataURL("image/png");
                    window.open(myImage);
                }
            });
        }

raphael.js功能

$(document).ready(function () {
            $('input[type="checkbox"][name="check"]').change(function() {
                // proceed only when checked
                if(this.checked) {
                    drawLine();
                }
            });
        });

        function drawLine() {

            var linewidth = $("#width" ).val();
            var color = $("#background").val();

            function Line(startX, startY, endX, endY, raphael) {
                var start = {
                    x: startX,
                    y: startY
                };
                var end = {
                    x: endX,
                    y: endY
                };
                var getPath = function () {
                    return "M" + start.x + " " + start.y + " L" + end.x + " " + end.y;
                };


                var redraw = function () {
                    node.attr("path", getPath());
                }

                var node = raphael.path(getPath());

                node.attr("stroke-width", linewidth); //sets the width of the line
                node.attr("stroke", color);

                //sets the color of the line

                return {
                    updateStart: function (x, y) {
                        start.x = x;
                        start.y = y;
                        redraw();
                        return this;
                    },
                    updateEnd: function (x, y) {
                        end.x = x;
                        end.y = y;
                        redraw();
                        return this;
                    }
                };
            };


            $(document).ready(function () {
                var paper = Raphael("droppable", 1280, 470, 0, 0);
                $("#droppable").mousedown(
                        function (e) {
                            x = e.offsetX;
                            y = e.offsetY;
                            line = Line(x, y, x, y, paper);
                            $("#droppable").bind('mousemove', function (e) {
                                x = e.offsetX;
                                y = e.offsetY;
                                line.updateEnd(x, y);
                            });

                        });

                $("#droppable").mouseup(
                        function (e) {
                            $("#droppable").unbind('mousemove');
                        });
            });
        }

知道为什么会这样吗？任何见解将不胜感激。感谢。

Answer 1

Raphael仅用于绘制矢量图形，而canvas只能包含光栅图形。用Raphael绘制的线条不会出现在画布上，因此不会使用Intent intent = new Intent(Intent.ACTION_GET_CONTENT); intent.setType("image/*"); intent.addCategory(Intent.CATEGORY_OPENABLE); if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR2) { intent.putExtra(Intent.EXTRA_ALLOW_MULTIPLE, true); } startActivityForResult(intent, SELECTED_PICTURE);方法保存。

如果输出格式为PNG，则应使用库在画布上进行特殊绘制。我的建议是Fabric.js，因为所有图形对象都存储为对象。

用raphael.js绘制的线没有保存到png

1 个答案: