Question

我在裁剪画布上添加裁剪的图像和徽标，裁剪的图像和徽标是较低和上部画布。现在问题是如何将最大宽度设置为布料画布，以便我可以将徽标拖出画布。

我已经为现有画布，徽标和裁剪图像实现了最大宽度。这里的问题是我无法将徽标拖动到整个画布。

这是代码

# make some data
df = data.frame(Phase = c(1, 1, 2, 2, 3), 
                Fish = floor(rnorm(5, 150)),
                Mammal = floor(rnorm(5, 50)))

df$all = rowSums(df[, 2:3])

# 1 change name
names(df)[which(names(df) == 'all')] = 'Total'

# 2 - reverse Fish and Mammal
idx1 = 2:3 # columns to change
idx2 = 3:2 # new order of columns
df[, idx1] = df[, idx2]
names(df)[idx1] = names(df)[idx2]

# 3 - calculate percentages
idxT = 2:3 # column indices of interest

newColNames = paste('%', names(df)[idxT])

tmp = df[, idxT, drop = FALSE] / matrix(df["Total"], ncol = length(idxT))
colnames(tmp) = newColNames
df = cbind(df, tmp)

<div class="container"> 

<div style="position: relative;" id="editor">
    <canvas id="canvas" class="img-responsive"></canvas>
</div>

<div class="container">
<a class="btn btn-primary" id="save">Save</a>
<a class="btn btn-primary" id="download">Download</a>

Answer 1

作为fabricjs画布，不要直接操纵宽度和高度，而是使用正确的方法：

setTimeout(function () {
    var myImg = document.querySelector("#background");
    var realWidth = myImg.naturalWidth;
    var realHeight = myImg.naturalHeight;
    var source = document.getElementById('background').src;
    var canvas = new fabric.Canvas('canvas');
    canvas.setDimensions({ width: realWidth, height: realHeight });
    var img = new Image();
    // use a load callback to add image to canvas.
    img.src = 'images/logo.png';
    var imgInstance = new fabric.Image(img, {
        width: 200
        , height: 45
    });
    canvas.add(imgInstance);
    canvas.setBackgroundImage(source, canvas.renderAll.bind(canvas), {
        backgroundImageOpacity: 0.5
        , backgroundImageStretch: false
    });


}, 2000);

如何根据fabric.js中的下部画布调整上部画布的大小。

1 个答案: