javascript - 使用画布标签在 html 中添加谷歌地图
问题描述
我有一个简单的绘图画布,可以让用户绘制、编辑、清除和保存该绘图。每当用户刷新他的页面时,保存的绘图就会出现在屏幕上,直到除非用户删除该图像,否则我有这个代码非常好。
var canvas, ctx,
brush = {
x: 0,
y: 0,
color: '#000000',
size: 10,
down: false,
},
strokes = [],
currentStroke = null;
function redraw () {
ctx.clearRect(0, 0, canvas.width(), canvas.height());
ctx.lineCap = 'round';
for (var i = 0; i < strokes.length; i++) {
var s =strokes[i];
ctx.strokeStyle = s.color;
ctx.lineWidth = s.size;
ctx.beginPath();
ctx.moveTo(s.points[0].x, s.points[0].y);
for (var j = 0; j < s.points.length; j++){
var p = s.points[j];
ctx.lineTo(p.x, p.y);
}
ctx.stroke();
}
}
function init () {
canvas = $('#draw');
canvas.attr({
width: window.innerWidth,
height: window.innerHeight,
});
ctx = canvas[0].getContext('2d');
function mouseEvent (e){
brush.x = e.pageX;
brush.y = e.pageY;
currentStroke.points.push({
x: brush.x,
y: brush.y,
});
redraw();
}
canvas.mousedown(function (e){
brush.down = true;
currentStroke = {
color: brush.color,
size: brush.size,
points: [],
};
strokes.push(currentStroke);
mouseEvent(e);
}) .mouseup(function (e) {
brush.down = false;
mouseEvent(e);
currentStroke = null;
}) .mousemove(function (e) {
if (brush.down)
mouseEvent(e);
});
// check if localstorage has an array of strokes saved
if(localStorage.getItem('canvas_strokes')) {
strokes = JSON.parse(localStorage.getItem('canvas_strokes'));
redraw();
}
$('#save-to-local-storage').click(function () {
localStorage.setItem('canvas_strokes', JSON.stringify(strokes));
});
$('#save-btn').click(function () {
window.open(canvas[0].toDataURL());
});
$('#undo-btn').click(function (){
strokes.pop();
redraw();
});
$('#clear-btn').click(function (){
strokes = [];
redraw();
});
$('#color-picker').on('input', function () {
brush.color = this.value;
});
$('#brush-size').on('input', function () {
brush.size = this.value;
});
}
$(init);
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<canvas id="draw"></canvas>
<button id="save-to-local-storage">
Save
</button>
<button id="clear-btn">
clear
</button>
<button id="undo-btn">
undo
</button>
我只想在画布上添加谷歌地图,以便用户可以在谷歌地图而不是空白画布上绘图。所有其他功能保持不变。这是代码
解决方案
最简单的方法是让你的画布透明并将其放置在包含谷歌静态地图的 div 元素的顶部。我正在使用的地图上没有标记,但你可以制作一个。此代码段中的地图不会显示,因为您需要添加 API 密钥。另外,我禁用了您的 localStorage,因为它在我的控制台中给了我一个 CORS 错误。
var canvas, ctx,
brush = {
x: 0,
y: 0,
color: '#000000',
size: 10,
down: false,
},
strokes = [],
currentStroke = null;
function redraw() {
ctx.clearRect(0, 0, canvas.width(), canvas.height());
ctx.lineCap = 'round';
for (var i = 0; i < strokes.length; i++) {
var s = strokes[i];
ctx.strokeStyle = s.color;
ctx.lineWidth = s.size;
ctx.beginPath();
ctx.moveTo(s.points[0].x, s.points[0].y);
for (var j = 0; j < s.points.length; j++) {
var p = s.points[j];
ctx.lineTo(p.x, p.y);
}
ctx.stroke();
}
}
function init() {
canvas = $('#draw');
canvas.attr({
width: window.innerWidth,
height: window.innerHeight,
});
ctx = canvas[0].getContext('2d');
function mouseEvent(e) {
brush.x = e.pageX;
brush.y = e.pageY;
currentStroke.points.push({
x: brush.x,
y: brush.y,
});
redraw();
}
canvas.mousedown(function(e) {
brush.down = true;
currentStroke = {
color: brush.color,
size: brush.size,
points: [],
};
strokes.push(currentStroke);
mouseEvent(e);
}).mouseup(function(e) {
brush.down = false;
mouseEvent(e);
currentStroke = null;
}).mousemove(function(e) {
if (brush.down)
mouseEvent(e);
});
// check if localstorage has an array of strokes saved
//if (localStorage.getItem('canvas_strokes')) {
//strokes = JSON.parse(localStorage.getItem('canvas_strokes'));
//redraw();
//}
$('#save-to-local-storage').click(function() {
localStorage.setItem('canvas_strokes', JSON.stringify(strokes));
});
$('#save-btn').click(function() {
window.open(canvas[0].toDataURL());
});
$('#undo-btn').click(function() {
strokes.pop();
redraw();
});
$('#clear-btn').click(function() {
strokes = [];
redraw();
});
$('#color-picker').on('input', function() {
brush.color = this.value;
});
$('#brush-size').on('input', function() {
brush.size = this.value;
});
}
$(init);
html,
body {
height: 100%;
}
#draw {
background-color: transparent;
position: absolute;
top: 0px;
height: 100%;
width: 100%;
z-index: 2;
}
#map {
background-image: url("https://maps.googleapis.com/maps/api/staticmap?center=Fargo,ND&zoom=12&size=400x400&key=YOUR_API_KEY");
position: absolute;
top: 0px;
height: 100%;
width: 100%;
z-index: 1;
}
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<div style="position:relative;height:100%;width:100%">
<div id="map"></div>
<canvas id="draw"></canvas>
</div>
<button id="save-to-local-storage">
Save
</button>
<button id="clear-btn">
clear
</button>
<button id="undo-btn">
undo
</button>
推荐阅读
- php - 无法订阅网站中的订阅表格
- appium - 如何使用 ruby 在 mac 中以编程方式启动 Appium 服务器?
- azure-data-factory-2 - Azure 数据工厂 v2 如果活动总是失败
- laravel-5 - 错误类型错误:无法读取 app.js:12012 处未定义的属性“调度”
- javascript - Vue动态组件:如何从同一组件的多个实例中进行选择
- android - 服务器通过firebase云消息发送消息后,如果客户端恢复在线,android客户端如何接收消息?
- r - Table format won't show x values
- bash - How to check if a number is within a range in shell
- ios - 以iOS的xamarin形式将孩子异步添加到stacklayout
- javascript - 连续期间的javascript搜索字符串