Javascript HTML5适合画布的中心内容_Javascript_Html_Canvas

Javascript HTML5适合画布的中心内容

javascript html canvas

Javascript HTML5适合画布的中心内容,javascript,html,canvas,Javascript,Html,Canvas,我想创建一个画布，自动适合和自动中心的形状绘制在它我有： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Fit Canvas Content</title> </head> <body> <canvas id="myCanvas" width="500" height

我想创建一个画布，自动适合和自动中心的形状绘制在它

我有：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />

    <title>Fit Canvas Content</title>

</head>

<body>
    <canvas id="myCanvas" width="500" height="500" style="border:1px solid #000000;">
        Your browser doesn't support the HTML5 canvas.
    </canvas>
    <script>
        var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");
        ctx.fillStyle = "black";
        ctx.fillRect(-5, -50, 10, 100);
        ctx.fillRect(-50, -5, 100, 10);
    </script>
</body>
</html>


适合画布内容
您的浏览器不支持HTML5画布。
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
ctx.fillStyle=“黑色”；
ctx.fillRect（-5，-50,10100）；
ctx.fillRect（-50，-5100,10）；

请记住，画布内容是动态的，形状可以在任何位置，也可以有任何大小

我想你想要这样的东西：

以下是用于绘制包含JSDoc的plus的函数：

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "black";
drawPlus(20, c);

/**
 * Draws plus in the middle of the canvas with specified width
 *
 * @public
 * @param {number} plusWidth The width of the plus
 * @param {canvas} canvas The canvas on which the plus should be drawn
 */
function drawPlus(plusWidth, canvas) {
    var height = parseInt(canvas.height),
        width = parseInt(canvas.width),
        size = Math.min(height, width);
    ctx.fillRect((width - plusWidth) / 2, (height - size) / 2, plusWidth, size);
    ctx.fillRect((width - size) / 2, (height - plusWidth) / 2, size, plusWidth);
}

这将适合并缩放到画布。注意，没有填充，但很容易添加

首先，您需要设置一些东西来跟踪变换

this.trackTransforms = function (ctx) {
    var svg = document.createElementNS("http://www.w3.org/2000/svg", 'svg');
    var xform = svg.createSVGMatrix();
    ctx.getTransform = function () { return xform; };

    var savedTransforms = [];
    var save = ctx.save;

    ctx.save = function () {
        savedTransforms.push(xform.translate(0, 0));
        return save.call(ctx);
    };

    var restore = ctx.restore;
    ctx.restore = function () {
        xform = savedTransforms.pop();
        return restore.call(ctx);
    };

    var scale = ctx.scale;
    ctx.scale = function (sx, sy) {
        xform = xform.scaleNonUniform(sx, sy);
        return scale.call(ctx, sx, sy);
    };

    var rotate = ctx.rotate;
    ctx.rotate = function (radians) {
        xform = xform.rotate(radians * 180 / Math.PI);
        return rotate.call(ctx, radians);
    };

    var translate = ctx.translate;
    ctx.translate = function (dx, dy) {
        xform = xform.translate(dx, dy);
        return translate.call(ctx, dx, dy);
    };

    var transform = ctx.transform;
    ctx.transform = function (a, b, c, d, e, f) {
        var m2 = svg.createSVGMatrix();
        m2.a = a; m2.b = b; m2.c = c; m2.d = d; m2.e = e; m2.f = f;
        xform = xform.multiply(m2);
        return transform.call(ctx, a, b, c, d, e, f);
    };

    var setTransform = ctx.setTransform;
    ctx.setTransform = function (a, b, c, d, e, f) {
        xform.a = a;
        xform.b = b;
        xform.c = c;
        xform.d = d;
        xform.e = e;
        xform.f = f;
        return setTransform.call(ctx, a, b, c, d, e, f);
    };

    var pt = svg.createSVGPoint();
    ctx.transformedPoint = function (x, y) {
        pt.x = x; pt.y = y;
        return pt.matrixTransform(xform.inverse());
    }
}

下一步，你需要能够实际适应的内容。我的函数假设您知道内容的绝对宽度和高度，您必须自己计算出来，但应该相当简单。请注意，如果某个值从-150开始到+150，则其宽度为300

this.fitToContents = function (widthOfContents, heightOfContents) {

    var p1 = this.context.transformedPoint(0, 0);
    var p2 = this.context.transformedPoint(this.canvas.width, this.canvas.height);

    var centerX = (p2.x - p1.x) / 2;
    var centerY = (p2.y - p1.y) / 2;

    centerX -= widthOfContents / 2;
    centerY -= heightOfContents / 2;

    this.context.translate(centerX, centerY);

    var lastX = this.canvas.width / 2,
        lastY = this.canvas.height / 2;

    var scaleFactorX = this.canvas.width / widthOfContents;
    var scaleFactorY = this.canvas.height / heightOfContents;

    var scaleFactorToUse = Math.abs(scaleFactorX) < Math.abs(scaleFactorY) ? scaleFactorX : scaleFactorY;

    var pt = this.context.transformedPoint(lastX, lastY);
    this.context.translate(pt.x, pt.y);
    this.context.scale(scaleFactorToUse, scaleFactorToUse);
    this.context.translate(-pt.x, -pt.y);
}

也许我应该更清楚，但这不是我想要实现的。我可能不该举这个例子。我重新表述了我的问题，以便更清楚地表明我希望它适用于具有动态内容的画布。我试着做的更像这样：但比起在画布上，也许你是对的，没有简单的方法可以做到这一点。然后，我确实应该找到画布内容的边界，以找到一个缩放因子。我希望有一些现有的代码/库能够做到这一点。我只是不能理解确切的问题。你能告诉我你想要完成什么，我会考虑更通用的解决方案吗？是的，我明白。你需要缩放和平移。这里有更多的信息，

this.init = function (elementId) {
    this.canvas = document.getElementById(elementId);
    this.context = this.canvas.getContext('2d');

    this.trackTransforms(this.context);

    this.context.canvas.width = this.canvas.offsetWidth;
    this.context.canvas.height = this.canvas.offsetHeight;

    this.draw();
}

this.draw = function () {

    this.fitToContents(300,300);

    // you can now draw other stuff
    // you can probably only fit to contents once, 
    // in the init function, if their positions don't change
    this.drawStuff();
}