Question

有没有人对如何在页面上进行文字书写有任何想法，比如用户可以在演示文稿上写的PowerPoint？我知道放置div 1px square可以完成这项工作，但是认为这可能导致代码混乱（以及很多代码！）

提前感谢任何想法。

编辑：我不能使用canvas，因为项目的其余部分将不支持它，除非某些画布可以透明并且放置比文档的其余部分更高的zIndex。

Answer 1

你可以看看canvas或svg。那将完成这项工作。

Answer 2

如果您想在网页上书写，可以使用属性contenteditable="true"

Reference

Answer 3

这就是我要做的事情：

http://jsfiddle.net/DerekL/DqZX8/

function drawingArea(ele) {
    var width = ele.scrollWidth,
        height = ele.scrollHeight,
        area = $("<svg>").attr({
            width: width,
            height: height,
            class: "draw"
        }).appendTo(ele),
        tracking = false;

    var mDown = false,
        id, line;

    $(window).mousedown(function (e) {
        if (tracking) {
            mDown = true;
            id = Date.now();
            line = $("<path>").appendTo(area).attr({
                d: [
                    "M",
                    e.clientX + ele.scrollLeft,
                    e.clientY + ele.scrollTop
                ].join(" "),
                id: id
            });
        }
    }).mousemove(function (e) {
        if (mDown) {
            line.attr({
                d: line.attr("d") + " " + [
                    "L",
                    e.clientX + ele.scrollLeft,
                    e.clientY + ele.scrollTop
                ].join(" ")
            });
            area[0].outerHTML = area[0].outerHTML;
            area = $("svg");
            line = area.find("#" + id);
            e.preventDefault();
            return false;
        }
    }).mouseup(function () {
        mDown = false;
    });

    return {
        area: area,
        startTrack: function () {
            tracking = true;
        },
        stopTrack: function () {
            tracking = false;
        },
        get isTracking() {
            return tracking;
        }
    };
}

var pad = new drawingArea(document.body);
pad.startTrack();

字面上“写”在页面上

3 个答案: