javascript - Konvajs 如何单击并激活从数据库列表加载的图像
问题描述
我在数据库表中加载了图像路径，我显示在网页上，并希望能够单击它们并将它们显示在蓝色野马上，就像页面加载时红色的 OTC 示例徽标一样。我想单击右侧的任何图像，以便调整图像大小、旋转图像或将图像移动到汽车上。我知道它在我不擅长的 Javascript 中。我花了一个小时浏览文档。谢谢你。
到目前为止我所拥有的实时示例： https ://360apparel.com/designer99.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Collapsible sidebar using Bootstrap 4</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" >
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<script src="https://unpkg.com/konva@7.2.2/konva.min.js"></script>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div class="wrapper" style="float:left;width:60%;background:grey1">
<div id="container" style="background:pink1;float:left;width:75%;height:768px;"></div>
</div>
<br>
<div style="float:left;width:40%;background:lightblue1" class="container">
<form name="frmImage" method="post" action="">
<div class="message">
<?php if(isset($message)) { echo $message; } ?>
</div>
<div class="btn-menu" align="right"
style="padding-bottom: 5px;">
<a href="image-add.php" class="link">Add Image</a>
</div>
<div style="width:auto;height:850px;overflow:auto">
<?php
require_once ("db.php");
$sql = "SELECT * FROM images_info ORDER BY image_id DESC";
$result = mysqli_query($conn, $sql);
while ($row = mysqli_fetch_array($result)) {
?>
<div class="col-md-4" style="height:225px;float:left;background:pink1">
<div style="width:170px">
<img style="width:150px" src="<?php echo $row["image_path"]; ?>" />
<?php // echo date("d-m-Y", strtotime($row["date"])); ?>
</div>
<a style="float:left" href="image-edit.php?image_id=<?php echo $row["image_id"]; ?>"
class=""><img style="color:lime" alt='Edit' title='Edit'
src='icons/edit.png' class="action-icon" />
</a>
<a style="float:left;margin-left:15px" href="image-delete.php?image_id=<?php echo $row["image_id"]; ?>"
class=""><img style="color:red" alt='Delete' title='Delete'
src='icons/delete.png' class="action-icon" />
</a>
</div>
<br>
<?php
}
?>
</form>
<?php
$product_image = "assets/img/1912a.jpg";
$drag_image_1 = "assets/img/promo_images/logo/otc.png";
$drag_image_2 = "assets/img/promo_images/logo/otc.png";
$drag_image_3 = "img/logos/Cadillac-Logo-Transparent.png ";
$drag_image_4 = "img/logos/Helix-logo-transparent-background-580x562.png ";
$drag_image_5 = "img/logos/Mobil-Logo-PNG-Transparent-Background-Download.png ";
$drag_image_6 = "img/logos/PNGPIX-COM-Leopard-PNG-Transparent-Image-500x395.png ";
$drag_image_7 = "img/logos/dog-1484728_960_720.png ";
$drag_image_8 = "img/logos/dbf06550b5a23a13d8aeea6b45156814.png ";
?>
<script>
var width = 1000;
var height = 800;
var p = 1;
var q = 2;
var stage = new Konva.Stage({
container: 'container',
width: width,
height: height,
});
var layer = new Konva.Layer();
stage.add(layer);
//***************************** BLANK PRODUCT IMAGE ***********************
var LogoImg1 = new Konva.Image({
x: 1,
y: 1,
width: 1000,
height: 800,
// name: 'rect', this makes the product image resizable
draggable: false,
});
layer.add(LogoImg1);
var imageObj1 = new Image();
imageObj1.onload = function () {
LogoImg1.image(imageObj1);
layer.draw();
};
imageObj1.src = '<?php echo $product_image ?>';
//***************************** BLANK PRODUCT IMAGE END ***********************
/* *************** second dragable image ********************************** */
var LogoImg2 = new Konva.Image({
x: 350,
y: 300,
width: 50,
height: 50,
name: 'rect',
draggable: true,
});
layer.add(LogoImg2);
var imageObj2 = new Image();
imageObj2.onload = function () {
LogoImg2.image(imageObj2);
layer.draw();
};
imageObj2.src = '<?php echo $drag_image_2 ?>';
/* *************** second dragable image end ********************************** */
var tr = new Konva.Transformer();
layer.add(tr);
// by default select all shapes
tr.nodes([LogoImg2]);
// at this point basic demo is finished!!
// we just have several transforming nodes
layer.draw();
// add a new feature, lets add ability to draw selection rectangle
var selectionRectangle = new Konva.Rect({
fill: 'rgba(129,0,255,0.5)',
});
layer.add(selectionRectangle);
var x1, y1, x2, y2;
stage.on('mousedown touchstart', (e) => {
// do nothing if we mousedown on eny shape
if (e.target !== stage) {
return;
}
x1 = stage.getPointerPosition().x;
y1 = stage.getPointerPosition().y;
x2 = stage.getPointerPosition().x;
y2 = stage.getPointerPosition().y;
selectionRectangle.visible(true);
selectionRectangle.width(0);
selectionRectangle.height(0);
layer.draw();
});
stage.on('mousemove touchmove', () => {
// no nothing if we didn't start selection
if (!selectionRectangle.visible()) {
return;
}
x2 = stage.getPointerPosition().x;
y2 = stage.getPointerPosition().y;
selectionRectangle.setAttrs({
x: Math.min(x1, x2),
y: Math.min(y1, y2),
width: Math.abs(x2 - x1),
height: Math.abs(y2 - y1),
});
layer.batchDraw();
});
stage.on('mouseup touchend', () => {
// no nothing if we didn't start selection
if (!selectionRectangle.visible()) {
return;
}
// update visibility in timeout, so we can check it in click event
setTimeout(() => {
selectionRectangle.visible(false);
layer.batchDraw();
});
var shapes = stage.find('.rect').toArray();
var box = selectionRectangle.getClientRect();
var selected = shapes.filter((shape) =>
Konva.Util.haveIntersection(box, shape.getClientRect())
);
tr.nodes(selected);
layer.batchDraw();
});
// clicks should select/deselect shapes
stage.on('click tap', function (e) {
// if we are selecting with rect, do nothing
if (selectionRectangle.visible()) {
return;
}
// if click on empty area - remove all selections
if (e.target === stage) {
tr.nodes([]);
layer.draw();
return;
}
// do nothing if clicked NOT on our rectangles
if (!e.target.hasName('rect')) {
return;
}
// do we pressed shift or ctrl?
const metaPressed = e.evt.shiftKey || e.evt.ctrlKey || e.evt.metaKey;
const isSelected = tr.nodes().indexOf(e.target) >= 0;
if (!metaPressed && !isSelected) {
// if no key pressed and the node is not selected
// select just one
tr.nodes([e.target]);
} else if (metaPressed && isSelected) {
// if we pressed keys and node was selected
// we need to remove it from selection:
const nodes = tr.nodes().slice(); // use slice to have new copy of array
// remove node from array
nodes.splice(nodes.indexOf(e.target), 1);
tr.nodes(nodes);
} else if (metaPressed && !isSelected) {
// add the node into selection
const nodes = tr.nodes().concat([e.target]);
tr.nodes(nodes);
// get visible attr
var visible = node.visible(false);
// make invisible
node.visible(false);
// make visible (according to the parent)
// node.visible(true);
}
layer.draw();
});
</script>
<!-- jQuery CDN - Slim version (=without AJAX) -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<!-- Popper.JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
</body>
</html>
解决方案
推荐阅读
- c# - .NET Framework OpenIdConnect 包中缺少 OnRedirectToIdentityProvider 事件
- android - android Amazon AWS Mobile SDK 中的`TransferUtility` 是否在其自己的`Service` 中运行？
- python - Python 条件 if/else 无效语法
- angular - KeyCode 使用模板引用变量
- html - 以 Angular 形式添加新的用户输入行的函数
- python - 如何在python3中的数据框中重复添加列
- django - 如何在 Django 中保存 HTML 表单中的图像？
- javascript - 如何在 Smarty 中解决这个 jQuery 加载错误
- javascript - 在类中创建函数时出现错误
- ios - 我可以关闭主线程检查器，并在关闭主线程时使用 UIKit 吗？