我正在尝试将通过 KonvasJS 动态添加到画布的图像直接居中。

这是小提琴:

http://jsfiddle.net/71Lw0bk8/7/

我已经找到了代码,但它没有使用 Konva,这是在没有库的情况下尝试这样做,并且它运行良好。

function addImage(imgUrl) {

    const img = new Image();

    img.onload = function () {
        var padding = 20;
        while (img.width + padding > canvas.width || img.height + padding > canvas.height) {
            if (img.width + padding > canvas.width) {
                let newWidth = canvas.width - (padding * 2);
                img.height = Math.round((img.height / img.width) * newWidth);
                img.width = newWidth;
            }
            else if (img.height + padding > canvas.height) {
                let newHeight = canvas.height - (padding * 2);
                img.width = Math.round((img.width / img.height) * newHeight);
                img.height = newHeight;
            }
        }
        ctx.drawImage(img, canvas.width / 2 - img.width / 2, canvas.height / 2 - img.height / 2, img.width, img.height);
    };
    img.src = imgUrl;
}

我只是不确定如何将其转换为此处:

var uploadedImage = new Konva.Image({
    x: stage.getWidth() / 2,
    y: stage.getHeight() / 2,
    width: 200,
    height: 200,
    ...

我该怎么做呢?

#1楼 票数:3 已采纳

该技术与普通 JS 相同。 使用 JS 图像的 onload 事件来决定你想要显示什么以及什么尺寸等。一旦所有这些完成,居中的工作就是一个非常标准的矩形逻辑。 请参阅下面的 centerRectShape() 函数。

编辑:添加了更多动态图像大小以丰富片段。

编辑:更改了先前移动的图像源。

 // the x,y position of a rect shape is in fact the top left corner, so to // correcty centre we should consider width and height in the mix. // Konva.Rect and Konva.Image shapes both have x, y being topleft. function centreRectShape(shape){ shape.x( ( stage.getWidth() - shape.getWidth() ) / 2); shape.y( ( stage.getHeight() - shape.getHeight() ) / 2); } // Set up the stage var stage = new Konva.Stage({ container: 'canvas-container', width: 650, height: 300 }); // We draw on layers so create one var layer = new Konva.Layer(); stage.add(layer); var bgRect = new Konva.Rect({width: stage.getWidth(), height: stage.getHeight(), fill: 'gold', opacity: 0.1}); layer.add(bgRect); // we will be uploading an image so make somewhere for it to be displayed later var uploadedImage = new Konva.Image({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, width: 200, height: 200, stroke: 'red', strokeWidth: 10, draggable: false }); // Always have to add shapes to a layer. layer.add(uploadedImage); // use a standard plain old JS image to do the pull of the image from src imgObj = new Image(); // we harness the onload event to know when to update the canvas image imgObj.onload = function() { uploadedImage.image(imgObj); // give the image to the cannvas image object. // since this is a dynamic image upload we want to resize the canvas image object to get // a pleasing effect. var padding = 20; var w = imgObj.width; var h = imgObj.height; // get the aperture we need to fit by taking padding off the stage size. var targetW = stage.getWidth() - (2 * padding); var targetH = stage.getHeight() - (2 * padding); // compute the ratios of image dimensions to aperture dimensions var widthFit = targetW / w; var heightFit = targetH / h; // compute a scale for best fit and apply it var scale = (widthFit > heightFit) ? heightFit : widthFit ; w = parseInt(w * scale, 10); h = parseInt(h * scale, 10); uploadedImage.size({ width: w, height: h }); // Finally position the canvas image object centered. centreRectShape(uploadedImage); layer.draw(); // My favourite thing to forget. } // to start the image load give the object a new src. imgObj.src = 'https://via.placeholder.com/600x280/0000FF/FFFFFF.png?text=Wombats are awsome';
 html, * { margin: 0; padding: 0; } body { background: #eee; } #canvas-container { background: #fff; border-radius: 3px; border: 1px solid #d8d8d8; width: 650px; margin: 0 auto; margin-top: 20px; box-shadow: 0 3px 5px rgba(0, 0, 0, .2); } .stickers { padding: 10px 5px; } .stickers > img { margin-right: 10px; }
 <script src="https://cdnjs.cloudflare.com/ajax/libs/konva/2.4.1/konva.min.js"></script> <div id="canvas-container"></div>

  ask by kinx translate from so

未解决问题?本站智能推荐:

1回复

Konva从点击事件中获取图像ID

我正在尝试使用以下代码获取我单击的图像的 ID: 康瓦代码是这样的: 如您所见,我在制作图像时有id: 'IDofImg',但似乎没有输出所需的 ID。 当点击它时,它当前输出: 我错过了什么? 在这里摆弄
1回复

使用node.destroy()时如何删除konva形状/图像

在使用 konva 时,我使用一个按钮将一个形状多次添加到我的舞台上,使用类似于 这会附加一个矩形形状,如果多次单击它还会附加额外的形状我想为用户提供删除他希望用按钮删除的特定形状的选项。 我尝试使用 Konva 教程中提供的上下文菜单教程,但是在实现那里可用的删除功能时 无法删除添加到形状的转换器
1回复

KonvaJS-鼠标悬停/鼠标移开图像时切换锚点

在我的KonvaJS项目中,我将图像(又称“贴纸”)添加到上传的图像上,并使用KonvaJS,添加“锚点”以旋转和调整图像大小。 当鼠标不在主图像上时(或者当您单击标签时,它会切换编辑模式吗?),我想删除锚点和线条。 这怎么可能? function centreRectSha
1回复

上传时保持图像比例

当我将图像上传到konva.js时,有没有一种方法可以保持图像比例。 基本上,我使用的是带有Vue扩展名的konva,我需要一种上传背景图像的方法。 我已经根据用户设备设置了画布大小,并且可以将上传图像的大小设置为该画布大小,但不会保存它的比例。 我认为,可以通过编写函数来确定图像可以达
1回复

使响应式浏览器窗口根据Canvas中的纵横比缩小

这个问题已经在这里有了答案: 使用CSS保持div的长宽比(33个答案) 5个月前关闭。 我想制作一个浏览器窗口,例如: 我从https://tailw
1回复

HTML5Canvas叠加图像

我正在使用 konvajs 库将多个图像绘制到画布上。 图像在某些点上是透明的。 现在我想将点击处理程序附加到图像,但如果图像在那一点上是透明的,则不应触发点击处理程序/将点击处理程序提升到隐藏图像。 但是目前顶部的图像获取所有点击处理程序。 有没有办法忽略图像透明部分的点击事件?
1回复

在使用Canvas路径的Konva中剪辑图像?

我在这里看到了一个类似的问题,但我有一个半径array而不是一个number所以它不能使用+运算符。 半径有 4 个值: [top, right, bottom, left] Codesandbox 👉 https://codesandbox.io/s/clip-rounded-image-in
1回复

KonvaJS总是在标签中居中文本

我为代码道歉,它处于我正在积极使用的状态。 在 Konva JS 中,我正在创建标签。 这基本上是一个组,它有一个形状和文本元素。 形状是从数据库动态绘制的,每个 db 行都有坐标、形状(正方形、圆形等)、大小和旋转。 这些乘以取决于屏幕尺寸的比例。 我有一个可行的解决方案,我已经使用了几个星期,但