Я пытаюсь загрузить фоновое изображение для холста, а затем создавать и перемещать фигуры. Поскольку я хочу расширить эту функциональность позже, я использую бумагу. js (0.12.4), которая поставляется с множеством примеров и удобных инструментов.
В целом я могу это сделать, но я необходимо сделать дополнительный шаг, открыв , открыв консоль браузера, или , увеличив и уменьшив (Firefox 74; Chrome 80.0.3987.149). Просто тогда все ведет себя как запланировано. Пожалуйста, смотрите GIF ниже.
Вот код презентации выше:
<!DOCTYPE html>
<html lang="en">
<head >
<title></title>
<!-- Load Bootstrap and JQuery -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div id="main">
<div>
<canvas id="myCanvas" resize></canvas>
</div>
</div>
<script type="text/paperscript" canvas="myCanvas">
var hitOptions = {
segments: true,
stroke: true,
fill: true,
tolerance: 5
};
var segment, path;
var movePath = false;
function onMouseDown(event) {
segment = path = null;
var hitResult = project.hitTest(event.point, hitOptions);
if (!hitResult)
return;
if (event.modifiers.shift) {
if (hitResult.type == 'segment') {
hitResult.segment.remove();
};
return;
}
if (hitResult) {
path = hitResult.item;
if (hitResult.type == 'segment') {
segment = hitResult.segment;
} else if (hitResult.type == 'stroke') {
var location = hitResult.location;
segment = path.insert(location.index + 1, event.point);
}
}
movePath = hitResult.type == 'fill';
if (movePath)
project.activeLayer.addChild(hitResult.item);
}
function onMouseDrag(event) {
if (segment) {
segment.point += event.delta;
} else if (path) {
path.position += event.delta;
}
logCanvasData();
}
function logCanvasData() {
var c = document.getElementById('myCanvas');
var ctx = c.getContext('2d');
var imgData = ctx.getImageData(0, 0, c.width, c.height);
for (var i = 0; i < 120; i += 4) {
if (imgData.data[i] == 255) {
console.log("We have a color with red inside.");
} else if (imgData.data[i] == 0 && imgData.data[i+1] == 0 && imgData.data[i+2] == 0 && imgData.data[i+3] != 0){
console.log("We have a black value!");
}
}
}
function onResize(event) {
// Whenever the window is resized, recenter the path:
path.position = view.center;
}
</script>
<script>
window.onload = function() {
// Loads the canvas element with a background image
// and an example polygon.
loadCanvas();
}
</script>
<script>
function loadCanvas(imageUrl, canvasId) {
if (typeof imageUrl == "undefined") {
imageUrl = "teddy_bear.jpg";
}
if (typeof canvasId == "undefined") {
canvasId = "myCanvas";
}
canvasImageWidth = 0;
canvasImageHeight = 0;
var canvasImage = new Image();
canvasImage.onload = function() {
// Determine the image size which will be the background of the canvas.
canvasImageWidth = this.width;
canvasImageHeight = this.height;
// Adjust the canvas size and set the background image.
var canvasElement = document.getElementById(canvasId);
canvasElement.width = canvasImageWidth;
canvasElement.height = canvasImageHeight;
canvasElement.style.background = "url(" + canvasImage.src + ")";
myPath = new paper.Path();
myPath.closed = true;
myPath.strokeColor = 'black';
myPath.fillColor = {hue:180, saturation:30, lightness:100}
myPath.add(new paper.Point(0, 0));
myPath.add(new paper.Point(100, 50));
myPath.add(new paper.Point(50, 150));
myPath.opacity = 0.3;
};
canvasImage.src = imageUrl;
}
</script>
<!-- Load script to draw polygons -->
<script src="paperjs-v0.12.4/dist/paper-full.js"></script>
</body>
</html>
Я считаю, что есть решение этой проблемы. Любые предложения приветствуются.
Возможные решения:
Как показано в скрипте sasensi в комментарии под его ответом: sfiddle.net / xidi2xidi / v67odmjy
Другой способ, который работает, но немного зависит от того, как вы загружаете сайт и изображение, следующий. В моем случае информация об изображении передается внутренним python Flask, так что я могу добавить их в качестве параметров стиля холста.
<style>
canvas[resize] {
width: {{ imageWidth }}px;
height: {{ imageHeight }}px;
background-image: url("{{ imagePath }}");
}
</style>