Question

I have the following Javascript, HTML and CSS code

function distanceBetween(point1, point2) {
    return Math.sqrt(Math.pow(point2.x - point1.x, 2) + Math.pow(point2.y - point1.y, 2));
}

function angleBetween(point1, point2) {
    return Math.atan2(point2.x - point1.x, point2.y - point1.y);
}

function draw() {
    var img = new Image();
    img.src =  http://www.tricedesigns.com/wp-content/uploads/2012/01/brush2.png ;

    var el = document.getElementById( DrawingPattern );
    var ctx = el.getContext( 2d );
    ctx.lineJoin = ctx.lineCap =  round ;

    var isDrawing, lastPoint;

    el.onmousedown = function (e) {
        isDrawing = true;
        lastPoint = {x: e.clientX, y: e.clientY};
    };

    el.onmousemove = function (e) {
        if (!isDrawing) return;

        var currentPoint = {x: e.clientX, y: e.clientY};
        var dist = distanceBetween(lastPoint, currentPoint);
        var angle = angleBetween(lastPoint, currentPoint);

        for (var i = 0; i < dist; i++) {
            x = lastPoint.x + (Math.sin(angle) * i) - 25;
            y = lastPoint.y + (Math.cos(angle) * i) - 25;
            ctx.drawImage(img, x, y);
        }

        lastPoint = currentPoint;
    };

    el.onmouseup = function () {
        isDrawing = false;
    };
}

html, body {
    color: #fff;
    background: #000;
    font-family: "Lucida Grande";
}

canvas{
    position: static;
    cursor: move;
    margin: auto;
    width: 70%;
    border: 3px solid #73AD21;
    background: white;
    overflow: visible;
}

<body onload=draw()>
<canvas width="1024" height="649" id="DrawingPattern">
<!-- add fallback content-->
</canvas>
</body>

整个法典是我开始利用信道时唯一的问题, cur子与 cur的有效立场一致。因此,当我引领另一个职位时,越高或低于 cur的实际位置。我尝试了不同的方法,但我猜测是某种规模缩小的问题,但我无法解决问题。

Answer 1

这是一个不断扩大的问题。尽管你通过按百分率确定CSS的宽度来扩大信道,但绘画区的规模并没有变化。你在屏蔽空间上获得了烟雾坐标,但是,在绘画时,你需要把烟雾变成空洞。

为此,考虑到<代码>el.width之间的差额,计算比额表。 (canvas width) and el.offsetWidth (element width). 由于通过保持对面的比例来按比例扩大血管,X坐标和Y坐标可以采用同样的比例。

我添加了<代码>elementScale(>功能,并更新了该代码,以乘以clientX和。





function distanceBetween(point1, point2) {
    return Math.sqrt(Math.pow(point2.x - point1.x, 2) + Math.pow(point2.y - point1.y, 2));
}

function angleBetween(point1, point2) {
    return Math.atan2(point2.x - point1.x, point2.y - point1.y);
}

function elementScale(el) {
    return el.offsetWidth === 0 ? 0 : (el.width / el.offsetWidth);
}

function draw() {
    var img = new Image();
    img.src =  http://www.tricedesigns.com/wp-content/uploads/2012/01/brush2.png ;

    var el = document.getElementById( DrawingPattern );
    var ctx = el.getContext( 2d );
    ctx.lineJoin = ctx.lineCap =  round ;

    var isDrawing, lastPoint;

    el.onmousedown = function (e) {
        var scale = elementScale(el);
        isDrawing = true;
        lastPoint = {x: e.clientX * scale, y: e.clientY * scale};
    };

    el.onmousemove = function (e) {
        if (!isDrawing) return;

        var scale = elementScale(el);
        var currentPoint = {x: e.clientX * scale, y: e.clientY * scale};
        var dist = distanceBetween(lastPoint, currentPoint);
        var angle = angleBetween(lastPoint, currentPoint);

        for (var i = 0; i < dist; i++) {
            x = lastPoint.x + (Math.sin(angle) * i) - 25;
            y = lastPoint.y + (Math.cos(angle) * i) - 25;
            ctx.drawImage(img, x, y);
        }

        lastPoint = currentPoint;
    };

    el.onmouseup = function () {
        isDrawing = false;
    };
}
html, body {
    color: #fff;
    background: #000;
    font-family: "Lucida Grande";
}

canvas{
    position: static;
    cursor: move;
    margin: auto;
    width: 70%;
    border: 3px solid #73AD21;
    background: white;
    overflow: visible;
}
<body onload=draw()>
<canvas width="1024" height="649" id="DrawingPattern">
<!-- add fallback content-->
</canvas>
</body>

Answer 2

Just like DarthJDG said, it s a scaling problem with your CSS

你们只能去掉你们的安全感:70%的人在你们的血管上,试图像往常一样进行调整。

<>CSS CODE

    html, body {
        color: #fff;
        background: #000;
        font-family: "Lucida Grande";
    }

    canvas{
        position: static;
        cursor: move;
        margin: auto;
        //width:70%; //REMOVED
        border: 3px solid #73AD21;
        background: white;
        overflow: visible;
    }

<><>JAVASCRIPT CODE>/strong>

for (var i = 0; i < dist; i++) {
    x = lastPoint.x + (Math.sin(angle) * i) - 25; //CHANGED
    y = lastPoint.y + (Math.cos(angle) * i) - 25; //CHANGED
    ctx.drawImage(img, x, y);
}

仅仅通过取消社会保障局的宽度,你的扩大将再次正常。

Answer 3

我会问这个问题(当我使用原木图时, cur子不会被点燃,因此,当我把它引出另一个位置时,我会坐在一个服务器上,而我们却想:昨天,它只是做的是罚款,现在,而是对它正常工作的其他参与者。任何人都知道为什么会?

友情链接