svg中有一个带有单元格的字段。它们之间没有距离,但显示为好像有(移动/调整大小时改变的单元格之间的空间线)。
如何绕过它?不能制作基板,因为。细胞将具有不同的颜色,基板也将是可见的。
var elem = document.getElementById('svg-canvas');
var w = elem.offsetWidth;
var h = elem.offsetHeight;
var two = new Two({ width: w, height: h}).appendTo(elem);
var settings = {
def_padding: 20,
cell_stroke: 'grey',
cell_lw: 0,
scale: 1.5,
}
var game = {
width: 30,
height: 30,
}
function gen_cell(){
return {
kind: '#000000'
};
}
function gen_field(){
game.cells = [];
for (let i = 0; i < game.height; i++) {
game.cells[i] = [];
for (let j = 0; j < game.width; j++) {
game.cells[i][j] = gen_cell();
}
}
}
var tmp_classes = [];
function add_class_after(id, classname, attrs = []){
tmp_classes.push([id, classname, attrs]);
return id;
}
function reset_classes(){
for (var i = 0; i < tmp_classes.length; i++) {
$('#' + tmp_classes[i][0]).addClass(tmp_classes[i][1]);
}
tmp_classes = []
}
function draw(){
two.clear();
let size = Math.min((w - settings.def_padding)/game.width, (h - settings.def_padding)/game.height);
let padding = {
x: w - size*game.width,
y: h - size*game.height,
}
for (let i = 0; i < game.cells.length; i++) {
for (let j = 0; j < game.cells[i].length; j++) {
let cell = new Two.Rectangle(
j*size + padding.x/2 + size/2,
i*size + padding.y/2 + size/2,
size,
size
);
cell.stroke = settings.cell_stroke;
cell.linewidth = settings.cell_lw;
cell.fill = game.cells[i][j].kind;
cell.id = add_class_after(i + '-' + j, 'cell');
two.add(cell);
}
}
two.update();reset_classes();
}
function scale(svg, e){
let content = svg.find('g');
let transform = content.attr('transform').split('(')[1].split(')')[0].split(' ').map(x => +x);
let x = e.originalEvent.offsetX - content.width()/2;
let y = e.originalEvent.offsetY - content.height()/2;
let deltaY = e.originalEvent.deltaY;
let scale_now = deltaY < 0 ? settings.scale : 1/settings.scale;
transform[0] *= scale_now;
transform[3] *= scale_now;
transform[4] = x - (x - transform[4])*scale_now;
transform[5] = y - (y - transform[5])*scale_now;
content.attr('transform', 'matrix(' + transform.join(' ') + ')');
}
function initialise(){
$('#svg-canvas').html('');
w = elem.offsetWidth;
h = elem.offsetHeight;
two = new Two({ width: w, height: h}).appendTo(elem);
draw();
}
function move(svg, x, y){
let transform = svg.find('g').attr('transform').split('(')[1].split(')')[0].split(' ').map(x => +x);
transform[4] += x;
transform[5] += y;
svg.find('g').attr('transform', 'matrix(' + transform.join(' ') + ')');
}
$(document).ready(function(){
gen_field();
draw();
$(window).resize(function(){
initialise();
});
$('#svg-canvas').bind('mousewheel DOMMouseScroll', function(e){
e.preventDefault();
});
$('body').bind('mousewheel DOMMouseScroll', '#svg-canvas svg', function(e){
if(e.ctrlKey){
scale($(this), e);
}
else if(e.shiftKey){
move($(this), -e.originalEvent.deltaY/5, 0);
}
else{
move($(this), 0, -e.originalEvent.deltaY/5);
}
});
$('body').on('mousedown', '#svg-canvas svg', function(e){
if(e.which !== 2) return;
e.preventDefault();
$(this).css('cursor', 'move');
let old_x = e.offsetX;
let old_y = e.offsetY;
$(this).mousemove(function(emove){
let x = emove.offsetX;
let y = emove.offsetY;
move($(this), emove.offsetX - old_x, emove.offsetY - old_y);
old_x = x;
old_y = y;
});
$(this).mouseup(function(){
$(this).off('mousemove');
$(this).css('cursor', 'default');
});
$(this).mouseleave(function(){
$(this).off('mousemove');
$(this).css('cursor', 'default');
});
});
});
.cell:hover{
opacity: 0.2;
}
.color, .condition{
margin-bottom: 10px;
border-left: 2px solid rgb(33, 37, 41);
}
.rule{
margin-bottom: 10px;
}
#svg-canvas{
width: 100%;
height: 80vh;
}
#svg-canvas svg{
background: lightgrey;
border: 1px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/two.js/0.7.1/two.min.js"></script>
<div id="svg-canvas" class="main_field"></div>
我知道精度并不完美,但是这些间隙的大小总是一样的,如果你缩小得太远,你也会看到:
需要用css写
更多细节在这里:https ://stackoverflow.com/a/13049402/9472094