Question

我有一个使用html和js为web创建的phonejs项目。我需要一个包含项目施工计划/高层建筑计划图像的页面。在该图像中有一些批次，例如，批次1-20，其状态为AVAILABLE，SOLD，BOOKED等。我想让用户可以在图像中标记相应批次的状态，可以按颜色区分，例如RED = SOLD，GREEN = AVAILABLE等，状态可以保存到数据库中。有谁能建议我完成这个的最佳方法/方法是什么？非常感谢提前。

我已经尝试过使用canvas。以下是我的代码。

HTML

<div data-options="dxView : { name: 'status_tagging', title: 'status_tagging' } " >
<div  data-options="dxContent : { targetPlaceholder: 'content' } " >
   <h4>Drag the status to the corresponding lot.</h4>
    <img id="available" width=32 height=32 src="images/available.png">
    <img id="booked" width=32 height=32 src="images/booked.png">
    <img id="hold" width=32 height=32 src="images/hold.png">
    <img id="reserved" width=32 height=32 src="images/reserved.png">
    <img id="sold" width=32 height=32 src="images/sold.png">
    <img id="siteplan" src="images/siteplan.jpg">
    <br>
    <canvas id="myCanvas" width=300 height=300 style="border:1px solid #d3d3d3;"></canvas>
</div>

的JavaScript

KioskAdminV2.status_tagging = function (params) {

var id = params.id;
var tb_prop_siteplan = new KioskAdminV2.tb_prop_siteplanViewModel();
var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
var $canvas=$("#myCanvas");
var canvasOffset=$canvas.offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
var img=document.getElementById("siteplan");
ctx.drawImage(img,10,10);

var image1=new Image();
image1.src = "images/available.png";
var image2=new Image();
image2.src = "images/booked.png";

var $available=$("#available");
var $booked=$("#booked");
var $canvas=$("#myCanvas");

$available.draggable({
    helper:'clone'
});

$booked.draggable({
    helper:'clone'
});

// set the data payload
$available.data("image",image1); // key-value pair
$booked.data("image",image2);
$canvas.droppable({
    drop:dragDrop
});

function dragDrop(e,ui){
    var element=ui.draggable;
    var data=element.data("url");
    var x=parseInt(ui.offset.left-offsetX);
    var y=parseInt(ui.offset.top-offsetY);
    ctx.drawImage(element.data("image"),x-1,y);
}


return {
    id:id,
    tb_prop_siteplan: tb_prop_siteplan,
    canvas:canvas,
    ctx:ctx,
    $canvas:$canvas,
    canvasOffset:canvasOffset,
    offsetX:offsetX,
    offsetY:offsetY,
    img:img,
    image1:image1,
    image2:image2,
    $available:$available,
    $booked: $booked,
    dragDrop: dragDrop

};

};

但是我得到了错误＆＃34;无法读取＆＃39; getContext＆＃39; of null＆＃34;。谁能告诉我为什么会这样？

Answer 1

您可以在Canvas或SVG中进行项目，但是......

由于您的建筑平面图已经固定，因此您不需要它们来完成您的项目。

只需使用html + css - 在线学习更简单+更多html + css教程。

将您的建筑计划分成多个，并制作每个批次的图像。
制作每个批次的绿色和红色阴影版本。
监听鼠标点击事件并确定使用哪个批次。
将该批次的图片从红色转换为黄色，再显示为已售出预订的可用。

标记图像中的状态

1 个答案: